Gestaltungsmöglichkeiten, die sich auf den Rahmen beziehen.
margin und padding
Die Auswirkungen habe ich hoffentlich verständlich im Box-Modell beschrieben! Änderung der Werte im Formular werden übertragen.
Nicht das es jetzt kompliziert wird. Damit können alle Elemente beeinflusst werden, ob das jetzt eigenschaftslose <span>, <nav>, <aside>, <div> oder vordefinierte <li>, <mark> und <cite> Elemente sind. Ihnen können weitere Gestaltungensmerkmale gegeben, vordefinierten auch genommen und mit anderen Eigenschaften ersetzt werden. Dazu gehören Abstände, sichtbare Rahmen als auch Schatten und natürlich Hintergründe.
Mit dem Absatz-Element <p> möchte ich beginnen:
Ich bin einfach nur ein Flegel im Absatz und drängele mich dem Rand auf.
Das würde keiner merken, wenn mir nicht einer eine Farbe untergeschoben hätte.
Was ohne Hintergrundfarbe kein Problem in der Dastellung ist, ist für mich farblich unterlegt einfach ein scheusliches Layout. Bei Tabellen wird dazu der Zellabstand benutzt. Das gibt es hier nicht. Wie im vorherigen Box-Modell nachzuvollziehen ist, setze ich die entsprechenden
Ich bin jetzt ein Text, der dezent Abstand hält, weil sich das so gehört.
.flegel { background-color: #ff7200; width: 570px; }
.hoeflich { background-color: #ffb600; width: 554px; padding: 4px 8px; }
Ob der eine nun Flegel und der andere nicht ist, soll wer will beantworten. Jedem Element können aus gestalterischen Gründen Eigenschaften zugefügt werden. Ersichtlich wird, dass <p> nicht nur einen Inhalt hat, sondern auch im Verhältnis zu seinem Rahmen steht. Das trifft auf alle Elemente zu. Das image-Element hier rechts erhält vorerst folgende Eigenschaft:
img { background-color: black; right: 0; float: right; width: 225px;
. So wird der Text auf Abstand gehalten mit 10px und höher gesetzt -50px (Platz sparen!). Um auch die padding-Eigenschaft zu verdeutlichen, erhält der innenere Abstand den Wert
margin: -50px 0 0 10px; }padding: 3px; und durch background-color: black, deutlich. Das ist somit kein Rahmen - das sieht nur so aus und wird klar, würde der Innenabstand vergrößert.
Schatteneffekte
So wie Text mit einem Schatten versehen werden kann, ist dies auch auf Rahmen (als Box bezeichnet) anwendbar.
„Shadow On The Wall“ von Roger Chapman ist immer noch hörenswert.
//nur der für den Schatten relevante Eintrag: x-Versatz y-Versatz Weichzeichner Farbe
.sow { box-shadow: 6px 6px 8px #000 ; }
//Der Versatz kann negative als auch positive Werte erhalten
Schatten kann auch in das Element wirken.
Das kommt einem Button recht nah
//für den Effekt relevante Eintrag: x y Weichzeichner Farbe von links und oben einziehendes weiss
//mit Kommata getrennt -x -y Weichzeichner Farbe für von unten und rechts einziehendes schwarz
//inset wird notiert, wenn der Effekt nach innen wirken soll und muss für jeden Eintrag gesetzt werden.
.btn { box-shadow: 5px 5px 6px #fff inset, -5px -5px 6px #000 inset; }
Eckengestaltung eines Elementes
Mit der Eigenschaft border-radius lässt sich nun auch am Kasten etwas verbessen.
Ob alles was möglich ist, nun auch gut wird, obliegt dem gestalterischen Vermögen des Entwicklers.
Ich sag Euch was!
Die Möglichkeit ist da, pack mers:
Das sind die Stylesheet-Angaben:
.anfasser { background-color: DeepSkyBlue; float: left; margin: 2px 10px 0 0; padding: 6px; border-radius: 0px 0.5em 0.5em; }
.anfasserrand { background-color: SeaGreen; float: left; margin: 2px 10px 0 0; padding: 6px; border-color: #fff #00c #00c #fff; border-style: solid; border-width: 1px;
border-radius: 0px 0.5em 0.5em; }
Damit man beim experimentieren auch zum Erfolg kommt, gibts Regeln:
Ellipse kann man machen mit
border-radius: 4em/1em
Kreis
border-radius: 60px;
width: 60px; height: 40px;
margin-top: 20px;
nur eine Angabe: alle Ecken werden gleich behandelt
zwei Angaben: 1. Wert für oben/links und unten/rechts,
2. Wert für oben/rechts und unten/links
drei Angaben: 1. Wert für oben/links,
2. Wert für oben/rechts und unten/links,
3. Wert für unten-rechts
vier Angaben: 1. Wert für oben/links,
2. Wert für oben/rechts,
3. Wert für unten/rechts,
4. Wert für unten/links
Fürs erste ist gut!