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

CSS3 (kombiniert mit der Leistungsfähigkeit von HTML5) wird schnell von allen großen Browsern unterstützt (read - alles außer Internet Explorer). Daher dachte ich mir, dass jetzt ein guter Zeitpunkt wäre, um einige der coolen CSS-Effekte zu sehen, die wir mit der Leistung erzielen können von Ihrem Browser und ein wenig CSS-Code. Wenn Sie den neuesten Chrome-, Safari- oder Firefox-Browser verwenden, sollten Sie alle in diesem Artikel beschriebenen Effekte sehen können.

Was ist CSS??

Wenn Sie diesen Artikel lesen, weil Sie fasziniert sind, aber keine Ahnung haben, was CSS bedeutet, lassen Sie mich das schnell erklären. CSS ist die Kodiersprache, die zum Dekorieren von Webseiten verwendet wird. Es steht für Caufsteigend Style Sheet und fügt einer Site im Wesentlichen nur Stil und Flair hinzu. Webseiten sind ohne CSS zwar lesbar, aber sie sind abscheulich wie alle anderen Websites im Jahr 1995. Während HTML-Dateien die Struktur und den Textinhalt einer Seite beschreiben, werden sie vom CSS so dargestellt, wie es der Designer beabsichtigt, und bestimmen alles Seitenlayout, Textgröße und -farben und jetzt eine Reihe von ausgefallenen Effekten mit der Einführung von CSS3.

In der Vergangenheit hätten dieselben Effekte wie die in diesem Artikel beschriebenen erreicht, wenn Sie sperriges CSS oder sogar größere Grafiken herunterladen müssten. Jetzt kann CSS Ihrem Browser nur beschreiben, wie die Seite aussehen soll, und der Browser übernimmt die Verarbeitung. Es ist, als würde ich Ihnen die Pläne geben, Ihr eigenes Haus zu bauen, anstatt Ihnen das ganze Haus zu verkaufen - es ist erheblich billiger!

Abgerundete Ecken

Das Internet wurde allmählich "runder", aber jetzt ist dies in CSS3 gefestigt. Schauen Sie sich das Kästchen um diesen Absatz an. Es ist kein Bild - versuchen Sie es mit der rechten Maustaste. Reines CSS!

Der Code für abgerundete Ecken ist sehr einfach:

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

Textschatten

Text kann manchmal hart aussehen, aber ein einfacher kleiner Schatten hilft wirklich. Schauen Sie sich den Schatten an, den ich auf diesen Absatz angewendet habe.

Hier ist der Code für einige Textschatten:

.box_textshadow text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /

Farbverläufe

Keine flachen Farben oder Hintergrundverlaufsbilder mehr, jetzt können Sie einen coolen Verlauf nur mit CSS erstellen. Leider benötigen Sie aufgrund von Inkompatibilitätsproblemen zwischen Browsern einige Zeilen. Sie können jedoch das später beschriebene Tool verwenden, um diese automatisch zu generieren.

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

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

Drehung

Es ist schwer, sich eine Verwendung für den Text vorzustellen, aber er kann einige schöne Designelemente hinzufügen, wenn Sie beispielsweise Bilder verwenden. Beachten Sie wieder, dass Sie diesen Absatz auch drehen können, Sie können ihn dennoch auswählen und damit interagieren, da er normaler Text ist.

Hier der Code um etwas zu drehen:

 .box_rotate -moz-transform: drehen (7.5deg); / * FF3.5 + * / -o-transform: drehen (7,5 Grad); / * Opera 10.5 * / -webkit-transform: drehen (7,5 Grad); / * Saf3.1 +, Chrome * / -ms-transform: 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,9914448613738450). Zoom: 1;  

Animation

Oh ja, ich habe das Beste bis zum Schluss gerettet. CSS3 führt verschiedene Animationsformen für eine beliebige Anzahl der beschriebenen coolen CSS-Effekte ein. In diesem Abschnitt habe ich die Übergangseigenschaft wie unten aufgeführt definiert sowie eine einfache Hintergrundfarbe und eine Drehung, wenn Sie mit der Maus darüber fahren. Wenn Sie dies nicht bereits tun, bewegen Sie den Mauszeiger jetzt über diesen Absatz, um den Effekt in Aktion zu sehen. Sie können so ziemlich alles animieren!

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 Eigenschaften zu ändern, die Sie animieren möchten, z. B. Farbe, Größe oder Drehung).

 .box_transition -moz-Übergang: alle 0.5s-Lockerung; / * FF4 + * / -o-Übergang: alle 0,5s-Lockerung; / * Opera 10.5+ * / -webkit-Übergang: alle 0.5s-Locker-Out; / * Saf3.2 +, Chrome * / -ms-Übergang: alle 0.5s-Comfort-Out; / * IE10? * / Uebergang: alle 0.5s Auslauf;  

Browserübergreifende Inkompatibilitäten

Obwohl die meisten modernen Browser CSS3 in gewisser Weise unterstützen, benötigen einige noch etwas Code oder Hacks, damit sie mit der jeweiligen Implementierung des Standards funktionieren. Im obigen Code werden beispielsweise viele Instanzen von -moz- oder -webkit- vor einigen der CSS-Eigenschaften angezeigt, die sich entweder auf Mozilla- oder Webkit-basierte Browser beziehen. Das Schreiben dieser zusätzlichen Zeilen kann jedoch sehr schwierig sein. Überprüfen Sie also den css3-Generator, um sie für Sie zu schreiben.

Fazit

Das Web wird mit den neuen CSS3- und HTML5-Erweiterungen noch viel spannender. Zugegeben, wir werden einen weiteren Anflug von blinkendem Text und ein hohes Verhältnis von Whizz-Bang zu echten Inhalten sehen (genau wie wir es damals getan haben, als animierte GIFs zuerst waren “entdeckt”) Aber auf lange Sicht werden wir lernen, wie man mit den Tools von CSS3 interessantere Web-Interfaces erstellt. Und hey, du kannst immer alles abschalten!

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

Erfahren Sie mehr über: HTML, HTML5, Programmierung, Webentwicklung.