Artikel der Kategorie ‘CSS3-Übungen’

CSS3-Übungen und Beispiele

Text-shadow – Schatten für Deinen Text

Ist doch nicht CSS3!? Oder? Doch! text-shadow wurde schon mit CSS Level2 eingeführt, allerdings dann wieder ausgesetzt, um mit CSS Level3 wieder eingeführt zu werden.

CSS3 TEXT SHADOW

Die Eigenschaft text-shadow sollte ohne browserspezifisches prefix in allen neueren Browsern funktionieren. Die Anwendung ist super einfach:

Die Syntax:
text-shadow: hSchatten vSchatten blur color;

Beispiel:
text-shadow: 3px 3px 0 #999;

(horizontaler Versatz 3px nach rechts, vertikaler Versatz 3px nach unten, blur 0 = kein Radius, harte Kanten)

hSchatten = horizontaler Versatz (Pflichtangabe)
vSchatten = vertikaler Versatz (Pflichtangabe)
blur = Weichzeichnung Radius (optional)
color = Farbe (optional)

Bei den Angaben zum Versatz sind negative Werte erlaubt, mehrere Schatten werden durch Komma getrennt.

Kleine Animation mit CSS und einem spritesheet

Ein Spritesheed ist eine einzelne Grafikdatei, die aber mehrere kleinere Bildchen, Icons, Symbole oder Abwandlungen davon enthält. Mit CSS kann man dann prächtig die Positonen der gewünschten “Bildchen” ansteuern. Es müssen hier jeweils aber nicht mehrere Grafiken geladen werden, sonder nur eine. Das spart Ladezeit und http-Anforderungen. In der Vergangenheit habe ich sprites z. B. für unterschiedliche Linkzustände hover, active etc. benutzt.

Prinzip: unterschiedliche Zustände (hover, active), unterschiedliche Positionen der Hintergrundgrafik.

Hover und Klick drauf!

<a id="css3sprite"></a>

#css3sprite {
width: 160px;
height: 160px;
display: block;
background: url(http://www.css3.de/upload/Peileppe_footman.png);
background-position: 0;
}
#css3sprite:hover {
background-position: -320px;
}
#css3sprite:active {
background-position: -480px;
}

Mit CSS3 und den @keyframes animationen kann man das Spritesheet auch als “Filmstreifen” verwenden, der dann, Sequenz für Sequenz (unterschiedliche Positionen in dem Spritesheet), abläuft.

Hier das Spritesheet als Beispiel (verkleinert auf 600px width):
Peileppe_footman

{
..
animation: spritesanim 1s steps(5) infinite;
..
}
@keyframes spritesanim {
to {
background-position: -800px;}
}

Hier die Animation:

spritesheet: Quelle (openclipart.org, Footman von user: Peileppe)

{box-sizing: border-box} Box-Modell

box-model versus box-sizing: border-box

Die Ausmaße eines (block-level-)Elements ermitteln sich nach dem “normalen” Box-Modell mit der Formel: width + padding + border.

Ein Container mit den Eigenschaften und Eigenschaftswerten:

div {
width: 300px;
height: 300px;
padding: 40px;
border: 20px solid black;
}

nimmt demnach insgesamt:

  • (von links nach rechts): 20px (border-links) + 40px (padding, Innenabstand-links) + 300px (Breite) + 40px (padding-rechts) + 20px (border-rechts) = 20+40+300+40+20 = 420px Breite
  • und (von oben nach unten): 20px (border-oben) + 40px (padding, Innenabstand-oben) + 300px (Höhe) + 40px (padding-unten) + 20px (border-unten) = 20+40+300+40+20 = 420px Höhe

für sich in Anspruch.

Dieser Container hat folgende Eigeschaften und Eigenschaftswerte width: 300px;
height: 300px; padding: 40px; border: 20px solid rgba(255,255,255, .6)

Diese Ermitlung hat in der Vergangenheit bei einigen Codern und Webdesignern zumindest für zeitweiliges Kopfzerbrechen gesorgt, gerade bei gefloateten Elementen und solchen, denen je nach Verwendung z. B. durch Zuweisung von (dynamischen) Klassen unterschiedliche Eigenschaftswerte wie border: 20px / border: 10px – padding: 20px / padding: 0px -zugewiesen wurden. Dadurch veränderte sich der von dem Element in Anspruch genommene Platz und ein mehrspaltiges Layout konte ohne Gegenmaßnahmen so schon mal anders aussehen als beabsichtigt.

Mit der Eigenschaft box-sizing und dem Wert border:box schlägt das Herz eines Webdesigners wieder etwas höher.

div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
height: 300px;
padding: 40px;
border: 20px solid black;
}

Weiterlesen

Rechnen in CSS mit calc()

CSS3 hat das Rechnen gelernt! Nicht unbedingt das idealste Beispiel, um zu demonstrieren, dass CSS3 mit calc() rechnen kann, aber dafür ein einfaches und nachzuvollziehendes Beispiel. CSS hat hier zur Darstellung der Säulen echt gerechnet!

Ich habe hier im Beispiel Säulen dargestellt, die den Werten von 10%, 20%, 30%, 40% und 100% entsprechen. Die Höhe der unsortierten Listen habe ich mit 500px festgelegt, welches dann ja auch gleich meine 100% sind.

Um die Höhe der jeweiligen Säulen zu ermitteln, habe ich in der CSS-Datei rechnen lassen:

height: calc(100%/10*1);
Das ergibt rechnerisch 10%, 10% von 500px entsprechen 50px;

height: calc(100%/10*4);
Das ergibt rechnerisch 40%, 40% von 500px entsprechen 200px;

Wichtig war mir hier nur, das Handling zu üben, Anwendungsmöglichkeiten werden sich sicher ergeben, da habe ich keine Sorgen.

Weiterlesen

animation mit @kreyframes und mehreren Hintergrundbildern

Heute habe ich als Kombination der Eigenschaft backgrounds bzw. mehrere Hintergrundbilder (multiple backgrounds) und den @keyframes Animationen eine weitere kleine Variation meiner ersten Animation erstellt. 🙂

Hier wechseln alle 3 Hintergrundbilder ihre Position. Zudem werde ich im nächsten Schritt noch Text und weitere Grafiken einfügen, um dann als “Endziel” einen animierten CSS3.de Banner zu haben.

 
Weiterlesen