CSS3 ist die neueste Version der Stylesheet-Sprache CSS (Cascading Style Sheets) und bietet eine Reihe von neuen Funktionen und Verbesserungen. Hier sind einige der wichtigsten Neuerungen von CSS3:
- Flexbox-Layout: CSS3 bietet ein neues Layout-Modell namens Flexbox, mit dem komplexe Layouts auf einfache Weise umgesetzt werden können, indem Container und Elemente flexibel ausgerichtet werden.
- Animations- und Übergangseffekte: CSS3 erlaubt die Erstellung von Animationen und Übergangseffekten, die ohne JavaScript realisiert werden können. Dadurch können Webseiten interaktiver und ansprechender gestaltet werden.
- Farbverläufe: CSS3 unterstützt Farbverläufe, die sanfte Farbübergänge in Hintergründen, Texten und anderen Elementen ermöglichen.
- Schatten und abgerundete Ecken: CSS3 bietet die Möglichkeit, Schatten und abgerundete Ecken auf verschiedene Elemente anzuwenden, um sie visuell ansprechender zu machen.
- Mehrspaltige Layouts: CSS3 ermöglicht die Erstellung von mehrspaltigen Layouts auf einer Webseite, ohne dass Tabellen oder andere komplexe Strukturen erforderlich sind.
- Schriftarten und Texteffekte: CSS3 bietet erweiterte Möglichkeiten zur Anpassung von Schriftarten und Texteffekten, einschließlich der Option, benutzerdefinierte Schriftarten zu importieren und zu verwenden.
Insgesamt bietet CSS3 eine Vielzahl von neuen Funktionen und Verbesserungen, um Webseiten mit ansprechendem Design und komplexem Layout ohne zusätzliche Tools oder Skripte zu gestalten.
Hier ein Beispiel für eine CSS Animation:
Der CSS Code:
div {
width: 50px;
height: 50px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-delay: 2s;
animation: example 5s infinitive;
}
@keyframes example {
0% {background-color:red; left:2%; top:2%;}
25% {background-color:yellow; left:80%; top:2%;}
50% {background-color:blue; left:80%; top:80%;}
75% {background-color:green; left:2%; top:80%;}
100% {background-color:red; left:2%; top:2%;}
}Nach einem Bespiel von w3schools.com
Es ist auch möglich, mit reinem CSS Muster zu gestalten:
Beispiel von CSS3 Patterns Gallery
