So erstellen Sie ein Google Mail-Logo mit CSS3
Vor ein paar Monaten habe ich Ihnen gezeigt, wie Sie ein RSS-Feed-Logo mit CSS3 erstellen. Ich dachte mir, dass es Spaß machen würde, etwas komplexeres zu kreieren. Im heutigen Beitrag werde ich Ihnen zeigen, wie Sie mit CSS3 nicht nur eine, sondern zwei Varianten des Gmail-Logos erstellen.
Abkürzungen zu:
- Google Mail-Logo CSS-Tutorial # 1 | Vorschau
- Google Mail-Logo CSS-Tutorial # 2 | Vorschau
Google Mail-Logo # 1
Dieses erste Logo ist einfach und ziemlich einfach zu erstellen. Hier sind die Schritte ohne weiteres. Beginnen wir mit dem Starten Ihres bevorzugten Code-Editors, geben Sie die folgenden HTML-Codes ein und speichern Sie sie als logo-gmail.html.
Gmail CSS-Logo
Fügen Sie zwischen die folgenden CSS-Stile hinzu um die CSS-Standardwerte zurückzusetzen.
.gmail-logo, .gmail-logo *, .gmail-logo *: vorher, .gmail-logo *: nach margin: 0; Polsterung: 0; Hintergrund: transparent; Grenze: 0; Umriss: 0; Bildschirmsperre; font: normal normal 0/0 serif;
Die folgenden CSS-Codes geben uns den roten Hintergrund des Gmail-Logos und abgerundete Seiten.
.gmail-logo margin: 110px auto; Hintergrund: rgb (201, 44, 25); Breite: 600px; Höhe: 400px; Border-Top: 4px festes rgb (201, 44, 25); Border-Bottom: 4px festes rgb (201, 44, 25); Grenzradius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Dann fahren wir mit der Erstellung des weißen Kästchens im roten Hintergrund fort.
.gmail-logo .gmail-box overflow: versteckt; Schwimmer: links; Breite: 440px; Höhe: 400px; Marge: 0 0 0 80px; Hintergrund: weiß; Grenzradius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
Um den roten "M" -Effekt zu erzeugen, erstellen wir zuerst eine Box mit rotem Rand.
.gmail-logo .gmail-box: vor position: relativ; Inhalt: "; Z-Index: 1; Hintergrund: Weiß; Float: Links; Breite: 320px; Höhe: 320px; Rand: 100px. Vollrand (201, 44, 25); Rand: -310px 0 0 -40px; Rand- Radius: 10px; -moz-Randradius: 10px; -webkit-Randradius: 10px; -moz-transform: drehen (45 Grad); -webkit-transform: drehen (45deg); -o-transform: drehen (45deg );
Dann verstecken wir die übermäßigen Seiten und geben uns ein komplettes "M" in roter Farbe.
.gmail-logo .gmail-box overflow: versteckt;
Lassen Sie uns nun zwei dünne rote Umrandungen geben, die dem Umschlag das Aussehen verleihen.
.gmail-logo .gmail-box: after content: "; float: left; width: 360px; height: 360px; border: 2px solid rgb (201, 44, 25); Marge: 10px 0 0 40px; -o-transform : drehen (45 Grad); -webkit-transform: Drehen (45 Grad); -moz-transform: Drehen (45 Grad);
Wir sind fast fertig. Fügen wir dem roten Umschlag einen Farbverlauf hinzu.
.gmail-logo: after content: "; position: relativ; z-index: 2; content:"; Schwimmer: links; Rand oben: -404px; Breite: 600px; Höhe: 408px; Bildschirmsperre; Hintergrund: -moz-linearer Gradient (oben, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1) ) 100%); Hintergrund: -o-linearer Gradient (oben, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1) ) 100%); Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, rgba (255, 255, 255, 0.3)), / * Farbstopp (30%, rgba (255, 255, 255) 0,2)), * / Farbstopp (100%, rgba (255, 255, 255, 0,1)));
Zu guter Letzt geben wir ihm eine andere Farbe, wenn man ihn schwebt. Fügen Sie zuvor den folgenden HTML-DOCTYPE hinzu
Und die folgenden CSS-Stile zuvor
.gmail-logo: hover Hintergrund: # 313131; Rahmenfarbe: # 313131; / * Cursor: Zeiger; * / .gmail-logo: hover .gmail-box: before border-color: # 313131; .gmail-logo: hover .gmail-box: after border-color: # 313131; Rahmenfarbe unten: #fff; Rahmenfarbe rechts: #fff;
Vorschau | Quelldatei herunterladen
Google Mail-Logo # 2
Als Nächstes erstellen wir ein Google Mail-Logo aus einer anderen Perspektive mit einem kleinen 3D-Effekt. Wir beginnen mit dem grundlegenden HTML-Markup.
Google Mail-Logo 2
Da das Logo eine andere Perspektive hat, drehen wir es zunächst ein wenig und erstellen die benötigten Ebenen (die wir sie nennen) Elemente) der Reihe nach.
# gmail-logo2 margin: 0 auto; Bildschirmsperre; Breite: 380px; Höhe: 290px; -Moz-Transformation: drehen (6 Grad); -webkit-transform: drehen (6deg); -o-transform: drehen (6deg); umwandeln: drehen (6deg); # gmail-logo2 .element1 display: block; Breite: 380px; Höhe: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; Bildschirmsperre; Breite: 380px; Höhe: 290px; Marge: -290px 0 0 0;
Styling .element1 :: vorher
# gmail-logo2 .element1 :: before content: "; position: relative; margin: 2px 0 0 14px; float: left; display: block; background: rgb (201, 44, 25); width: 30px; height: 276px; -moz-transform: Rotation (3deg); -webkit-transform: Rotation (3deg); -o-transform: Rotation (3deg); transform: Rotation (3deg); Grenzradius: 22px 0 0 20px; -moz -Border-Radius: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; Box-Schatten: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0 -3 px 3px 0 rgb (109,10 0), -4px 4px 0 rgb (109,10 0), -5px 5px 0 rgb (109,10 0), -6px 6px 0 rgb (109,10) 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0rgb (109,10 0), -5px 5px 0rgb (109,10,0), -6px 6px 0rgb (109,10,10); -moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0rgb (109, 10, 0), -6px 6px 0rgb (109, 10, 0);
Styling .element1 :: after
# gmail-logo2 .element1 :: after content: "; position: relative; margin: 40px 5px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 30px; height: 238px; -moz-transform: Rotation (3deg); -webkit-transform: Rotation (3deg); -o-transform: Rotation (3deg); transform: Rotation (3deg); Grenzradius: 0 18px 26px 0; -webkit -Border-Radius: 0 18px 26px 0; -moz-Rahmenradius: 0 18px 26px 0; Box-Schatten: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0 -3 px 3px 0 rgb (109,10 0), -4px 4px 0 rgb (109,10 0), -5px 5px 0 rgb (109,10 0), -6px 6px 0 rgb (109,10) 0), -6px 7px 0rgb (109, 10, 0); -moz-box-shadow: -1px 1px 0rgb (109,10 0), -2px 2px 0rgb (109,10,0), -3px 3px 0rgb (109,10 0), -4px 4px 0rgb (109,10,10), -5px 5px 0rgb (109,10,10), -6px 6px 0rgb (109,10,0) ), -6px7px0rgb (109, 10, 0); -webkit-box-shadow: -1px1px0rgb (109,10 0), -2px2px0rgb (109,10,0), -3px 3px 0rgb (109,10,0), -4px4px0rgb (109,10,0), -5px 5px0rgb (109,10,0), -6px6px0rgb (109,10 0), -6px 7px 0 rg b (109, 10, 0);
Styling .element2 :: vorher
# gmail-logo2 .element2 :: before content: "; margin: 22px 0 0 48px; float: left; display: block; hintergrund: rgb (201, 44, 25); width: 315px; height: 14px; -moz -transform: drehen (6.8deg); -webkit-transform: drehen (6.8deg); -o-transform: drehen (6.8deg); transform: drehen (6.8deg); Box-Schatten: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0rgb (109, 10, 0), 0 2px 0rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -Moz-Box -shadow: 0 1px 0 rgb (109,10 0), 0 2px 0 rgb (109,10 0), 0 3px 0 rgb (109,10 0), 0 4px 0 rgb (109,10 10) 0 5px 0rgb (109, 10, 0), -6px 6px 0rgb (109, 10, 0);
Styling .element2 :: after
# gmail-logo2 .element2 :: after content: "; position: relative; margin: 230px 0 0 36px; float: left; display: block; background: rgb (201, 44, 25); width: 310px; height: 12px; Box-Schatten: 0 1px 0rgb (109, 10, 0), 0 2px 0rgb (109, 10, 0), 0 3px 0rgb (109, 10, 0), 0 4px 0rgb (109,10) 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0 ), 0 4px 0 rgb (109,10 0), 0 5px 0 rgb (109,10 0), -6px 6px 0 rgb (109,10 0);
Styling .element3 :: vorher
# gmail-logo2 .element3 :: before content: "; position: relative; margin: 8px 0 0 42px; float: left; display: block; background: rgb (201, 44, 25); width: 42px; height: 268px; -moz-transform: drehen (3deg); -webkit-transform: drehen (3deg); -o-transform: drehen (3deg); transform: drehen (3deg);
Styling .element3 :: nach
# gmail-logo2 .element3 :: after content: "; position: relative; margin: 40px 32px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 22px; height: 236px; -moz-transform: Rotation (3,0 Grad); -webkit-Transformation: Rotation (3,0 Grad); -o-Transformation: Rotation (3,0 Grad); Transformation: Rotation (3,0 Grad); Box-Schatten: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb ( 109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0) 0 3px 0 rgb (109,10 0), 0 4px 0 rgb (109,10 0), 0 5px 0 rgb (109,10 0), -6px 6px 0 rgb (109,10 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
Styling .element4 :: vorher
# gmail-logo2 .element4 :: before content: "; position: relative; margin: -2px 0 0 130px; float: left; display: block; background: rgb (201, 44, 25); width: 54px; height : 192px; -moz-transform: drehen (-49deg); -webkit-transform: drehen (-49deg); -o-transform: drehen (-49deg); transform: drehen (-49deg); box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109,10 0), -6px 0 0 rgb (109,10 0), -7px 0 0 rgb (109,10 0), -8px 0 0 rgb (109,10 0) -moz-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);
Styling .element4 :: after
# gmail-logo2 .element4 :: after content: "; position: relative; margin: 12px 88px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 54px; height: 186px; Randradius: 30px 0 0 0; -webkit-Randradius: 30px 0 0 0; -moz-Randradius: 30px 0 0 0; -moz-Transformation: drehen (53 Grad); -webkit-Transformation: Drehen (53 Grad); -o-Transformation: Drehen (53 Grad); Transformation: Drehen (53 Grad);
Styling .element5 :: vorher
# gmail-logo2 .element5 :: before content: "; position: relative; margin: 115px 0 0 125px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-transformation: drehen (55 Grad); -o-transform: Drehen (55 Grad); -webkit-transform: Drehen (55 Grad); transform: Drehen (55 Grad);
Styling .element5 :: nach
# gmail-logo2 .element5 :: after position: relative; Inhalt: "; Rand: 115px 0 0 150px; Float: links; Anzeige: Block; Hintergrund: RGB (201, 44, 25); Breite: 2px; Höhe: 150px; -moz-transform: drehen (-50deg); -. Webkit-Transformation: Drehen (-50 Grad); -o-Transformation: Drehen (-50 Grad); Transformation: Drehen (-50 Grad);
Anpassen der Priorität von z-index.
# gmail-logo2 .element1 :: vor z-index: 3; # gmail-logo2 .element1 :: nach z-index: 1; / * # gmail-logo2 .element2 :: vor * / # gmail-logo2 .element2 :: after z-index: 2; # gmail-logo2 .element3 :: before z-index: 5; # gmail-logo2 .element3 :: after z-index: 1; # gmail-logo2 .element4 :: vor z-index: 4; # gmail-logo2 .element4 :: nach z-index: 3; / * # gmail-logo2 .element5 :: vor # gmail- logo2 .element5 :: after * /
Wir sind fast fertig. Ihr Google Mail-Logo sollte in etwa so aussehen:
Schließlich geben wir ihm eine andere Farbe, wenn er schwebte.
# gmail-logo2: hover * :: nach, # gmail-logo2: hover * :: vor background: rgba (20, 196, 7, 1); # gmail-logo2: hover .element1 :: vor box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 90, 4), -4px 4px 0rgb (10, 90, 4), -5px 5px 0rgb (10, 90, 4), -6px6px 0rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0rgb (10, 90, 4), -2px 2px 0rgb (10, 90, 4), -3px 3px 0rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5 px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: -1px 1px0rgb (10, 90, 4), -2px2px0rgb (10, 90, 4), -3px3px0rgb (10, 90, 4), -4px4px 0 rgb (10, 90, 4), -5 px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element1 :: nach box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 90, 4), -4px 4px 0rgb (10, 90, 4), -5px 5px 0rgb (10, 90, 4), -6px 6px 0rgb (10, 90, 4), -6px 7px 0rgb (10, 90, 4); -moz-box-shadow: -1px 1px0rgb (10, 90, 4), -2px2px0rgb (10, 90, 4), -3px3px0rgb (10, 90, 4), -4px4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0rgb (10, 90, 4), -2px 2px 0rgb (10, 90, 4), -3px 3px 0rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); # gmail-logo2: hover .element2 :: before box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4) 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element2 :: after box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4) 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element3 :: after box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4) 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element4 :: before box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -moz-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4);
Vorschau | Quelldatei herunterladen
Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Irham Kendeni für Hongkiat.com. Irham, auch bekannt als Indaam, ist ein Webdesigner und -entwickler aus Indonesien. Er liebt auch die CSS- und WordPress-Theme-Entwicklung.
