5 coole CSS3-Effekte, von denen Sie mehr sehen werden

Werbung

CSS3 (kombiniert mit der Leistung von HTML5) wird schnell von allen gängigen Browsern unterstützt (lesen - alles außer Internet Explorer), also ich Jetzt wäre ein guter Zeitpunkt, um einige der coolen CSS-Effekte zu sehen, die wir mit der Leistung Ihres Browsers und ein wenig CSS-Code erzielen können. Wenn Sie den neuesten Chrome-, Safari- oder Firefox-Browser verwenden, sollten Sie alle in diesem Artikel gezeigten Effekte sehen können.

Erstens - Was ist CSS?

Wenn Sie diesen Artikel lesen, weil Sie fasziniert sind, aber keine Ahnung haben, was CSS bedeutet, lassen Sie mich dies kurz erläutern. CSS ist die Codierungssprache zum Dekorieren von Webseiten. Es steht für C.aufsteigend S.Stil S.heet, und fügt einer Site im Grunde nur Stil und Flair hinzu. Websites sind sicherlich ohne ihr CSS lesbar, aber sie sind schrecklich, genau wie alle Websites im Jahr 1995. Während HTML-Dateien die Struktur und den Textinhalt einer Seite beschreiben, werden sie im CSS so angezeigt, wie es der Designer tut beabsichtigt, und bestimmen Sie alles von Seitenlayout, Textgröße und Farben, und jetzt eine Reihe von ausgefallenen Effekten mit der Einführung von CSS3.

In der Vergangenheit hätte das Erreichen der gleichen Effekte wie in diesem Artikel das Herunterladen von sperrigem CSS oder sogar größeren Grafiken bedeutet. Jetzt kann CSS Ihrem Browser nur beschreiben, wie die Seite aussehen soll, und der Browser übernimmt die Verarbeitung. Es ist so, als würde ich Ihnen die Pläne geben, Ihr eigenes Haus zu bauen, anstatt Ihnen das ganze Haus zu verkaufen - es ist bedeutend billiger!

Abgerundete Ecken

Der Code für abgerundete Ecken ist wirklich einfach:

.box_round {-moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / Randradius: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Textschatten

Hier ist der Code für einige Textschatten:

.box_textshadow {Textschatten: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }

Farbverläufe

Hier ist der Code für CSS-Verläufe:

.box_gradient {Hintergrundfarbe: # 3f9fe3; Hintergrundbild: -moz-linear-gradient (oben, # 3f9fe3, #white); / * FF3.6 * / Hintergrund: -moz-linear-gradient (oben, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * Firefox * / Hintergrundbild: -ms-linear-gradient (oben, # 3f9fe3, #white); / * IE10 * / Hintergrundbild: -o-linearer-Gradient (oben, # 3f9fe3, #weiß); / * Opera 11.10+ * / Hintergrundbild: -webkit-Farbverlauf (linear, links oben, links unten, von (# 3f9fe3) bis (#weiß)); / * Saf4 +, Chrome * / Hintergrundbild: -webkit-linear-gradient (oben, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / Hintergrundbild: linearer Farbverlauf (oben, # 3f9fe3, #weiß); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 - IE9 * / }

Drehung

Hier der Code, um etwas zu drehen:

.box_rotate {-moz-transform: drehen (7,5 Grad); / * FF3.5 + * / -o-Transformation: drehen (7,5 Grad); / * Opera 10.5 * / -webkit-transform: drehen (7,5 Grad); / * Saf3.1 +, Chrome * / -ms-Transformation: drehen (7,5 Grad); / * IE9 * / transform: drehen (7,5 Grad); filter: progid: DXImageTransform. Microsoft. Matrix (/ * IE6 - IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, sizingMethod = 'auto expand'); Zoom: 1; }

Animation

Sie benötigen den Übergangscode wie folgt für jedes Element, das Sie ändern möchten. Sie müssen auch einige Pseudo-CSS-Klassen verwenden (z. B.: Hover, um die zu animierenden Eigenschaften wie Farbe, Größe oder Drehung zu ändern).

.box_transition {-moz-Transition: alle 0,5s Easy-Out; / * FF4 + * / -o-Übergang: alle 0,5 Sekunden leicht; / * Opera 10.5+ * / -webkit-Übergang: alle 0,5s Easy-Out; / * Saf3.2 +, Chrome * / -ms-Übergang: alle 0,5 Sekunden einfach; / * IE10? * / Übergang: alle 0,5s Leichtigkeit; } 

Browserübergreifende Inkompatibilitäten

Obwohl die meisten modernen Browser CSS3 in gewisser Weise unterstützen, benötigen einige noch etwas anderen Code oder Hacks, damit es mit ihrer speziellen Implementierung des Standards funktioniert. Im obigen Code sehen Sie beispielsweise viele Instanzen von -moz- oder -webkit- vor einigen der CSS-Eigenschaften, die sich entweder auf Mozilla-basierte oder Webkit-basierte Browser beziehen. Das Schreiben dieser zusätzlichen Zeilen kann jedoch schmerzhaft sein CSS3-Generator um sie für dich zu schreiben.

Fazit

Das Web wird mit den neuen CSS3- und HTML5-Erweiterungen noch spannender. Zugegeben, wir werden einen weiteren Schub blinkenden Textes und ein hohes Verhältnis von Whiz-Bang zu echtem Inhalt sehen (genau wie damals animierte GIFs wurden zuerst „entdeckt“), aber auf lange Sicht werden wir lernen, wie man die Tools von CSS3 verwendet, um ein interessanteres Web zu erstellen Schnittstellen. Und hey, du kannst immer alles ausschalten!

Wenn Sie selbst Designer oder Webentwickler sind, denken Sie daran, dass CSS3 niemals die einzige Option sein sollte. Wenn Ihre Website ohne CSS3 nicht funktioniert, haben Sie sie nicht richtig verwendet. CSS sollte verwendet werden, um die Erfahrung zu verbessern, nicht die Programmfunktionalität.