LINIEN und BALKEN:
1 durchgehend, dünn<hr />
2 gestrichelt
<div style="border-top: 1px dashed blue; margin: 1em 0;"></div>
3 durchgehend, dick
<div style="border-top: 5px solid lightgrey; margin: 1em 0;"></div>
4 gepunktet
<div style="border-top: 3px dotted black; margin: 1em 0;"></div>
5 "Naht" oben
<div style="border-bottom: 2px dashed olivedrab; border-top: 3px solid yellowgreen; height: 0.3em; margin: 1em 0;"></div>
6 "Naht" unten
<div style="border-bottom: 3px solid yellowgreen; border-top: 2px dashed olivedrab; height: 0.3em; margin: 1em 0;"></div>
7 durchgehend, zweifarbig
<div style="border-top: 8px ridge #cc3399; margin: 1em 0;"></div>
8 brauner Balken
<div style="background-color: #704343; border-top: 3px solid deepskyblue; height: 0.6em; margin: 1em 0;"></div>
9 goldener Balken
<div style="background-color: darkgoldenrod; border-bottom: 2px solid #302303; height: 0.5em; margin: 1em auto; width: 75%;"></div>
10 hellblauer Balken
<div style="background: #b3ffe6; border-bottom: 1px solid #152837; margin: 1em auto; border-top: 1px solid #152837; height: 0.4em;"></div>
RAHMEN UND BOXEN:
A dünner Rahmen mit grauem Hintergrund<div style="background: #e6e6e6; border: 1px solid black; padding: .5em; text-align: center; margin: 1em 0;">BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT</div>
B rote Rahmenlinien
<div style="border-bottom: 2px solid red; border-top: 2px solid red; margin: 1em auto; padding: .5em; text-align: center; width: 450px;">BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT</div>
C doppelte Linien
<div style="border: 4px double #777; padding: 0.55em; text-align: center; width: 400px; margin: 1em 0;">BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT</div>
D 3D-Rahmen mit blauem Hintergrund
<div style="background: #dbe4f0; border: 6px groove #35547e; margin: 1em auto; padding: 0.75em; text-align: center; width: 350px;">BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT</div>
E grün gefärbt mit bunten Seitenlinien
<div style="background: #9fff80; border-left: 21px double #ff5500; border-right: 21px solid #4d4dff; margin: 1em auto; padding: 1em; text-align: center;">BEISPIELTEXT</div>
F ohne Farbe und schattiert
<div style="box-shadow: 7px 7px 5px rgb(86 , 115 , 38); padding: 1.2em 2em; width: 450px; margin: 1em 0;">BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT</div>
G schattierter Rahmen mit Linien in Pink
<div style="background: #fff7b3; border: 3px solid #e6007a; box-shadow: -6px 5px #990052; margin: 1em auto; padding: 0.5em; text-align: center; width: 300px;">BEISPIELTEXT BEISPIELTEXT BEISPIELTEXT</div>
H mit abgerundeten Ecken und 3D-Effekt
<div style="background: white; border-radius: 45px; box-shadow: 0px 0px 30px #007d80 inset; margin: 1em auto; padding: 1em; text-align: center; width: 60%;">BEISPIELTEXT BEISPIELTEXT</div>
SONSTIGES:
I. Tab linksseitig<div style="background: orange; border-bottom: 6px solid lightblue; border-radius: 25px 25px 0 0; box-shadow: 0px 3px 5px maroon inset; float: left; margin: 1em 1.5em 1em 0; padding: 1.5em 1em 2em 1em; text-align: center; width: 130px;">BEISPIELTEXT</div>
II. Tab rechtsseitig
<div style="background: #ea4848; border-radius: 35px 0 0 35px; border: 3px double gold; box-shadow: -7px -4px 2px darkgoldenrod; float: right; margin: 1em 0 1em 1.5em; padding: 1.2em 0.5em; text-align: center; width: 150px;">BEISPIELTEXT</div>
III. Tab linksseitig mit Kante
<div style="background: #ffff4d; border-bottom: 4px solid lightblue; border-radius: 3px 15px 0 0; box-shadow: 0px 2px 4px maroon inset; display: inline-block; margin: 1em 0; padding: 1.3em .8em .8em 1em; width: 160px;">
BEISPIELTEXT</div>
<div style="border-bottom: 4px solid lightblue; display: inline-block; padding: 1.3em .8em .8em 1em; width: 440px; margin-bottom: 1em;">
</div>
BEISPIELTEXT</div>
<div style="border-bottom: 4px solid lightblue; display: inline-block; padding: 1.3em .8em .8em 1em; width: 440px; margin-bottom: 1em;">
</div>
IV. Tab rechtsseitig mit Kante
<div style="background: #ffff4d; border-bottom: 4px solid lightblue; border-radius: 15px 3px 0 0; box-shadow: 0px 2px 4px maroon inset; float: right; margin: 1em 0; padding: 1.3em 1em 0.8em 0.8em; text-align: right; width: 160px;">
BEISPIELTEXT</div>
<div style="border-bottom: 4px solid lightblue; float: right; padding: 1.3em 1em .8em .8em; width: 440px; margin-bottom: 1em;"></div>
BEISPIELTEXT</div>
<div style="border-bottom: 4px solid lightblue; float: right; padding: 1.3em 1em .8em .8em; width: 440px; margin-bottom: 1em;"></div>
V. Textschatten nach unten in Blaugrau
<div style="font-size: x-large; margin: 1em; text-shadow: 3px 3px 2px #325d81;">BEISPIELTEXT</div>
VI. Textschatten nach oben in Braun
<div style="font-size: x-large; margin: 1em; text-shadow: 3px -3px 2px #4d3300;">BEISPIELTEXT</div>
VII. Textschatten-Halo in Fuchsia
<div style="font-size: x-large; margin: 1em; text-shadow: 0px 0px 6px #cc0099;">BEISPIELTEXT</div>
Die Formatierung der Link-Buttons ist umfangreicher, deshalb ist ein eigener "style"-Abschnitt nötig (der aber im Browser und in der Schreibansicht keinen Platz wegnimmt). Erst darunter folgt der Link selbst. Das Ganze wird aber ebenso in den Post-Editor eingefügt wie die anderen Schnipsel. Nur Links mit dem Klassennamen "mybutton" werden im Browser nach den Vorgaben dargestellt, auf alle normalen wirkt sich das Stylesheet nicht aus.
! In der Schreibansicht werden die Buttons nicht dargestellt !
! Link und Beschreibungstext abändern: Entweder in der Schreibansicht in den Link klicken und im Info-Fenster "ändern" auswählen, oder in der HTMl-Ansicht die entsprechenden Stellen suchen und ersetzen !
VIII. blauer Link-Button mit Klick-Effekt
<style type="text/css">
a.mybutton1:link, a.mybutton1:visited {
background-color: cornflowerblue;
color: white;
border: 1px solid #05132e;
border-radius: 8px;
padding: 15px 20px 10px 25px;
margin: 1em;
text-align: center;
text-decoration: none;
box-shadow: 5px 5px 5px darkblue inset;
}
a.mybutton1:hover, a.mybutton1:active {
border: 3px ridge darkblue;
padding: 10px 20px;
box-shadow: 2px 2px 1px darkblue inset;
}
</style>
<a class="mybutton1" href="http://papierpotpourri.blogspot.de/p/copy-paste-happchen.html">Bitte drücken</a>
a.mybutton1:link, a.mybutton1:visited {
background-color: cornflowerblue;
color: white;
border: 1px solid #05132e;
border-radius: 8px;
padding: 15px 20px 10px 25px;
margin: 1em;
text-align: center;
text-decoration: none;
box-shadow: 5px 5px 5px darkblue inset;
}
a.mybutton1:hover, a.mybutton1:active {
border: 3px ridge darkblue;
padding: 10px 20px;
box-shadow: 2px 2px 1px darkblue inset;
}
</style>
<a class="mybutton1" href="http://papierpotpourri.blogspot.de/p/copy-paste-happchen.html">Bitte drücken</a>
IX. runder Link-Button mit Farbwechsel
<style type="text/css">
a.mybutton2:link, a.mybutton2:visited {
background-color: #00e600;
color: black;
border-radius: 50%;
padding: 20px 18px;
margin: 1em;
text-align: center;
text-decoration: none;
box-shadow: 0px 0px 12px 3px lime;
}
a.mybutton2:hover, a.mybutton2:active {
background: #e60000;
color: white;
box-shadow: 0px 0px 15px 5px red;
}
</style>
<a class="mybutton2" href="http://papierpotpourri.blogspot.de/p/copy-paste-happchen.html">Klick</a>
a.mybutton2:link, a.mybutton2:visited {
background-color: #00e600;
color: black;
border-radius: 50%;
padding: 20px 18px;
margin: 1em;
text-align: center;
text-decoration: none;
box-shadow: 0px 0px 12px 3px lime;
}
a.mybutton2:hover, a.mybutton2:active {
background: #e60000;
color: white;
box-shadow: 0px 0px 15px 5px red;
}
</style>
<a class="mybutton2" href="http://papierpotpourri.blogspot.de/p/copy-paste-happchen.html">Klick</a>