Schlagwort: css3

:last-child / :first-child Selektoren – CSS3 Adventskalender Tag 11

Im Tag 11 des CSS3 Adventskalender betrachten wir die Struktur-Pseudoklasse :first-child und :last-child näher.
:last-child / :first-child Selektoren – CSS3 Adventskalender Tag 11 weiterlesen

Teaserboxen komplett ohne Bilder – CSS3 Adventskalender Tag 9

Heute im CSS3 Adventskalender mal ein Tutorial „revised“. Bereits im Mai 2010 habe ich zu linear-gradient den Artikel „Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient)“ geschrieben und gezeigt, welche Möglichkeiten uns CSS3 heute schon bietet. Dabei habe ich versucht eine Designvorgabe komplett mit CSS3 umzusetzen und bin zu einem akzeptablen Ergebnis gekommen. So konnte ich den Einsatz von 2 Grafiken / 2 http-Requests mit insgesamt 2kb auf 1 Grafik / 1 Request mit 0,2kb reduzieren und habe gleichzeitig auch das Ergebnis gänzlich ohne Bilder gezeigt. Leider musste ich dabei auf eine grafische Feinheit verzichten (das kleine Pfeilsymbol/Dreieck)

Das zum Anlass genommen, habe ich das Tutorial jetzt erweitert und die Vorlage aus Photoshop 1:1 in CSS3 erstellt.
Teaserboxen komplett ohne Bilder – CSS3 Adventskalender Tag 9 weiterlesen

text-shadow – Text-Effekte – CSS3 Adventskalender Tag 7

Wie schon im CSS3 Adventskalender Tag 5 über box-shadow (Schatten) beschrieben, ist die Syntax zwischen text-shadow und box-shadow gleich.

.text-shadow {
	text-shadow: 2px 2px 5px #999;
}

text-shadow – Text-Effekte – CSS3 Adventskalender Tag 7 weiterlesen

linear-gradient (Verlauf) – CSS3 Adventskalender Tag 3

Einen einfachen Farbverlauf für Hintergünde in CSS3 zu erstellen bedarf schon etwas Schreibarbeit… Als Webkit 2008 begann die Eigenschaft umzusetzen, orientierten sie sich an der Spezifikation für Canvas. Mozilla entwarf daraufhin einen einfacheren Syntax und dieser Syntax ist derzeit auch der empfohlene des W3C. Bisher ist der Syntax nicht angeglichen.

Als Farbwerte können definierte Farbnamen, Hexadezimalwerte, RGB und HSL, oder RGBa und HSLa verwendet werden (aber was das alles bedeutet, zeigen wir in einem anderen Adventskalender Türchen). Jetzt erstmal ein Code-Beispiel:

linear-gradient (Verlauf) – CSS3 Adventskalender Tag 3 weiterlesen