Schlagwort: adventskalender

CSS3 Tabellen-Übersicht – CSS3 Adventskalender Tag 15

Heute am Tag 15 des CSS3 Adventskalender von maddesigns und dem Webstandard Blog geht es weniger um ein Tutorial, sondern eher um ein umfangreiches Beispiel der bisher vorgestellten Eigenschaften. Als HTML-Basis erstellen wir eine Tabelle mit einer Übersicht zum „CSS3 Browser Support“.

CSS3 Tabellen-Übersicht – CSS3 Adventskalender Tag 15 weiterlesen

:nth-child() Pseudo-Selektor – CSS3 Adventskalender Tag 13

Der Pseudo-Selektor :nth-child() ist sehr hilfreich, wenn man mehrere gleiche Elemente unterschiedlich gestalten möchte. Die genaue Syntax lautet E:nth-child(an + b) {}. Zudem kommen lang vermisste Keywords zum Einsatz, die für das Gestalten von Datentabellen häufig gebraucht werden: odd & even.
:nth-child() Pseudo-Selektor – CSS3 Adventskalender Tag 13 weiterlesen

: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