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 {
margin: 3em;
width: 300px;
height: 300px;
display: inline-block;
background: #FFFFDF;
position: relative;
box-shadow: 0px 0px 4px 0px #C5C5C5;
transform: rotate(-2deg);
}
.text {
font-family: 'Comic Sans MS', Fantasy, Verdana, Arial, Sans-Serif;
font-size: 1.3rem;
color: Royalblue;
line-height: 35px;
padding: 50px 10px 10px 10px;
}
.bueroklammer:before {
content: "";
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-top: 3px solid #000000;
border-right: 3px solid #000000;
border-left: 3px solid #000000;
width: .7em;
height: 0.8em;
position: absolute;
top: -1em;
right: 2em;
}
.bueroklammer:after {
content: "";
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-bottom: 3px Solid #000000;
border-right: 3px Solid #000000;
border-left: 3px Solid #000000;
width: .46em;
height: 1.8em;
position: absolute;
top: -0.3em;
right: 2em;
}
</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.
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 {
margin: 3em;
width: 300px;
height: 300px;
display: inline-block;
background-color: #FFF;
background-image: linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
position: relative;
box-shadow: 0px 0px 4px 0px #828282;
transform: rotate(5deg);
transition: transform 1s;
}
.notizzettel:hover {
transform: rotate(0deg);
}
.text {
font-family: 'Comic Sans MS', Fantasy, Verdana, Arial, Sans-Serif;
font-size: 1.3rem;
color: Peru;
line-height: 35px;
padding: 50px 10px 10px 10px;
}
.bueroklammer:before {
content: "";
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-top: 3px solid #000000;
border-right: 3px solid #000000;
border-left: 3px solid #000000;
width: .7em;
height: 0.8em;
position: absolute;
top: -1em;
right: 2em;
}
.bueroklammer:after {
content: "";
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-bottom: 3px Solid #000000;
border-right: 3px Solid #000000;
border-left: 3px Solid #000000;
width: .46em;
height: 1.8em;
position: absolute;
top: -0.3em;
right: 2em;
}
</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