9 Beispiele für den Einsatz von CSS3
Mit CSS3 sollte sich jeder Webdesigner ernsthaft auseinandersetzen, da die Möglickeiten von CSS3 oft verblüffend sind. Dieser Artikel versucht einen Überblick darüber zu vermitteln, was man alles mit CSS3 anstellen kann.
Image Slider
Es gibt bereits viele gute JavaScript Image Slider. Mit CSS3 gibt es jetzt auch die Möglichkeit, einen Imageslider nur mit CSS und ganz ohne JavaScript zu erstellen. Eine ausführliche Anleitung mit Live-Demo und dem Quelltext als Zip-Datei findet man bei Rilwis (Tran Ngoc Tuan Anh).
CSS Text Gradient
Auch Farbverläufe von Texten kann man nun mit CSS3 darstellen, ohne extra eine mit Photoshop erstellte Grafik einbinden zu müssen. Tim Brown erklärt sehr genau in seinem Artikel, wie man mit CSS3 Farbverläufe für Schriften erstellen kann.
CSS Shapes
Formen kann man mit geschicktem Einsatz von CSS3 sehr einfach gestalten. Eine verblüffend einfache Anleitung zur Erstellung von CSS Formen mit Video, Live Demo und der Quelldateien als im Zip-Format wurde von Nettuts Editor Jeffrey Way erstellt.
CSS Menüs und Buttons
Buttons kann man auch sehr einfach mit CSS3 erstellen. Eine gute Anleitung und die Live Demo gibt es bei Nick La. Eine ansprechend gestaltete und gute Übersicht über verschiedene CSS Eigenschaften hat Louis Lazaris erstellt. Die Live Demo sollte man sich unbedingt ansehen.
Wer noch mehr über verschiedene CSS Menüs und Buttons erfahren möchte, dem empfehle ich die Übersicht mit 12 CSS Button und Menü Techniken von Henry Jones.
CSS Teaserboxen mit Farbverlauf
Wie man mit CSS3 Hintergrundverläufe für Teaser Boxen erstellt, kann man von Sven in seinem gut geschriebenen deutschsprachigen Artikel erfahren.
CSS3 und Email Clients
Ob es bereits sinnvoll ist, CSS3 für den Versand von Emails einzusetzen, muss jeder für sich selbst entscheiden. Eine gute Einführung zum Thema mit einer praktischen Anleitung hat von Ros Hodgekiss bei net.tutplus.com veröffentlicht.
CSS3 Animationen als Flash Ersatz?
JavaScript und CSS3 könnnen eventuell bald eine Alternative für manche Flash Animationen werden. Bisher erreichen die CSS3 Annimationen aus meiner Sicht noch nicht die Qualität, die man mit Flash erreichen kann. Allerdings stellen sie bereits für die Suchmaschinenoptimierung eine interessante Alternative dar. Es bleibt abzuwarten, welche Animationen bald mit CSS3 zu sehen sind. Drei erste Beispiele habe ich bei Richard Leggett, Florian Batschi [Demo], und Marco Kuiper [Demo] gefunden.
Text beschneiden oder Wörter umbrechen mit CSS3
Einen Text beschneiden oder Wörter umbrechen kann man mit den CSS3 Eigenschaften text-overflow und word-wrap. Wie man das genau anstellt, kann man in der deutschsprachigen Erklärung bei hyperkontext.at nachlesen.
12 Kostenlose HTML5-CSS3 Templates
Eine sehr gute Übersicht zu 12 eleganten und kostenlosen HTML5-CSS3 Templates kann man bei devsnippets.com finden. Dort sind einige sehr spannende Beispiele enthalten, die einen inspirieren können.
Fazit
Mit CSS3 gibt es einige neue Möglichkeiten zu entdecken. Noch unterstützen nicht alle Browser CSS3 vollständig. Allerdings lohnt es sich aus meiner Sicht sehr, sich bereits jetzt mit den neuen Möglichkeiten von CSS3 auseinanderzusetzen. Viel Spass beim Testen!
Experimente mit der CSS-Eigenschaft box-shadow
Tutorial: Kreative Effekte mit Bild-Overlays - Teil 1
Beeindruckende Effekte mit der CSS-Eigenschaft text-shadow
Kommentare
Sven - am 19. Mai 2010 -
Danke für die Erwähnung und Verlinkung meines Artikels über CSS3 Verläufe und über die gute Zusammenstellung der Tutorials.
Jan - am 19. Mai 2010 -
Hallo Sven,
es ist schön zu hören, dass Dir die Zusammenstellung gefällt.
Gruß, Jan
wiyono - am 19. Mai 2010 -
really nice stuff. thank for share, i love this…
Robert - am 21. Mai 2010 -
Wow! Sehr schöner Artikel. Am interessantesten finde ich den Einsatz von Animationen als Flash-Ersatz. Da muss ich mich mal weiter einarbeiten.
Alex Sczakiel - am 27. Mai 2010 -
Wirklich cool, hatte mich mit CSS3 bisher nicht so sehr beschäftigt, aber es nach dem lesen des Artikels mal ausprobiert und das macht wirklich Spaß! Aufgrund der schlechten Unterstützung in den Browsern, werde ich es noch nicht für meine Webseiten einsetzen, aber ansonsten ist das genau was ich will. Ich designe meine Webseiten Layouts nie zuerst in Photoshop, sondern immer gleich in HTML und CSS, benutze so wenig Grafik und Javascript wie möglich und mit diesen Möglichkeiten würde ich sagen, kann man beeindruckend CSS Themes ohne eine einzige Grafik bauen.
Hoffe die Browser drücken mal auf die Tube! Heutige Browser CSS3 und HTML5 Kompatibilität kann man sich hier sehr übersichtlich anschauen: http://findmebyip.com/litmus#target-selector
Axel Leitner - am 24. Juni 2010 -
Super was CCS3 uns an Performance bringen wird. Leider ist mal wieder der IE ziemlich im hintertreffen.
Aber ein tolles Kompliment für die hervorragende Information !!!!
Sascha - am 4. Oktober 2010 -
das der IE mal wieder nicht richtig mitspielt ist doch nur ein grund mehr, diesn browser und die anpassungen dafür zu verweigern. ich hab auch echt keine lust mehr. immer wieder eine extrawurst für den IE. muss der auftraggeber halt in zukunft darauf verzichten oder es extra bezahlen.
Till Kleinert - am 3. Dezember 2010 -
Danke für die Infos zu CSS3. Nutz Ihr es bereits aktiv/intensiv in euren Projekten für eure Kunden?! Leider ist es ja derzeit erst ab Internet Explorer 9 richtig anzeigbar, ganz zu schweigen von den noch immer 10% die auf den IE6 setzen.
Trackbacks