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.

<nav> Navigationsbereich

CSS - Datum als Kalenderblatt darstellen

PHP - Leere Arrays entfernen

JavaScript - Checkboxen JavaScript-Funktion zuweisen

MySQL - Wie oft ist ein Eintrag in einer Spalte vorhanden

Fehlermeldungen
Wird eine Webseite nicht gefunden, etwa weil in den Suchmaschinen ein toter Link enthalten ist, gibt es eine Fehlermeldung, die weder optisch noch inhaltlich attraktiv ist. Eine typische Fehlermeldung lautet: 404 - File not found.

Eine selbst gestaltete Fehler-Weiterleitungsseite leitet den Besucher sicher zum Angebot der Webseite.