Share
Haben Sie sich jemals gefragt, wie ein bestimmter Effekt in einem Webdesign erzielt wurde, und nachdem Sie einige Klicks gezoomt hatten, stellten Sie fest, dass der Autor einige subtile Schatten, Ränder, Farbverläufe usw. hinzugefügt hat? In der Vergangenheit wurde dies einfach dadurch erreicht, dass ein Bild ausgeschnitten und als Hintergrund für ein Element gesetzt wurde. Glücklicherweise können wir uns mit CSS3 viel mehr Flexibilität bieten. Der Code für einen so einfachen Effekt ist zwar ein bisschen langweilig, aber es lohnt sich, und das werden wir im heutigen schriftlichen Kurz- und Video-Tipp lesen!
Schauen Sie sich diesen Screencast lieber auf Screenr.com an?
Es ist erstaunlich, dass etwas so einfaches Code so viel Code erfordert, aber es ist nicht zu grob und kann leicht zu einem Snippet für die zukünftige Verwendung abstrahiert werden.
Um unser Projekt so einfach wie möglich zu gestalten, arbeiten wir nur mit einem leeren Div. Erstellen Sie eine neue index.html-Datei und fügen Sie Folgendes ein:
Als Nächstes werden wir ein grundlegendes Styling für das body-Element hinzufügen. Dies ist nur für die Präsentation und kann leicht entfernt werden. Fügen Sie innerhalb der Style-Tags in Ihrer Kopfzeile Folgendes hinzu:
/ * Nichts Besonderes hier. Nur die Leinwand. * / Körper Breite: 500px; Marge: 60px auto 0; Hintergrund: # 666;
Jetzt erstellen wir unsere Box mit Breite und Höhe.
#box / * Nur eine Box * / width: 500px; Höhe: 500px;
Wir sollten jetzt alle etwas über CSS-Ecken wissen. Lasst uns weitergehen und das umsetzen.
/ * Abgerundete Ecken * / -moz-border-radius: 3px; -webkit-border-radius: 3px; Grenzradius: 3px;
Beachten Sie, dass wir zusätzlich zu den Versionen von Mozilla und Webkit auch die endgültige Spezifikation "Randradius" bereitstellen.
Mozilla bietet eine praktische Eigenschaft namens "-moz-border - * - colors". Dies ermöglicht uns, eine unbegrenzte Anzahl von Farben für einen Rand festzulegen. Um einen subtilen "Doppelrand" -Effekt zu erzielen, lassen Sie uns diese Eigenschaft implementieren.
/ * Setze einen Basisrand und eine Farbe * / border: 2px durchgehend weiß; / * Mehrere Rahmenfarben in Gecko * / -moz-Rahmenfarben: # 292929 weiß; -moz-border-right-colors: # 292929 weiß; -moz-border-bottom-colors: # 292929 weiß; -moz-border-left-colors: # 292929 weiß;
Beachten Sie, dass die Anzahl der von uns gelieferten Farben der Rahmenbreite entspricht, die wir am Anfang festgelegt haben (2 Pixel). Setzen Sie keine Kommas nach jedem Hex-Wert. Ich habe diesen Fehler zuerst gemacht!
Meines Wissens unterstützt das Webkit derzeit keine Rahmenfarben, obwohl ich möglicherweise falsch liege. Wenn ja, bitte hinterlasse einen Kommentar und lass es mich wissen! Um diesen Effekt so gut wie möglich in Safari und Chrome nachzuahmen, verwenden wir Box-Shadow.
/ * Webkit kompensieren. Nicht so schön, aber funktioniert. * / -webkit-box-shadow: 0 -1px 2px # 292929;
Beachten Sie, dass sich die angegebenen Werte auf X-Versatz, Y-Versatz, Unschärfe und Schattenfarbe beziehen. Durch Übergeben von -1px als Y-Versatz können wir den Schatten nach oben drücken.
Der letzte Schritt ist die Bereitstellung eines subtilen Hintergrundverlaufs für unsere Box. Es muss jedoch sichergestellt werden, dass für Browser, die keine CSS-Farbverläufe unterstützen, ein Fallback-Solid Color bereitgestellt wird.
/ * Hintergrund subtiler Farbverlauf mit Fallback auf Volltonfarbe * / background: # e3e3e3; Hintergrund: -moz-linearer Gradient (oben, # a4a4a4, # e3e3e3); Hintergrund: -webkit-gradient (linear, links oben, links unten, von (# a4a4a4) bis (# e3e3e3));
Leider stimmen Mozilla und Webkit in der Syntax für Farbverläufe nicht ganz überein, was den Prozess zusätzlich irritiert. Wenn dies zu verwirrend ist, können Sie einen neuen Dienst namens CSS3 verwenden, um die Syntax der einzelnen Browser automatisch zu generieren. es ist sehr cool!
Es ist wunderbar; Wenn wir unser endgültiges Bild betrachten, ist es schwer zu sagen, was wir tatsächlich gemacht haben! Aber das ist eine gute Sache. Subtilität ist der Schlüssel für alle Aspekte des Designs. Danke fürs Lesen / Ansehen!
/ * Nichts Besonderes hier. Nur die Leinwand. * / Körper Breite: 500px; Marge: 60px auto 0; Hintergrund: # 666; #box / * Nur eine Box * / width: 500px; Höhe: 500px; / * Abgerundete Ecken * / -moz-border-radius: 3px; -webkit-border-radius: 3px; Grenzradius: 3px; Rand: 2px durchgehend weiß; / * Mehrere Rahmenfarben in Gecko * / -moz-Rahmenfarben: # 292929 weiß; -moz-border-right-colors: # 292929 weiß; -moz-border-bottom-colors: # 292929 weiß; -moz-border-left-colors: # 292929 weiß; / * Webkit kompensieren. Nicht so schön, aber funktioniert. * / -webkit-box-shadow: 0 -1px 2px # 292929; / * Hintergrund subtiler Farbverlauf mit Fallback auf Volltonfarbe * / background: # e3e3e3; Hintergrund: -moz-linearer Gradient (oben, # a4a4a4, # e3e3e3); Hintergrund: -webkit-gradient (linear, links oben, links unten, von (# a4a4a4) bis (# e3e3e3));
Accentsconagua