Box mit Schatten

In diesem Tutorial werde ich Ihnen zeigen, wie es möglich ist, Boxen mit abgerundeten Ecken und Schlagschatten zu erstellen.

1. Zuerst gehen Sie unter "Eigene Seiten editieren" auf die Seite, wo Sie die Box hin haben möchten.
2. Dort drücken Sie dann an der gewünschten Stelle das <div>-Icon im Editor:



3. Beim aufscheinenden Fenster tragen Sie an der Stelle "Stylesheet Klasse" einen beliebigen Namen ein, beispielsweise "box":



4. Drücken Sie OK.
5. Jetzt können Sie einfach den Text schreiben, der in diese Box hineinkommen soll.

6. Gehen Sie nach "Design einstellen".
7. Wählen Sie den Reiter "Erweiterte Einstellungen".
8. Dort fügen Sie unter "Text über dem Design" folgenden Code ein:
<style type="text/css">
<!--
.box {
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 1px 1px 5px #000000;
-moz-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;

padding: 10px;
margin: 10px 200px 10px 10px;
background-color: #CCCCCC;

border-color: #EF9429;
border-width:1px;
border-style:solid;

font-size:120%;
font-style:italic;
color: #000000;
}
//-->
</style>

9. Mit den bunten Werten können Sie das Aussehen der Box verändern:
10: Mit diesen Werten wird der Radius der Ecken angegeben.
Mit 0 hätten sie keine runden Ecken mehr.

Wenn man keinen Schatten möchte kann man diese Zeilen einfach löschen.
1: Das ist der Wert, der den Schatten horizontal verschiebt.
Es ist auch ein negativer Wert zulässig, mit dem man den Schatten nach links verschieben würde.
1: Das ist der Wert, der den Schatten vertikal verschiebt.
Es ist auch ein negativer Wert zulässig, mit dem man den Schatten nach oben verschieben würde.
5: Dieser Wert gibt die Stärke der Weichzeichnung an.
Um so höher um so transparenter und größer wird er.
000000: Dieser Wert gibt die Farbe des Schattens an.
000000 ist schwarz.
Hier finden Sie weitere Farbwerte:
http://www.websidesearch.de/content/farben1.php

10: Mit diesem Wert können Sie den Innenabstand Ihrer Box definieren.
Um so größer um so weiter ist der Text vom Rand der Box entfernt.
10: Damit geben Sie den Außenabstand nach oben an.
Hier würden immer 10 Pixel Abstand ober der Box bleiben.
200: Damit geben Sie den Außenabstand nach rechts an.
Hier würden immer 200 Pixel Abstand rechts neben der Box bleiben.
10: Damit geben Sie den Außenabstand nach unten an.
Hier würden immer 10 Pixel Abstand unter der Box bleiben.
10: Damit geben Sie den Außenabstand nach links an.
Hier würden immer 10 Pixel Abstand links neben der Box bleiben.
CCCCCC: Damit geben Sie die Hintergrundfarbe der Box an.
CCCCCC wäre zum Beispiel ein Grauton.
Hier finden Sie weitere Farbwerte:
http://www.websidesearch.de/content/farben1.php

EF9429: Dieser Wert gibt die Farbe des Rahmens an.
In diesem Fall wäre das ein Orange-Ton.
Hier finden Sie weitere Farbwerte:
http://www.websidesearch.de/content/farben1.php
Hiermit wird die Größe des Rahmens angegeben.
solid: Damit wird der Art des Rahmens angeben.
Hier eine Liste mit möglichen Werten:
none keine Linie
solid durchgängige Linie
dotted gepunktete Linie
dashed gestrichelte Linie
double doppelte Linie
groove 3D Linie


120 Damit geben sie die Größe der Schrift an.
120 würde hier bedeuten, dass die Schrift um 20% größer ist als normal.
italic: Damit können Sie den Schriftstil verändern.
italic wäre beispielsweise kursiv.
normal wäre die Standardeinstellung.
000000: Dieser Wert gibt die Farbe der Schrift an.
Hier finden Sie weitere Farbwerte:
http://www.websidesearch.de/content/farben1.php

9. Drücken Sie "Speichern".

 





Kommentar zu dieser Seite hinzufügen:
Ihr Name:
Ihre E-Mail-Adresse:
Ihre Nachricht: