bombastiic

Wie mache ich eine Box?

Wie mache ich eine Box ?

So in diesem Tutorial will ich euch zeigen wie man eine Box erstellt.

1. Anfangen machen wir mit dem Style der Box und dieser Teil kommt zwischen den Style-tags (also zwischen < style> und < /style>)


das ist der Code für diese box
.box { padding-left: 5px ; padding-top: 5px ; padding-bottom: 5px ; padding-right: 5px; margin-top: 1px; margin-bottom: 1px; margin-right: 0px; margin-left: 0px; text-transform: none; text-align: center; font-family: Arial; font-weight: bold; font-style: italic; font-size : 10px ; color: #525252; letter-spacing: 2px; line-height: 11px; text-shadow: #ffffff 0px 0px 6px; border-left: 5px solid #636363; border-bottom: 5px solid #c7c7c7; border-top: 5px solid #636363; border-right: 5px solid #c7c7c7; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-topleft: 2px; -moz-opacity: 0.60; opacity: 0.60; background-color:#ececec; background-image: url('xxx'); }
(der Code ist länger als er sein müsste damit ihr alle möglichkeiten seht)





Die Erklärung:             

.box { sagt das dieses Befehl box heißen soll (bei mehreren Boxen anderen namen hier eingeben)
padding-left/right/bottom/top: 5px ; ist die Größe des Abstandes der Box zum Rest es Layouts
margin-top: 1px; ist der Abstand des Textes/der Bilder zu dem Boxrand
text-transform: uppercase; macht das der Text in Großbuchstaben angezeigt wird
text-align: left/right; gibt die Ausrichtung des Textes an
font-family: Arial; ist die Schriftart
font-weight: bold; der Text wird fett angezeigt
font-style: italic; macht den Text kursiv
font-size : 10px ; bestimmt die Schriftgröße des Textes
color: #B2B299; bestimmt die Textfarbe
letter-spacing: 2px; bestimmt den Buchstabenabstand des Textes
line-height: 10px; bestimmt die Höhe der Box
text-shadow: #ffffff 0px 0px 6px; macht das der Text einen Schatten hat (Farbe des Schattens ist änderbar)
border-left/right/bottom/top: 2px solid #c0c0c0; ist der Rand den die Box haben kann (dieser kann solid=normal , dotted=gepunktet oder dashed=gestrichelt sein und die Breite des Randes ist änderbar)
-moz-border-radius/-bottomright/-bottomleft/-topleft/-topright: 5px; ist die Abrundung der Boxe (wird nicht bei Internetexplorer angezeigt)
-moz-opacity: 0.60; könnt ihr benutzen um eure box transparent zu machen (mit dem unteren)
opacity: 0.60; könnt ihr benutzen um eure box transparten zu machen (mit dem oberen)
background-color:#ececec; ist die Hintergrundfarbe
text-transform:capitalize; macht das der erste Buchstabe jedes Wortes in der Box wird
background-image: url('xxx'); ist das Hintergrundbild (die URL des Bildes durch die drei x ersetzen)


2. So nun habt ihr den Style euer Box bestimmt nun braucht ihr eigentlich nur noch einen Code damit ihr eure Box irgendwo einfügen könnt.

Und das ist er:

<div class=box> Inhalt </div>

zwischen dem Code (bei Inhalt) könnt ihr Texte aber auch Bilder einfügen.

Und das wars dann auch schon.


Fall es noch Fragen gibt könnt ihr mich HIER fragen.
Tutorial by Bombastiic