Ich habe im Laufe der Zeit bereits einige Artikel zum Thema CSS3 veröffentlicht. Um mal etwas Übersicht zu schaffen, habe ich alle erstellten Artikel, Beispiel-Seiten und Downloads in diesem Post zusammengefasst.
Wer jetzt beim Thema CSS3 nur Bahnhof versteht, sei diese kurze Einleitung ans Herz gelegt:
Die Cascading Style Sheets (englische Aussprache [kæsˌkeɪdɪŋˈstaɪlʃiːts]; für stufenförmige oder (hintereinander) geschachtelte Gestaltungsvorlagen), kurz CSS genannt, sind quasi eine deklarative Sprache für Stilvorlagen (engl. stylesheets) von strukturierten Dokumenten. Sie wird vor allem zusammen mit HTML und XML (zum Beispiel bei SVG) eingesetzt.
CSS in Version 3 ist bereits seit dem Jahr 2000 in der Entwicklung, welche aber auch nach 12 Jahren noch nicht abgeschlossen ist. Schön, dass die großen Browser die meisten Funktionen bereits heute unterstützen, wenn auch nur mit browserspezifischen Präfixen.
Also hier wie versprochen alle Artikel, Downloads, Demos rund um CSS3:
Artikel
- Einführung in Media Queries (Anpassung für mobile Endgeräte)
- Innenabstände und Ränder ohne Elementvergrößerung durch “box-sizing”
- Selbstablaufende Animationen mit “keyframe”
- Weiche Übergänge mit “transition”
- Farbverläufe mit “gradient”
- Mehrere Hintergrundbilder nutzen (multiple Background)
- Pseudo-Elemente im Einsatz
- Das Pseudo-Element “target”
- Runde Ecken mit “border-radius”
- Objekt-Schatten mit “box-shadow”
- Text-Schatten mit “text-shadow”
- Spiegeln mit “box-reflect”
- Objekte drehen mit “transform” und “rotate”
- Objekte skalieren mit “transform” und “scale”
- Objekte verzerren mit “transform” und “skew”
- Objekte verschieben mit “transform” und “translate”
Praktische Beispiele
- Nur das aktive Element hervorheben
- Animierte 404-Fehler Seite
- Animiertes Blu-ray-Logo
Artikel | Live-Demo | Download
- Animierter Button
- Animierter Stern-Button
Artikel | Live-Demo | Download
- Animierter Timer
Artikel | Live-Demo 1 | Live-Demo 2 | Download
- Bildergalerie
Artikel | Live-Demo 1 | Live-Demo 2
- Checkbox-Hack am Beispiel eines Frage-/Antwort-Bereichs
Artikel | Live-Demo | Download
- CSS-Buttons
- Responsive Flyout-Navigation
- Horizontales Dropdown-Menü
Artikel | Live-Demo 1 | Download | Live-Demo 2 | Download
- Tooltips
- Slideshow
Artikel | Live-Demo 1 | Download | Live-Demo 2 | Download
- Weihnachtsgruß-Banner
Artikel | Live-Demo | Download
- WordPress-Banner
Hallo Olli, grandiose Beispiele zu CSS3. Vielen Dank dafür.
Aber was mache ich wenn der User einen Internet Explorer hat oder wenn er nicht CSS3 fähige Safari, Opera, Firefox Versionen hat?
Hast du da zufällig einene Codeschnipsel der mir weiterhelfen könnte?
Danke
harry
Hallo Harry,
allgemein gibt es da keine Lösung. Man kann sicher das ein oder andere per Javascript (border-radius, transition, transform, etc.) oder Flash (keyframe-Animationen) machen, wie bisher Bilddateien für Farbverläufe verwenden, etc.. Auch speziell für den Internet Explorer vor Version 9 kann man viele Dinge mit MS-Filtern realisieren.
Aber warum sollte man sich heute noch solche Arbeit machen? Jeder Browser der letzten 2 Jahre (okay, der IE9 seit knapp einem Jahr) ist in der Lage die meisten CSS3-Effekte darzustellen. Und wer dennoch einen älteren Browser einsetzt, der bekommt die Webseite ja trotzdem angezeigt. Er muss halt nur auf das “Besondere” verzichten.
Meine Meinung: wer heutzutage keinen aktuellen Browser einsetzt, ist selbst schuld und hat darüber hinaus noch ein Sicherheitsproblem.
Gruß Olli
wow.. sehr tolle sammlung und zusammenstellung! alles bei was man so braucht als webdesigner. vielen dank, olli!
gruß mario
Hallo Olli,
ich bin durch Zufall (google) auf Deine Sammlung aufmerksam geworden und kann mich nur bei Dir bedanken.
Eine tolle Zusammenstellung und Übersicht über die verschiedenen Möglichkeiten mit CSS3. Ich benutze zwar bereits das Ein oder Andere auf meiner Website, aber es ist schön mal alles zusammen auf einem Blick zu sehen. So kann ich mir schnell ein paar neue Anregungen holen.
Vielen Dank und bis bald
Klaus