Wie Sie die ICON-Methode mithilfe von CSS_HTML5-Tutorials in die Praxis umsetzen

Kürzlich habe ich meine Blog-Site neu gestaltet und beschlossen, ein Symbol im Kalenderstil zur Anzeige der Uhrzeit zu verwenden. Die bisherige Lösung bestand im Allgemeinen darin, Hintergrundbilder zu verwenden. Dank CSS3 können wir diese Funktion jetzt mit CSS3 erreichen. Ich werde einige lineare Farbverläufe, Randradius- und Boxschatten-Eigenschaften verwenden, um das vorherige Photoshop-Design zu ersetzen.

Photoshop-Konzeptkarte

Viele Designer verwenden die Methode, direkt im Browser zu entwerfen, aber ich bevorzuge es immer noch, zuerst eine Photoshop-Konzeptkarte zu erstellen. Obwohl viele Effekte mittlerweile direkt mit CSS erzielt werden können, ist die Gestaltung von Effekten mit Photoshop viel einfacher, als ständig zu versuchen, CSS zu modifizieren, um schließlich den gewünschten Effekt zu erzielen.

Erstellen Sie zunächst ein abgerundetes Rechteck und stellen Sie den abgerundeten Eckenradius auf 10 Pixel ein. Später werden wir die Eigenschaft border-radius von CSS verwenden, um es zu implementieren.

Fügen Sie dem Rechteck einen vertikalen Farbverlauf hinzu. Die Farbverlaufsfarbe reicht von #dad8d8 bis #fcfcfc.

Legen Sie einen 1-Pixel-Strich mit der Farbe #e3e3e3 fest

Fügen Sie abschließend einen nach unten gerichteten Schatteneffekt mit einer Deckkraft von 20 %, einem Abstand von 0 px und einem Abstand von hinzu 15 px Größe. Diese Effekte werden in CSS mithilfe der Box-Shadow-Eigenschaft implementiert.

Kopieren Sie gerade das Rechteck und entfernen Sie den oberen Teil. Ändern Sie den Farbverlauf von #790909 zu #d40000 und füllen Sie das neu erstellte Rechteck, in dem die Monatsinformationen platziert werden.

Legen Sie einen inneren Schatten fest, der den oberen Rand darstellt, Farbe #a13838, 100 % Transparenz, 3 Pixel Abstand und 0 Pixel Größe.

Verwenden Sie das Schriftarten-Tool von Photoshop, um den Schriftarteneffekt für den Zeitinhalt in der oberen Hälfte des Kalendersymbols festzulegen. Die Schriftart ist Helvetica und die Farbe ist #9e9e9e.

Geben Sie die Monatsinformationen in den roten Teil unten ein, stellen Sie die Schriftart auf Breit und die Farbe auf Weiß ein.

Das Photoshop-Modell ist fertig. Früher haben wir das Bild als Hintergrund extrahiert und HTML-Zahlen darauf geschrieben, aber jetzt kann all dies mit CSS erreicht werden.
HTML-Struktur

25 Mai

;/div>
Der HTML-Code der ICON-Demo ist dieses Mal sehr einfach. Wir verwenden ein Div mit der Klasse „Datum“ als Container und verwenden dann ein p-Tag, um die Datumsnummer darzustellen. Tage und Monate werden in unserem Design durch Zeichen unterschiedlicher Größe dargestellt, daher verwenden wir das Tag , um verschiedene Elemente unterschiedlich zu behandeln.

CSS-Stil

Code kopierenDer Code lautet wie folgt:

.date {

width: 130px; height: 160px;
background: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); 🎜>Hintergrund: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%)
}




Der CSS-Stil legt zunächst die Höhe und Breite des gesamten Containers fest, und der Verlaufseffekt kann einfach durch den CSS-Verlauf erreicht werden.

Code kopieren

Der Code lautet wie folgt: .Datum { Breite: 130px; Höhe: 160px;

Hintergrund: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); top, #fcfcfc 0%, #dad8d8 100%);

background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); >border-radius: 10px;

-moz-border-radius: 10px
-webkit-border-radius: 10px;

Verwenden Sie das Randattribut, um den 1-Pixel-Randeffekt in Photoshop zu erzielen, und verwenden Sie dann den Randradius, um den Effekt abgerundeter Ecken zu erzielen. Vergessen Sie nicht, die Präfixe -moz- und -webkit- hinzuzufügen, um die Kompatibilität mit älteren Browsern zu gewährleisten.

Code kopieren

Der Code lautet wie folgt:

.Datum {
Breite: 130px; Höhe: 160px;
Hintergrund: linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); top, #fcfcfc 0%, #dad8d8 100%);
background: -webkit-linear-gradient(top, #fcfcfc 0%,#dad8d8 100%); >border-radius: 10px;
-moz-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);
}




Der letzte Teil des Codes verwendet Box-Shadow, um den unteren Schatteneffekt im Photoshop-Design zu erzielen. Fügen Sie einen horizontalen und vertikalen Versatz von 0 Pixel und eine Unschärfe von 15 Pixel hinzu. Verwenden Sie RGBA, um die Transparenz zu steuern. Die 105 im Photoshop-Design wird hier durch 0,1 ersetzt.

Code kopieren

Der Code lautet wie folgt:

.Datum p { Schriftfamilie: Helvetica, serifenlos; Schriftgröße: 100px; Textausrichtung: Mitte;

Wir verwenden das p-Tag, das den Stil definiert und die Textstildefinition für das Datum implementiert. Schriftart, Textgröße und Textfarbe werden alle aus Photoshop kopiert und die Textausrichtung ist auf „Mitte“ eingestellt. Der Stil wirkt sich aber auch auf den Monatstext aus. Als nächstes definieren wir den Span-Tag-Stil dafür separat.

Code kopieren

Der Code lautet wie folgt:

.date p span { Hintergrund: #d10000; Hintergrund: linearer Farbverlauf (oben, #d10000 0 %, #7a0909 100 %); Hintergrund: -moz-linearer Farbverlauf (oben, #d10000 0 %, #7a0909). 100 % ; Hintergrund: -webkit-linear-gradient(top, #d10000 0 %, #7a0909 100 %);

Die Implementierung des roten Teils wird erreicht, indem die Eigenschaft „Linear-Gradient“ für den Hintergrund des Bereichs festgelegt wird. Der rote Wert stammt ebenfalls aus Photoshop.

Code kopieren

Der Code lautet wie folgt:

.date p span {

Hintergrund: #d10000; Hintergrund: linearer Farbverlauf (oben, #d10000 0 %, #7a0909 100 %); Hintergrund: -moz-linearer Farbverlauf (oben, #d10000 0 %, #7a0909). 100%); Hintergrund: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%); Schriftgröße: fett; Text -transform: Großbuchstaben;

display: block; , und color Stellen Sie es auf Weiß ein und verwenden Sie text-transform, um eine Konvertierung in Großbuchstaben zu erreichen. Legen Sie das Span-Tag als Blockelement fest, sodass es der Größe des Containers entspricht, und legen Sie einen roten Hintergrund fest.

Code kopieren


Der Code lautet wie folgt:

.date p span {
Hintergrund: #d10000; Hintergrund: linearer Farbverlauf (oben, #d10000 0 %, #7a0909 100 %);
Hintergrund: -moz-linearer Farbverlauf (oben, #d10000 0 %, #7a0909). 100%);
Hintergrund: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%);
Schriftgröße: fett; Text -transform: Großbuchstaben;

display: block

border-top: 3px solid #a13838; -moz-border-radius: 0 0 10px 10px ; -webkit-border-radius: 0 0 10px 🎜>padding: 6px 0 6px 0;

Le reste consiste à ajouter la bordure d'en-tête, en utilisant le style border-top et en utilisant l'attribut border-radius pour implémenter les deux coins arrondis inférieurs. Un petit attribut padding peut donner un peu d'espace entre le haut et le bas du texte du mois et d'autres éléments.
Compatibilité des navigateurs

Bien que les propriétés améliorées du CSS puissent nous aider à obtenir les effets de dégradé et d'ombre dans Photoshop, nous devons toujours faire face aux exigences précédentes des concepteurs de sites Web. problèmes de compatibilité du navigateur.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn