Hoe Gmail-logo te maken met CSS3
Een paar maanden geleden heb ik je laten zien hoe je RSS-feedlogo maakt met CSS3. Ik dacht dat het leuk zou zijn om iets een beetje ingewikkelder te maken. In het bericht van vandaag laat ik je zien hoe je niet één, maar twee varianten van het Gmail-logo kunt maken met alleen CSS3.
Snelkoppelingen naar:
- Gmail-logo CSS-zelfstudie # 1 | Voorbeeld
- Gmail-logo CSS zelfstudie # 2 | Voorbeeld
Gmail-logo # 1
Dit eerste logo is eenvoudig en redelijk gemakkelijk te maken. Zonder verder oponthoud, hier zijn de stappen. Laten we beginnen met het opstarten van uw favoriete codebewerker en de volgende HTML-codes invoeren en opslaan als logo-gmail.html.
Gmail CSS-logo
Voeg de volgende CSS-stijlen toe tussen om standaard CSS-waarden opnieuw in te stellen.
.gmail-logo, .gmail-logo *, .gmail-logo *: before, .gmail-logo *: after margin: 0; padding: 0; background: transparent; border: 0; schets: 0; display: block; lettertype: normaal normaal 0/0 serif;
De volgende CSS-codes geven ons de rode achtergrond en afgeronde zijden van het Gmail-logo.
.gmail-logo margin: 110px auto; achtergrond: rgb (201, 44, 25); width: 600px; Hoogte: 400px; border-top: 4px vaste rgb (201, 44, 25); border-bottom: 4px solid rgb (201, 44, 25); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Vervolgens gaan we verder met het maken van het witte vak binnen de rode achtergrond.
.gmail-logo .gmail-box overflow: verborgen; float: left; width: 440px; Hoogte: 400px; marge: 0 0 0 80px; achtergrond: wit; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
Om het rode "M" -effect te creëren, maken we eerst een kader met een rode rand.
.gmail-logo .gmail-box: before position: relative; inhoud: "; z-index: 1; achtergrond: wit; zwevend: links; breedte: 320px; hoogte: 320px; rand: 100px solide rgb (201, 44, 25); marge: -310px 0 0 -40px; radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: roteren (45deg); -webkit-transformeren: roteren (45deg); -o-transform: roteren (45deg );
Daarna verbergen we de overmatige kanten, waardoor we een volledige "M" in rode kleur krijgen.
.gmail-logo .gmail-box overflow: verborgen;
Laten we nu twee dunne rode randen geven, zodat de envelop er uit ziet.
.gmail-logo .gmail-box: na content: "; float: links; width: 360px; height: 360px; border: 2px solid rgb (201, 44, 25); margin: 10px 0 0 40px; -o-transform : rotate (45deg); -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg);
We zijn bijna klaar. Laten we een beetje verloop toevoegen aan de rode envelop.
.gmail-logo: na content: "; positie: relatief; z-index: 2; inhoud:"; float: left; margin-top: -404px; width: 600px; Hoogte: 408px; display: block; achtergrond: -moz-linear-gradient (top, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); achtergrond: -o-lineaire gradiënt (boven, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (0%, rgba (255, 255, 255, 0.3)), / * kleur-stop (30%, rgba (255, 255, 255) , 0,2)), * / color-stop (100%, rgba (255, 255, 255, 0,1)));
Last but not least, laten we het een andere kleur geven als het zweeft. Voeg de volgende HTML DOCTYPE eerder toe
En de volgende CSS-stijlen eerder
.gmail-logo: hover background: # 313131; border-color: # 313131; / * cursor: pointer; * / .gmail-logo: hover .gmail-box: before border-colour: # 313131; .gmail-logo: hover .gmail-box: after border-colour: # 313131; border-bottom-color: # fff; border-rechts-color: # fff;
Voorbeeld | Download bronbestand
Gmail-logo # 2
Vervolgens maken we het Gmail-logo vanuit een ander perspectief met een klein 3D-effect. We beginnen met de eenvoudige HTML-markup.
Gmail-logo 2
Omdat het logo een ander perspectief heeft, zullen we beginnen met een beetje draaien en de benodigde lagen creëren (die we ze zullen noemen) elementen) achter elkaar.
# gmail-logo2 margin: 0 auto; display: block; width: 380px; Hoogte: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); -o-transform: draai (6deg); transform: rotate (6deg); # gmail-logo2 .element1 display: block; width: 380px; Hoogte: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; display: block; width: 380px; Hoogte: 290px; marge: -290 px 0 0 0;
styling .element1 :: vóór
# 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: roteren (3deg); -webkit-transformeren: roteren (3deg); -o-transformeren: roteren (3deg); transformeren: roteren (3deg); grensradius: 22px 0 0 20px; -moz -grenzen-straal: 22px 0 0 20px; -webkit-grens-radius: 22px 0 0 20px; vakschaduw: -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 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 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -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 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
styling .element1 :: na
# 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: roteren (3deg); -webkit-transformeren: roteren (3deg); -o-transform: roteren (3deg); transformeren: roteren (3deg); randradius: 0 18px 26px 0; -webkit -grenzen-straal: 0 18px 26px 0; -moz-border-radius: 0 18px 26px 0; vakschaduw: -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 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10 , 0), -6px 7px 0 rgb (109, 10, 0); -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 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0 ), -6px 7px 0 rgb (109, 10, 0); -webkit-vak-schaduw: -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 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0), -6px 7px 0 rg b (109, 10, 0);
styling .element2 :: vóór
# gmail-logo2 .element2 :: before content: "; margin: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); width: 315px; height: 14px; -moz -transform: roteren (6.8deg); -webkit-transformeren: roteren (6.8deg); -o-transform: roteren (6.8deg); transformeren: roteren (6.8deg); vakschaduw: 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-vak-schaduw: 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 -schaduw: 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 .element2 :: na
# 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; vakschaduw: 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 .element3 :: vóór
# 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: roteren (3deg); -webkit-transformeren: roteren (3deg); -o-transform: roteren (3deg); transformeren: roteren (3deg);
styling .element3 :: na
# 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: rotate (3.0deg); -webkit-transform: rotate (3.0deg); -o-transform: rotate (3.0deg); transform: rotate (3.0deg); 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); -webkit-vak-schaduw: 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 :: vóór
# 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: roteren (-49deg); -webkit-transform: roteren (-49deg); -o-transform: roteren (-49deg); transformeren: roteren (-49deg); vakschaduw: -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-vak-schaduw: -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 :: na
# 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-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotate (53deg); -webkit-transformatie: roteren (53 graden); -o-transform: roteren (53 graden); transformeren: roteren (53 graden);
styling .element5 :: vóór
# 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-transform: roteren (55 graden); -o-transform: roteren (55 graden); -webkit-transformeren: roteren (55 graden); transformeren: roteren (55 graden);
styling .element5 :: na
# gmail-logo2 .element5 :: after position: relative; content: "; margin: 115px 0 0 150px; float: links; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-transform: rotate (-50deg); webkit-transform: roteren (-50deg); -o-transform: roteren (-50deg); transformeren: roteren (-50deg);
De prioriteit van aanpassen z-index.
# gmail-logo2 .element1 :: before z-index: 3; # gmail-logo2. element1 :: after z-index: 1; / * # gmail-logo2. element2 :: before * / # gmail-logo2 .element2 :: after z-index: 2; # gmail-logo2 .element3 :: before z-index: 5; # gmail-logo2. element3 :: after z-index: 1; # gmail-logo2 .element4 :: before z-index: 4; # gmail-logo2 .element4 :: after z-index: 3; / * # gmail-logo2 .element5 :: before # gmail- logo2 .element5 :: after * /
We zijn bijna klaar. Uw Gmail-logo zou er ongeveer zo uit moeten zien:
Laten we tenslotte een andere kleur geven bij zweven.
# gmail-logo2: hover * :: after, # gmail-logo2: hover * :: before background: rgba (20, 196, 7, 1); # gmail-logo2: hover. element1 :: before 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 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-vak-schaduw: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-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 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element1 :: after 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 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); -moz-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 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-vak-schaduw: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (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-vak-schaduw: 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-vak-schaduw: 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-vak-schaduw: 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-vak-schaduw: -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);
Voorbeeld | Download bronbestand
Opmerking van de uitgever: Dit bericht is geschreven door Irham Kendeni voor Hongkiat.com. Irham, ook bekend als Indaam, is een webdesigner en -ontwikkelaar uit Indonesië. Hij houdt ook van CSS en WordPress thema-ontwikkeling.
