CSS3-Kochbuch 7 Super einfache CSS-Rezepte zum Kopieren und Einfügen

Inzwischen haben Sie wahrscheinlich ausreichend lange CSS3-Tutorials gesehen, um ein Leben lang zu bestehen. Sie werden sich wahrscheinlich mit dem, was CSS3 zu bieten hat, vertraut machen, und sind bereit, an der grundlegenden Theorie vorbeizukommen und einige praktische Designbeispiele zu sehen, die Sie direkt in Ihren Code kopieren und einfügen können, ohne dass Sie dabei jede Menge Kommentare benötigen.

Nun, Sie haben Glück, denn genau das haben wir heute für Sie! Im Folgenden finden Sie sieben interessante und attraktive CSS-Tricks, die Sie direkt in Ihre eigenen Projekte einfügen und nach Belieben anpassen können. Beachten Sie, dass ältere Browser das meiste davon nicht unterstützen, da dieses Material immer noch auf dem neuesten Stand ist. Ich habe versucht, wo immer möglich eine gleichmäßige Verschlechterung sicherzustellen, damit Sie allen Benutzern eine Arbeitserfahrung und mit Webkit eine bessere Benutzererfahrung bieten können.

Buchdruck

Das Einfügen von Text ist in CSS relativ einfach. Dazu benötigen Sie drei Farben: eine Hintergrundfarbe, eine hellere Schattierung der Hintergrundfarbe und eine dunklere Schattierung der Hintergrundfarbe.

Füllen Sie Ihren Text zunächst mit der dunkleren Schattierung Ihrer Hintergrundfarbe. Wenden Sie einfach einen CSS3-Textschatten an, der eine hellere Nuance ist und einen geprägten Look erzeugt.

Das HTML

<p>gedrückt</p>

Das CSS

Körper {Hintergrund: # 222222; Farbe: # 131313; Schriftgröße: 200px; } #container p {text-align: center; Text-Transformation: Großbuchstaben; Text-Schatten: # 2c2c2c 3px 3px 5px; }

Small Caps

Der Small-Cap-Effekt ist, wenn alle Buchstaben in einer Überschrift groß geschrieben sind, die Anfangsbuchstaben in jedem Wort jedoch größer als der Rest sind. Es ist ein schöner und einfacher Effekt, den Sie im Web nicht oft sehen (nicht wirklich CSS3, aber trotzdem cool!).

Ein einfacher Weg, dies zu tun, ist einfach einzufügen.klein? Tags in Ihren HTML-Code ein und formatieren Sie diese Tags mit einer etwas kleineren Schriftgröße als der Rest der Überschrift. Einige Kommentatoren informierten mich, dass es tatsächlich einen einfacheren Weg gibt, dies zu erreichen! Verwenden Sie einfach die "font-variant": Small Caps; und du bist gut zu gehen!

Ich habe auch die? Großbuchstaben? Textform für Spaß. Dadurch wird automatisch jeder Text in Kleinbuchstaben übernommen und umgewandelt, sodass der HTML-Code leicht geändert werden kann, ohne dass dabei die Groß- und Kleinschreibung berücksichtigt wird.

Das HTML

<p>Small Caps</p>

Das CSS

body {background: # 2c2b2b; Farbe: # 131313; Schriftgröße: 200px; } #container p {text-align: center; Text-Transformation: Großbuchstaben; Text-Schatten: # 363535 3px 3px 5px; Schriftvariante: Small Caps; }

CSS Coupon

Dies ist hilfreich für Online-Händler, die Werbeaktionen, Verkäufe, Online-Gutscheine usw. anbieten möchten. Die typische Grenzbehandlung, die Sie auf den meisten Websites sehen, ist nur eine durchgezogene Linie, Sie können aber auch gestrichelte oder gepunktete Linien an einer Grenze darstellen.

Kombinieren Sie dies mit ein paar abgerundeten CSS3-Ecken und einem Box-Schatten, und Sie haben eine schöne kleine CSS-Gutschein-Grafik!

Das HTML

<h2>$ 10 aus</h2>

Das CSS

Körper {Hintergrund: # 21303b; Farbe: # 000; } h2 {font-size: 80px; Zeilenhöhe: 70px; Schriftfamilie: Helvetica, serifenlos; Schriftdicke: fett; Text ausrichten: Mitte; Text-Transformation: Großbuchstaben; } #container {Hintergrundfarbe: weiß; Höhe: 200px; Breite: 400px; Marge: 100px auto; Rahmen: 3px gestrichelt # 21303b; / * shadow * / -webkit-box-shadow: 10px 10px 10px # 000; -moz-box-shadow: 10px 10px 10px # 000; Box-Schatten: 10px 10px 10px # 000; / * abgerundete Ecken * / -webkit-border-radius: 20px; -moz-border-radius: 20px; Grenzradius: 20px; }

Genäht

Während wir uns mit dem Thema der gestrichelten Grenzbehandlungen befassen, können Sie hier einen alternativen Trick verwenden, um einer Box eine subtile Illusion zu verleihen.

Diesmal verwenden wir anstelle eines Rahmens eine Gliederung. Eine Kontur kann leicht mit einem negativen Wert im Konturversatz eingefügt werden.

Das HTML

<h2>Genäht</h2>

Das CSS

Körper {Hintergrund: # 21303b; Farbe: #fff; } h2 {font-size: 70px; Zeilenhöhe: 190px; Schriftfamilie: Helvetica, serifenlos; Schriftdicke: fett; Text ausrichten: Mitte; } #container {/ * stitching * / outline: 1px gestrichelt # 98abb9; Konturversatz: -5px; Hintergrundfarbe: # 556068; Höhe: 200px; Breite: 400px; Marge: 100px auto; / * shadow * / -webkit-box-shadow: 2px 2px 2px # 000; -moz-box-shadow: 2px 2px 2px # 000; Box-Schatten: 2px 2px 2px # 000; }

Glanz

Dieser beliebte und möglicherweise überlastete Web 2.0-Effekt erforderte, dass mindestens ein Bild zum Abzug verwendet werden musste. Mit CSS3 und einem kleinen Hintergrundverlauf wissen Sie nun, wie Sie diesen Glanz nur mit Code wiederherstellen können.

Komplexe CSS-Verläufe können schwer zu erstellen sein, daher empfehle ich die Verwendung des Ultimate CSS-Gradienten-Generators oder ähnliches, um den Prozess zu automatisieren.

Das HTML

<h2>Glanz</h2>

Das CSS

Körper {Hintergrund: # 21303b; Farbe: #fff; } h2 {font-size: 120px; Zeilenhöhe: 190px; Schriftfamilie: Helvetica, serifenlos; Schriftdicke: fett; Text ausrichten: Mitte; Text-Schatten: rgba (0, 0, 0, .3) 5px 5px 5px; } #container {/ * gradient * / background: # 666666; / * alte Browser * / Hintergrund: -moz-linearer Gradient (oben, # 666666 4%, # 545454 50%, # 3A3A3A 51%, # 131313 100%); / * firefox * / background: -webkit-gradient (linear, links oben, links unten, color-stop (4%, # 666666), color-stop (50%, # 545454), color-stop (51%, # 3A3A3A), Farbstopp (100%, # 131313)); / * webkit * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 666666", endColorstr = "# 131313", GradientType = 0); / * dh * / / * Boxstile * / height: 200px; Breite: 400px; Marge: 100px auto; / * shadow * / -webkit-box-shadow: 5px 5px 5px rgba (0, 0, 0, .3); -moz-box-shadow: 5px 5px 5px rgba (0, 0, 0, .3); Box-Schatten: 5px 5px 5px rgba (0, 0, 0, .3); / * Ecken * / -webkit-border-radius: 50px; -moz-border-radius: 50px; Grenzradius: 50px; }

Stroked Text & @ font-face

In diesem Beispiel erhalten Sie zwei Tricks in einem! Sie sehen die Syntax für das Hinzufügen von Textstrichen in Webkit und die für das Hinzufügen von benutzerdefinierten Schriftarten in allen modernen Browsern mit @ font-face.

Die im folgenden Beispiel verwendete Schriftart heißt Jungle Fever und kann von Font Squirrel als @ font-face-Kit heruntergeladen werden.

Das HTML

<h2>Jurassic</h2>

Das CSS

/ * Fonts * / @ font-face {font-family: 'JungleFeverRegular'; src: url ('JungleFever-webfont.eot'); src: local ('?'), URL ('JungleFever-webfont.woff') Format ('woff'), URL ('JungleFever-webfont.ttf') Format ('truetype'), URL ('JungleFever-webfont.) svg # webfontBlD2f3Gz ') format (' svg '); Schriftgewicht: normal; font-style: normal; } body {background: # 222; Farbe: # 111; } h2 {font-size: 150px; Zeilenhöhe: 200px; Schriftfamilie: 'JungleFeverRegular', Helvetica, serifenlos; Schriftdicke: fett; Text ausrichten: Mitte; Text-Schatten: rgba (0, 0, 0, .2) 3px 3px 3px; / * Textstrich * / -webkit-Textstrich: 2px # fff473; }

Double Stroked Text

Ich habe diesen Tipp völlig zufällig entdeckt, als ich für das vorherige Beispiel einen Strichtext erstellt hatte. Es stellt sich heraus, wenn Sie RGBa für Strichtext verwenden und die Deckkraft etwas reduzieren, können Sie einen beeindruckenden Doppelschlag erzielen! Ich bin nicht ganz sicher, warum es funktioniert (etwas mit dem Bluten des Schlaganfalls zu tun?), Aber es tut es!

Das HTML

<h2>Hummer</h2>

Das CSS

/ * Fonts * / @ font-face {font-family: 'Lobster13Regular'; src: url ('Lobster_1.3-webfont.eot'); src: local ('?'), url ('Lobster_1.3-webfont.woff') format ('woff'), url ('Lobster_1.3-webfont.ttf') format ('truetype'), url (' Lobster_1.3-webfont.svg # webfontcOtP3oQb ') format (' svg '); Schriftgewicht: normal; font-style: normal; } body {background: # 731e1e; Farbe: #fff; } h2 {font-size: 220px; Zeilenhöhe: 220px; Schriftfamilie: 'Lobster13Regular', Helvetica, serifenlos; Schriftdicke: fett; Text ausrichten: Mitte; Text-Schatten: rgba (0, 0, 0, .2) 3px 3px 3px; / * Textstrich * / -webkit-Textstrich: 4px rgba (0, 0, 0, .6); }

Fazit

Wie bereits in den Eröffnungsstatements erwähnt, können Sie die obigen Beispiele nach Belieben kopieren und verwenden. Hinterlassen Sie einen Kommentar, wenn Sie Ideen zur Verbesserung dieser Tricks haben, egal, ob sie cooler aussehen oder Cross-Browser-freundlicher aussehen. Sie sind alles andere als perfekt und ich möchte, dass Sie sie besser machen!