CSS - Notizzettel mit Büroklammer

Ich denk' nicht positiv, doch bin ich. "Denk" nicht negativ, doch sinnig. Ich schätze mal, du Optimist, Du schriebst mal wieder ganz schön Mist.

<style>

.
notizzettel {
 
margin3em;
 
width300px;
 
height300px;
 
displayinline-block;
 
background#FFFFDF;
 
positionrelative;
 
box-shadow0px 0px 4px 0px #C5C5C5;
 
transformrotate(-2deg);
}

.
text {
 
font-family'Comic Sans MS'FantasyVerdanaArialSans-Serif;
 
font-size1.3rem;
 
colorRoyalblue;
 
line-height35px;
 
padding50px 10px 10px 10px;
}

.
bueroklammer:before {
 
content"";
 
border-top-left-radius100%;
 
border-top-right-radius100%;
 
border-top3px solid #000000;
 
border-right3px solid #000000;
 
border-left3px solid #000000;
 
width.7em;
 
height0.8em;
 
positionabsolute;
 
top: -1em;
 
right2em;
}
.
bueroklammer:after {
 
content"";
 
border-bottom-left-radius100%;
 
border-bottom-right-radius100%;
 
border-bottom3px Solid #000000;
 
border-right3px Solid #000000;
 
border-left3px Solid #000000;
 
width.46em;
 
height1.8em;
 
positionabsolute;
 
top: -0.3em;
 
right2em;
}
</
style>

<
div class="notizzettel bueroklammer"><div class="text">Text ...</div></div>

Liebesgedicht
Wenn meine Hände deinen Hals berührn, wenn ich deinen Mund an meinem spür, dann weiß ich du bist hier - mein geliebtes Flaschenbier.

<style>

.
notizzettel {
 
margin3em;
 
width300px;
 
height300px;
 
displayinline-block;
 
background-color#FFF;
 
background-imagelinear-gradient(#eee .1em, transparent .1em);
 
background-size1001.2em;
 
positionrelative;
 
box-shadow0px 0px 4px 0px #828282;
 
transformrotate(5deg);
 
transitiontransform 1s;
}

.
notizzettel:hover {
 
transformrotate(0deg);
}

.
text {
 
font-family'Comic Sans MS'FantasyVerdanaArialSans-Serif;
 
font-size1.3rem;
 
colorPeru;
 
line-height35px;
 
padding50px 10px 10px 10px;
}

.
bueroklammer:before {
 
content"";
 
border-top-left-radius100%;
 
border-top-right-radius100%;
 
border-top3px solid #000000;
 
border-right3px solid #000000;
 
border-left3px solid #000000;
 
width.7em;
 
height0.8em;
 
positionabsolute;
 
top: -1em;
 
right2em;
}
.
bueroklammer:after {
 
content"";
 
border-bottom-left-radius100%;
 
border-bottom-right-radius100%;
 
border-bottom3px Solid #000000;
 
border-right3px Solid #000000;
 
border-left3px Solid #000000;
 
width.46em;
 
height1.8em;
 
positionabsolute;
 
top: -0.3em;
 
right2em;
}
</
style>

<
div class="notizzettel bueroklammer"><div class="text">Text ...</div></div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<wbr> Zeilenumbruch erlauben

CSS - Pop-up-Bucheffekt

PHP - Zeitgesteuerte Wechselbilder im Monatsrythmus

JavaScript - Zahlen autom. addieren

MySQL - Flexible Insert-Funktion