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.

<li> Listenelement

CSS - Drehende E-Mail - Problem gelöst!

PHP - Mehrere Dateien zusammenfügen

JavaScript - HTML-Button über JavaScript eine Funktion zuweisen

MySQL - Datum nach Monaten sortieren

Freiraum
Quetschen Sie nicht so viel Text, Links und Bilder auf eine Seite. Lassen Sie freien Raum. Der Besucher wird es ihnen danken, außerdem erhöht es die Übersichtlichkeit.