Elmastudio

Contents

Jede Menge CSS3 Webdesign Trends mit Wow-Effekt

·
URL kopierenBeitrag als Markdown kopieren

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
Rotierende Logo-Animation mit Transition und Box-Shadow.

1.2. New Adventures in Webdesign Conference

CSS3 Webdesign Trends
Eine wirklich beeindruckende, rotierende Header-Animation.

1.3. CSS3 Polaroids

CSS3 Webdesign Trends
Demonstration eines coolen, animierten Polaroid-Effekts bei 24ways.

1.4. Canny Bill

CSS3 Webdesign Trends
Animierte Preiskarten mit Box-Shadow und abgerundeten Ecken.

1.5. Sliding Vinyl

CSS3 Webdesign Trends
Genial animierte Plattencover-Demo von Zurb.

2. Beispiele für CSS3 Text-Shadows

2.1. Fuel Brand Inc

CSS3 Webdesign Trends
Schicke Text-Shadows in der Navigation und im About-Text (mit Blur).

2.2. artebits

CSS3 Webdesign Trends
Dunkle Text-Shadows bei heller Schriftfarbe.

2.3. Made by Tinder

CSS3 Webdesign Trends
Hier ein gelungenes Beispiel für hellen Text-Shadow.

2.4. Mark Jardine

CSS3 Webdesign Trends
Text-Shadows funktioniert auch bei Fließtext auf dunklem Hintergrund.

2.5. tapmates

CSS3 Webdesign Trends
Bei tapmates gibt’s gleich jede Menge Text-Shadows zu entdecken.

3. Noch mehr Schatten mit CSS3 Box-Shadows

3.1. Simon Collison

CSS3 Webdesign Trends
Die Hintergründe sind mit CSS3 Box-Shadows und Border-Radius ausgestattet.

3.2. vtravelled Blog

CSS3 Webdesign Trends
Schicke Box-Shadows für die Artikel-Vorschauen.

3.3. Paul Bennett

CSS3 Webdesign Trends
Das Portfolio wird mit Box-Shadows und CSS-Transitions gepimpt.

3.4. Jeff Croft

CSS3 Webdesign Trends
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
Die Fonts Museo und Calgary sind mit @font-face eingebettet.

4.2. TheFella

CSS3 Webdesign Trends
Jede Menge Spaß mit der Goudy Bookletter 1911.

4.3. The Many Faces Of

CSS3 Webdesign Trends
Hier ist die ProcionoRegular ist mit @font-face eingebettet.

5. Jede Menge CSS3 Button-Effekte

5.1. tapbots

CSS3 Webdesign Trends
Die Buttons der Navigation sind mit CSS-Transitions gestylt.

5.2. Veerle’s Blog

CSS3 Webdesign Trends
Unter anderem hat Veerle die Comments-Buttons mit CSS3-Transitions aufgepeppt.

5.3. T3CH H3LP

CSS3 Webdesign Trends
Hier gibt’s gleich jede Menge Button-Animationen, z.B. beim Webseiten-Logo.

5.4. Sam Brown

CSS3 Webdesign Trends
Ein schöner Hover-Effekt bei den bunten Artikel-Buttons.

5.5. Thomas Bishop

CSS3 Webdesign Trends
Einen spannenden Rotations- und Farbeffekt gibt’s bei den Social Media-Buttons zu bewundern.

5.6. Brian Hoff

CSS3 Webdesign Trends
Schöne, dezente Navi-Button Animationen.

6. Abgerundete Ecken mit Border-Radius

6.1. Nathan Borroer

CSS3 Webdesign Trends
Hier werden die Buttons bei Rollover mit abgerundeten Ecken gestylt.

6.2. Startup Quote

CSS3 Webdesign Trends
Abgerundete Ecken gibt’s hier bei den Bildhintergründen.

6.3. Simple Bits

CSS3 Webdesign Trends
Dezenter Boder-Radius auf den transparenten Textflächen.

6.4. BBQWar

CSS3 Webdesign Trends
Hier pimpen Border-Radius und Text-Shadows das Webdesign.

7. Transparenz leicht gemacht mit RGBa

7.1. Christoph Zillgens

CSS3 Webdesign Trends
RGBa Alpha-Transparenz beim Hover-Effekt.

7.2. Midtsommerjazz 2010

CSS3 Webdesign Trends
RGBa-Werte werden für die Hintergrundflächen verwendet.

7.3. 24 ways

CSS3 Webdesign Trends
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!

Ellen Bauer

Ellen is the co-founder of Elmastudio and a Product Manager at Automattic. She speaks regularly at WordCamps about block themes, WooCommerce and building websites with AI. As a content creator she writes and talks about WordPress, open source, AI and personal development, sharing her own experiences and opinions along the way. Originally from Germany, she now lives in New Zealand.

Wenn du unsere Arbeit unterstützen möchtest, lad uns doch auf einen Kaffee ein. So bleibt hier alles in Schuss und es geht weiter voran. Danke!

15 Kommentare

  1. Wolfgang Wagner

    Hi,

    wieder mal ein sehr schöner Artikel.
    Ich selber habe bei aktuellen Projekten auch schon immer wieder ein paar CSS3-Sachen verwendet, hauptsächlich Schatten und Transparenz. Leider muss man für den IE ja immer noch Alternativen anbieten.

    Aber da freue mich schon auf den IE9, und hoffe, dass der sich schnell verbreitet, damit wir dann hoffentlich endlich CSS3 richtig nutzen können.

    Grüße vom Bodensee
    Wolfgang Wagner

    Antworten
    1. Ellen
      Author

      Antwort an Wolfgang Wagner

      Hallo Wolfgang,

      vielen herzlichen Dank für dein Feedback :-)

      Ja, immer wieder dieser Internet Explorer… :-( Ich hoffe auch sehr, dass sich bzgl. der Browser-Unterstützung in der Zukunft möglichst schnell etwas ändern wird.

      Bei nicht unbedingt notwendigen Design-Effekten (z.B. abgerundeten Ecken) verzichten wir inzwischen oft auf eine IE-Alternative. Dabei kommt es aber auch stark auf die Zielgruppe der Webseite an, denke ich.

      Ich hoffe auf alle Fälle, das die alten Browser möglichst bald verschwinden, und man CSS3 uneingeschränkt einsetzen kann :-)

      Viele Grüße und einen schönen Abend an den Bodensee,
      Ellen

      Antworten
      1. Wolfgang Wagner

        Antwort an Ellen

        So mache ich das eigentlich auch. Ich habe nur einmal bei einem Projekt mit Hilfe der proprietären IE-Filter die CSS3-Effekte nachgebaut. Das funktioniert aber mehr schlecht als recht. Seitdem bekommen die IEs auch eine abgespeckte Version präsentiert.

        Gruß
        Wolfgang

        Antworten
  2. Dennis

    Hey,

    schöne Inspirationshilfen für zukünftige Projekte dabei gewesen.

    Vielen Dank fürs Teilen!!!

    Antworten
    1. Ellen
      Author

      Antwort an Dennis

      Hallo Dennis,

      vielen Dank für dein nettes Feedback. Es freut mich, dass du die CSS3-Inspirationen hilfreich findest :-)

      Viele Grüße und dir ebenfalls einen schönen Abend :-)
      Ellen

      Antworten
  3. Marc

    Wirklich sehr schöne Beispiele.

    Bei CSS3 und html5 habe ich das Gefühl, dass die damit möglichen Effekte endlich mal die nötige Dynamik haben, um Browserhersteller verstärkt dazu zu bringen Ihre Produkte auf den aktuellen Stand zu bringen.

    Ich verstehe auch nicht, warum der allseits unbeliebte IE nicht so vertrieben wird wie andere Browser auch – mit automatischer Updatefunktion, sodass die User nicht unnötig lange (10 Jahre – Hallo?!) mit alten Versionen durch die Gegen zuckeln müssen. Liegt wahrscheinlich an der übertrieben tiefen Verwurzelung ins System…

    Na ja, die Hoffnung stirbt zuletzt… :-)

    Antworten
    1. Ellen
      Author

      Antwort an Marc

      Hallo Marc,

      vielen herzlichen Dank für dein Feedback :-) Ich bin auch super gespannt, wie lange es dauern wird bis die tollen Möglichkeiten von HTML5 und CSS3 sich in allen Browsern durchsetzen bzw. wann endlich alle User endlich ihre alten Browser updaten.

      Für WordPress gibt es ja die Möglichkeit mit Plugins wie „Shockingly Big IE6 Warning“ die Nutzer darauf hinzuweisen, ihren Browser upzudaten. Für Webseiten mit relativ vielen IE Nutzern echt eine Überlegung wert ;-)

      Viele Grüße
      Ellen

      Antworten
  4. m.o.m.

    Tolle Auflistung. Da bekommt man gleich lust sein Blog nochmal aufzupimpen.

    Antworten
    1. Ellen
      Author

      Antwort an m.o.m.

      @m.o.m.: Vielen herzlichen Dank für dein Feedback :-) Ja, die CSS3-Funktionen sind wirklich klasse und bieten etliche praktische Möglichkeiten. Ich hätte ja super gerne so ein CSS3 Polaroid-Fotoabum :-)

      Viele Grüße
      Ellen

      Antworten
  5. Webstandard-Blog

    Schöne Zusammenstellung Ellen, wenn du noch ein paar Anwendungsbeispiele für sehenswerte CSS3 Arbeiten benötigst dann schau mal hier:
    CSS3 Animation – The new Flash? oder Transition und Transform bringen Bewegung ins Spiel. Sicherlich kann man nicht alles vorbehaltlos in jedem Projekt einsetzen, aber dass ein oder andere kann man auch mit (funktionstüchtigen!) Fallback-Lösungen, für die Browser die diese Eigenschaft(en) noch nicht unterstützen, den Usern anbieten.

    Antworten
    1. Ellen
      Author

      Antwort an Webstandard-Blog

      @Webstandard-Blog: Vielen herzlichen Dank für dein Feedback und die Tipps zu den weiteren CSS3-Artikeln :-)

      Ja, ich habe auch Spaß daran, die neuen Möglichkeiten mit CSS3 zu nutzen. Und wie du und Wolfgang ja auch schon gesagt haben, mit Fallback-Lösungen oder einer abgespeckten Version für ältere Browser kommt man ja schon recht weit :-)

      Viele Grüße
      Ellen

      Antworten
  6. Daniela Wöhlert

    Hi!
    Eigentlich wollte ich nur sagen, wie toll ich euer Blog finde…
    Ich kannte es noch gar nicht und habe es vor ein paar Tagen erst entdeckt. Zum Glück! Ich habe schon viele tolle Inspirationen und WordPress-Tricks für meine Arbeit herausgezogen!!!
    DANKE! Für die Mühe und die schönen Anleitungen.

    Viele Grüße aus dem Norden, Daniela

    Antworten
    1. Ellen
      Author

      Antwort an Daniela Wöhlert

      Hallo Daniela,

      vielen herzlichen Dank für dein tolles Feedback :-) Das freut uns riesig, dass dir unser Blog und die Artikel so gut gefallen und die Tipps dir bei deiner Arbeit helfen.

      So etwas schönes zu hören, ist eine ganz tolle Motivation für uns :-)

      Vielen Dank und viele Grüße,
      Ellen & Manuel

      Antworten
  7. Viktor

    CSS3 ist ja schön und gut — gestern war flash, heute html5 und css3, aber egal. Die Seiten sollten aber so gebaut sein, dass auch die IE6 und IE7 zumindest die Information korrekt darstellen können! Die meisten dier hier gelisteten Seiten sehen darin total kaputt aus!

    Antworten
  8. Michel

    Tolle Sammlung mit Qualität…
    Elmastudio ist cool… weiter so!
    http://html5snippets.com/
    möchte ich auch ans Herz legen… da sind auch nette Sammlungen.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Ähnliche Beiträge

Nori WordPress Theme for Blogs22. Dezember 2011Seth Godin: Tanz am Rand des Fertigen28. Mai 2012Yoko WordPress Theme for Blogs26. April 2011
Expand sidebar⌘B
DEEN