Verlosung: 1 Jahr Webstandards Magazin Abonnement

CSS3 Adventskalender Tag 17 und eine weitere Knüller-Verlosung!

Heute kommt das neue „Webstandards Magazin“ in den Handel und wir verlosen ein Jahres-Abo unter allen, die uns in den Kommentaren mitteilen, welches CSS3-Feature ihr liebstes ist.
Verlosung: 1 Jahr Webstandards Magazin Abonnement weiterlesen

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