--- title: "Jede Menge CSS3 Webdesign Trends mit Wow-Effekt" author: "Ellen Bauer" date: 2010-08-04 lang: de source: https://elmastudio.de/jede-menge-css3-webdesign-trends-mit-wow-effekt/ --- # Jede Menge CSS3 Webdesign Trends mit Wow-Effekt Du möchtest sehen, was sich mit den neuen CSS3-Funktionen so alles anstellen lässt? Da CSS3 Transitions, Box- und Text Shadows, oder die praktischen RGBa-Farbwerte die Webdesign-Welt derzeit im Sturm erobern, wird es Zeit sich die neusten Trends einmal genauer anzuschauen. Hier eine kleine Zusammenstellung der schicksten CSS3-Effekte :-) ## 1. Animationen und Effekte mit CSS3-Transitions ### 1.1. Oliver Edwards ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-01.jpg) *Rotierende Logo-Animation mit Transition und Box-Shadow.* ### 1.2. [New Adventures in Webdesign Conference](https://newadventuresconf.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-02.jpg) *Eine wirklich beeindruckende, rotierende Header-Animation.* ### 1.3. [CSS3 Polaroids](https://media.24ways.org/2009/14/3/index.html) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-03.jpg) *Demonstration eines coolen, animierten Polaroid-Effekts bei [24ways](https://media.24ways.org/2009/14/3/index.html).* ### 1.4. Canny Bill ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-04.jpg) *Animierte Preiskarten mit Box-Shadow und abgerundeten Ecken.* ### 1.5. [Sliding Vinyl](https://www.zurb.com/playground/sliding-vinyl) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-05.jpg) *Genial animierte Plattencover-Demo von [Zurb](https://www.zurb.com/playground/sliding-vinyl).* ## 2. Beispiele für CSS3 Text-Shadows ### 2.1. [Fuel Brand Inc](https://fuelbrandinc.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-06.jpg) *Schicke Text-Shadows in der Navigation und im About-Text (mit Blur).* ### 2.2. [artebits](https://www.atebits.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-07.jpg) *Dunkle Text-Shadows bei heller Schriftfarbe.* ### 2.3. [Made by Tinder](http://madebytinder.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-08.jpg) *Hier ein gelungenes Beispiel für hellen Text-Shadow.* ### 2.4. [Mark Jardine](https://markjardine.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-09.jpg) *Text-Shadows funktioniert auch bei Fließtext auf dunklem Hintergrund.* ### 2.5. [tapmates](http://www.tapmates.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-10.jpg) *Bei [tapmates](http://www.tapmates.com/) gibt's gleich jede Menge Text-Shadows zu entdecken.* ## 3. Noch mehr Schatten mit CSS3 Box-Shadows ### 3.1. [Simon Collison](https://colly.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-11.jpg) *Die Hintergründe sind mit CSS3 Box-Shadows und Border-Radius ausgestattet.* ### 3.2. vtravelled Blog ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-12.jpg) *Schicke Box-Shadows für die Artikel-Vorschauen.* ### 3.3. [Paul Bennett](http://pmbennett.net/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-13.jpg) *Das Portfolio wird mit Box-Shadows und CSS-Transitions gepimpt.* ### 3.4. [Jeff Croft](http://jeffcroft.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-14.jpg) *Hier gibt's Box-Shadows, Text-Shadows und CSS Rounded Corners zu bestaunen.* ## 4. Schriften mit @font-face einbetten ### 4.1. Kenny Meyers ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-15.jpg) *Die Fonts Museo und Calgary sind mit @font-face eingebettet.* ### 4.2. [TheFella](https://thefella.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-16.jpg) *Jede Menge Spaß mit der Goudy Bookletter 1911.* ### 4.3. [The Many Faces Of](https://themanyfacesof.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-17.jpg) *Hier ist die ProcionoRegular ist mit @font-face eingebettet.* ## 5. Jede Menge CSS3 Button-Effekte ### 5.1. [tapbots](https://tapbots.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-18.jpg) *Die Buttons der Navigation sind mit CSS-Transitions gestylt.* ### 5.2. [Veerle's Blog](https://veerle.duoh.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-19.jpg) *Unter anderem hat Veerle die Comments-Buttons mit CSS3-Transitions aufgepeppt.* ### 5.3. [T3CH H3LP](http://t3chh3lp.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-20.jpg) *Hier gibt's gleich jede Menge Button-Animationen, z.B. beim Webseiten-Logo.* ### 5.4. Sam Brown ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-21.jpg) *Ein schöner Hover-Effekt bei den bunten Artikel-Buttons.* ### 5.5. [Thomas Bishop](http://iamthomasbishop.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-22.jpg) *Einen spannenden Rotations- und Farbeffekt gibt's bei den Social Media-Buttons zu bewundern.* ### 5.6. Brian Hoff ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-23.jpg) *Schöne, dezente Navi-Button Animationen.* ## 6. Abgerundete Ecken mit Border-Radius ### 6.1. [Nathan Borroer](http://nathanborror.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-24.jpg) *Hier werden die Buttons bei Rollover mit abgerundeten Ecken gestylt.* ### 6.2. [Startup Quote](https://startupquote.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-25.jpg) *Abgerundete Ecken gibt's hier bei den Bildhintergründen.* ### 6.3. [Simple Bits](https://simplebits.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-26.jpg) *Dezenter Boder-Radius auf den transparenten Textflächen.* ### 6.4. [BBQWar](https://bbqwar.com/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-27.jpg) *Hier pimpen Border-Radius und Text-Shadows das Webdesign.* ## 7. Transparenz leicht gemacht mit RGBa ### 7.1. Christoph Zillgens ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-28.jpg) *RGBa Alpha-Transparenz beim Hover-Effekt.* ### 7.2. Midtsommerjazz 2010 ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-29.jpg) *RGBa-Werte werden für die Hintergrundflächen verwendet.* ### 7.3. [24 ways](https://24ways.org/) ![CSS3 Webdesign Trends](https://elmastudio.de/wp-content/uploads/2010/08/webseiten-inspiration-ccs3-30.jpg) *RGBa Alpha-Transparenz gibt's hier z.B. bei den Navi-Buttons.* Ich hoffe dich hat dieser kleine Ausflug in die Möglichkeiten der CSS3-Funktionen inspiriert. Natürlich werden die neuen Eigenschaften derzeit noch nicht von allen Browsern unterstützt. Aber es lohnt sich auf alle Fälle sich mit den neuen Optionen vertraut zu machen und die Styles schon einzusetzen, wo es nicht unbedingt für das Design notwendig ist. Kennst du noch weitere Webseiten, auf denen coole CSS3-Effekte bereits zu bewundern sind? Über deine Tipps und dein Feedback freue ich mich sehr!