28 moderne CSS3-Effekte für zeitgemäßes Webdesign

Mit CSS lassen sich hübsche Effekte, Modelle, Formen u. v. m. erstellen. Perfektes CSS in die Anwendung einzubauen ist heute einfach – tausende kostenlose Effekte und Tutorials im Netz. Die richtige Kombination moderner Effekte zu finden, ist allerdings knifflig; viele wirken veraltet. Wir haben großartige CSS3-Effekte gesammelt, die eurer Website einen modernen Look und großartige UX verleihen. Code frei anpassbar für eigene Ergebnisse.

28. 3D-Text

Überschriften mit 3D-Look, coolen Fonts, beeindruckenden Schatteneffekten.

27. Flat Icons

Reines CSS Iconex Flat Icon Set (4 Icons), designed by Alireza Attari.

26. Farbspektrum

Farbmischung mit box-shadow – Progression über 3 Farben.

25. Metro UI

Windows-8-inspiriertes Metro UI, komplett in CSS3. Icons von FontAwesome.

24. Elastischer Strich

Elastischer Textstrich mit schönem Farbschema, Effekte via CSS und SVG.

23. Geschichtete Formen

Schöne, farbige, geschichtete Formen (reines CSS), designed by Snhasani.

22. Spiral CSS

Wolkenartige Spiral-CSS-Animation, nutzbar als Lade-Icon.

21. Text-Animation

Yoann's toller Ticker-Effekt mit Text-Animation. Toggle-Effekt des zweiten Worts sieht cool aus.

20. Flacher langer Schatten

Ultimativer Shadow-Mixin mit Fade-Variablen, langen Schatten, Winkel-Variable.

19. CSS Creatures

Schöne interaktive Icons, komplett aus HTML und CSS.

18. 3D Flip Button

Einfacher CSS3 3D-Flip-Button – ohne JavaScript, ohne Bilder.

17. Text mit Schatten transformieren

CSS Text-Shadow mit fortgeschrittenen Typografie-Techniken via lettering.js.

16. CSS Rainbow

Vollkreis-Regenbogen mit einfachem Hover-Effekt.

15. Colorful Glitchy 404

Toller Glitch- (+ Vibrations-) Effekt mit CSS und etwas JavaScript.

14. UI Feedback

Ideen-Sammlung für Button-Feedback – Inspiration für mehr Dynamik im Frontend.

13. Horizontal Accordion

Horizontaler Accordion in reinem CSS. Elemente statt Bilder, Genericons Font für Social Icons.

12. Kreis-Illusion

Kreis-Illusion mit Tusi-Bewegung, designed by Jaime Caballero. Als Ladebalken/Icon nutzbar.

11. Sekunden-Zähler

Eleganter Counter, perfekt für „Coming Soon“-Templates.

10. CSS Text-FX

Gedimmtes Licht auf Text → patchy Flashes.

9. CSS Menü

Modernes Mobile-Menü mit CSS3 Animationen und Transitions.

8. Budget Slider

Einfacher CSS + jQuery Slider im 3D-Design, inspiriert von Erik Deiner.

7. Animierter Text-Schatten

Animiertes text-shadow-Pattern nutzt -webkit-background-clip: text und linear-gradient für gestreiften Textschatten.

6. CSS 3D Captioned Domino Image

Responsiver 3D-Hover-Effekt mit besserer Semantik, weniger Pseudo-Elementen, weniger CSS.

5. Radio Click Through

Einfacher Bild-Slider mit Radio-Buttons, komplett in CSS.

4. Gradient Ghost Buttons

Gradient Ghost Buttons und Text via border-image und box-shadows.

3. Squishy Toggle Buttons

Simulierte gummiartige Buttons, designed by Justin Windle.

2. Einfache Stack-Effekte

Toggle-Effekte-Set zeigt, wie man einfache Stack-Effekte mit Perspective und 3D-Transform erstellt.

1. SpinKit

SpinKit (Ladeindikator-Sammlung) nutzt CSS-Animationen für flüssige, anpassbare Animationen.

Weiterlesen: 26 moderne jQuery-Plugins für bessere Websites