Kürzlich habe ich meine eigene Blog-Site neu gestaltet und beschlossen, ein Ikone im Kalender-Stil zu verwenden, um die Zeit anzuzeigen. Die vorherige Lösung bestand im Allgemeinen darin, Hintergrundbilder zu verwenden. Dank CSS3 können wir diese Funktionen jetzt mit CSS3 implementieren. Ich werde einige Eigenschaften wie Lineargradienten, Randradius und Box Shadow verwenden, um das vorherige Photoshop-Design zu ersetzen.
Photoshop -KonzeptdiagrammViele Designer verwenden die Methode zum direkten Design im Browser, aber ich bevorzuge immer noch die Methode, um zuerst Photoshop -Konzeptdiagramme zu erstellen. Obwohl viele Effekte jetzt direkt mit CSS implementiert werden können, ist die Art und Weise, wie es Effekte mit Photoshop entworfen hat, viel einfacher als die Art und Weise, CSS zu ändern, um schließlich den gewünschten Effekt zu erzielen.
Erstellen Sie zuerst ein abgerundetes Rechteck und stellen Sie den abgerundeten Eckradius auf 10px. Danach werden wir das Grenzgeschäft von CSS verwenden.
Fügen Sie dem Rechteck einen vertikalen Gradienten hinzu, die Gradientenfarbe ist von #DAD8D8 bis #FCFCFC.
Stellen Sie einen 1-Pixel-Schlaganfall ein, die Farbe ist #e3e3e3
Fügen Sie schließlich einen Abwärtsschatteneffekt mit 20% Transparenz, einen Abstand von 0 Pixel und eine Größe von 15 Pixel hinzu. Diese Effekte werden in CSS unter Verwendung der Box-Shadow-Eigenschaft implementiert.
Kopieren Sie das Rechteck gerade jetzt und entfernen Sie den oberen Teil. Ändern Sie den Gradienten, die Farbe von Nr. 790909 bis #D40000, das neu erstellte Rechteck, das die Monatsinformationen aufstellt.
Stellen Sie einen inneren Schatten ein, um den oberen Rand darzustellen. Die Farbe ist #A13838, 100% Transparenz, 3px -Entfernung und 0px -Größe.
Verwenden Sie das Schriftwerkzeug von Photoshop, um den Schriftart der ersten Hälfte des Kalendersymbols festzulegen. Die Schrift ist Helvetica und die Farbe ist #9E9E9E.
Geben Sie die monatlichen Informationen in den roten Abschnitt unten ein und stellen Sie die Schriftart auf breit und die Farbe auf weiß.
Das Photoshop -Modell ist abgeschlossen. In der Vergangenheit nahmen wir das Bild als Hintergrund heraus und schreiben die HTML -Zahlen darauf, aber jetzt kann all dies mit CSS erreicht werden.
HTML -Struktur<div class = Datum>
<p> 25 <span> Mai </span> </p>
</div>
Diesmal ist die HTML von Icon Demo sehr einfach. Wir werden eine DIV mit der Klasse "Datum" als Container verwenden und dann ein P -Tag verwenden, um die Datumsnummer darzustellen. Tage und Monate werden durch unterschiedliche Größen in unserem Design dargestellt, sodass wir <spannungstags verwenden, um verschiedene Elemente unterschiedlich zu behandeln.
CSS -Stil.Datum {
Breite: 130px; Höhe: 160px;
Hintergrund: #fcfcfc;
Hintergrund: Linear-Gradient (oben, #FCFCFC 0%, #DAD8D8 100%);
Hintergrund: -moz-linear-Gradient (Top, #FCFCFC 0%, #DAD8D8 100%);
Hintergrund: -Webkit-linear-Gradient (Top, #FCFCFC 0%, #DAD8D8 100%);
}
Der CSS -Stil setzt zunächst die Höhe und Breite des gesamten Behälters, und der Gradienteneffekt kann durch den CSS -Gradienten leicht erreicht werden.
.Datum {
Breite: 130px; Höhe: 160px;
Hintergrund: #fcfcfc;
Hintergrund: Linear-Gradient (oben, #FCFCFC 0%, #DAD8D8 100%);
Hintergrund: -moz-linear-Gradient (Top, #FCFCFC 0%, #DAD8D8 100%);
Hintergrund: -Webkit-linear-Gradient (Top, #FCFCFC 0%, #DAD8D8 100%);
Grenze: 1PX Solid #D2D2D2;
Border-Radius: 10px;
-moz-border-radius: 10px;
-Webkit-Border-Radius: 10px;
}
Verwenden Sie das Grenzattribut, um den 1PX-Grenzeffekt in Photoshop zu erzielen, und verwenden Sie dann Rand-Radius, um den abgerundeten Eckeffekt zu erzielen. Vergessen Sie nicht, -Moz- und -Webkit -Präfixe hinzuzufügen, um die Kompatibilität mit älteren Browsern zu ermöglichen.
.Datum {
Breite: 130px; Höhe: 160px;
Hintergrund: #fcfcfc;
Hintergrund: Linear-Gradient (oben, #FCFCFC 0%, #DAD8D8 100%);
Hintergrund: -moz-linear-Gradient (Top, #FCFCFC 0%, #DAD8D8 100%);
Hintergrund: -Webkit-linear-Gradient (Top, #FCFCFC 0%, #DAD8D8 100%);
Grenze: 1PX Solid #D2D2D2;
Border-Radius: 10px;
-moz-border-radius: 10px;
-Webkit-Border-Radius: 10px;
Box-Shadow: 0px 0px 15px RGBA (0,0,0,0,1);
-moz-box-shadow: 0px 0px 15px rgba (0,0,0,0,1);
-Webkit-box-shadow: 0px 0px 15px rgba (0,0,0,0,1);
}
Der letzte Teil des Codes besteht darin, den niedrigeren Schatteneffekt im Photoshop-Design über Box-Shadow zu erreichen. Fügen Sie 0px horizontale und vertikale Offsets hinzu, um die Mehrdeutigkeit von 15px zu erhöhen. Verwenden Sie RGBA, um die Transparenz zu steuern. Im Photoshop -Design wird 105 hier durch 0,1 ersetzt.
.Date p {
Schriftfamilie: Helvetica, Sans-Serif;
Schriftgröße: 100px; Text-Align: Mitte; Farbe: #9E9E9E;
}
Wir verwenden das P -Tag, um Stile zu definieren, um Textstile für Daten zu definieren. Schriftart, Textgröße und Textfarbe werden von Photoshop kopiert und Text-Align ist auf die Mitte eingestellt. Der Stil wirkt sich aber auch auf den monatlichen Text aus, und wir werden den Span -Label -Stil dafür getrennt definieren.
.Date p span {
Hintergrund: #D10000;
Hintergrund: Linear-Gradient (oben, #D10000 0%, #7A0909 100%);
Hintergrund: -moz-linear-Gradient (oben, #D10000 0%, #7A0909 100%);
Hintergrund: -Webkit-linear-Gradient (oben, #D10000 0%, #7A0909 100%);
}
Die Implementierung des roten Teils wird erreicht, indem das linear-Gradient-Attribut für den Hintergrund der Spanne festgelegt wird, und der rote Wert stammt auch von Photoshop.
.Date p span {
Hintergrund: #D10000;
Hintergrund: Linear-Gradient (oben, #D10000 0%, #7A0909 100%);
Hintergrund: -moz-linear-Gradient (oben, #D10000 0%, #7A0909 100%);
Hintergrund: -Webkit-linear-Gradient (oben, #D10000 0%, #7A0909 100%);
Schriftgröße: 45px; Schriftgewicht: fett; Farbe: #ffff; Texttransformierung: Großbuchstaben;
Anzeige: Block;
}
Ändern Sie den Textstil so, dass sie mit dem Design übereinstimmen, die Größe auf 45px einstellen, auf fett gedruckte Schriftart einstellen, die Farbe auf Weiß setzen und verwenden Sie Texttransformationen, um Kapitalkonvertierung zu implementieren. Stellen Sie das Span -Tag auf das Blockelement so ein, dass es mit der Größe des Containers übereinstimmt, und setzen Sie einen roten Hintergrund.
.Date p span {
Hintergrund: #D10000;
Hintergrund: Linear-Gradient (oben, #D10000 0%, #7A0909 100%);
Hintergrund: -moz-linear-Gradient (oben, #D10000 0%, #7A0909 100%);
Hintergrund: -Webkit-linear-Gradient (oben, #D10000 0%, #7A0909 100%);
Schriftgröße: 45px; Schriftgewicht: fett; Farbe: #ffff; Texttransformierung: Großbuchstaben;
Anzeige: Block;
Border-Top: 3px fester #A13838;
Border-Radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-Webkit-Border-Radius: 0 0 10px 10px;
Polsterung: 6px 0 6px 0;
}
Der Rest besteht darin, den Kopfrand hinzuzufügen, den Grenztop-Stil zu verwenden, um ihn zu implementieren und das Border-Radius-Attribut zu verwenden, um die beiden abgerundeten Ecken im unteren Teil zu implementieren. Ein kleines Padding -Attribut kann den monatlichen Text einen gewissen Abstand zwischen Auf und Ab und anderer Elemente haben.
BrowserkompatibilitätObwohl die verbesserten Eigenschaften von CSS uns helfen können, die Auswirkungen von Gradienten und Schatten in Photoshop zu erzielen, müssen wir uns noch den Problemen stellen, denen Webdesigner in der Vergangenheit konfrontiert waren, Browserkompatibilität.