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.

<button> Button

CSS - Notizzettel mit Büroklammer

PHP - X-tägige "NEU"-Markierung von Einträgen

JavaScript - Dialog mit dem Computer

MySQL - Zeige Einträge von heute an

Eintrag in Gästebücher
Gästebücher bieten die Möglichkeit, sowohl die eigene URL, als auch ein paar "warme" Worte zu hinterlassen. Eventuell wird der Webmaster dann einmal selbst bei Ihnen vorbeischauen und dessen Gäste, nach Ihnen, vielleicht auch.