Slik lager du Gmail-logo med CSS3

For noen måneder siden viste jeg deg hvordan du lager RSS-feedlogo med CSS3. Jeg skjønte det ville vært morsomt å skape noe litt mer komplekst. I dagens innlegg skal jeg vise deg hvordan du lager ikke en, men to variasjoner av Gmail-logoen ved hjelp av bare CSS3.

Snarveier til:

• Gmail-logoen CSS-opplæringen # 1 | Forhåndsvisning
• Gmail logo CSS opplæring # 2 | Forhåndsvisning

Gmail-logoen # 1

Denne første logoen er enkel, og ganske enkel å lage. Uten videre ado, her er trinnene. La oss starte med å skyte opp favorittkodeditoren din og skrive inn følgende HTML-koder, og lagre den som logo-gmail.html.

Legg til følgende CSS-stiler mellom for å tilbakestille standard CSS-verdier.

.gmail-logo, .gmail-logo *, .gmail-logo *: før, .gmail-logo *: etter margin: 0; padding: 0; bakgrunn: gjennomsiktig; kant: 0; omriss: 0; display: block; font: normal normal 0/0 serif; 

Følgende CSS-koder gir oss Gmail-logoen sin røde bakgrunn og avrundede sider.

 .gmail-logo margin: 110px auto; bakgrunn: rgb (201, 44, 25); bredde: 600 piksler; høyde: 400 piksler; border-top: 4px solid rgb (201, 44, 25); grensebunn: 4px solid rgb (201, 44, 25); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Så fortsetter vi å lage den hvite boksen i den røde bakgrunnen.

 .gmail-logo .gmail-box overflow: hidden; float: venstre; bredde: 440px; høyde: 400 piksler; margin: 0 0 0 80px; bakgrunn: hvitt; border-radius: 5 px; -moz-border-radius: 5 px; -webkit-border-radius: 5 px; 

For å opprette den røde "M" -effekten, oppretter vi først en boks med rød kant.

 .gmail-logo .gmail-box: før posisjon: relative; Innhold: "; z-indeks: 1; Bakgrunn: Hvit; Flyte: Venstre; Bredde: 320px; Høyde: 320px; Grense: 100px Solid Rgb (201, 44, 25); Margin: -310px 0 0 -40px; radius: 10px; -moz-grense-radius: 10px; -webkit-grense-radius: 10px; -moz-transform: roter (45deg); -webkit-transform: roter (45deg); -o-transformer: roter );

Så fortsetter vi å gjemme de overdrevne sidene, noe som gir oss et komplett "M" i rød farge.

 .gmail-logo .gmail-box overflow: hidden; 

Nå, la oss gi to tynne røde grener, og gi den konvolutten.

 .gmail-logo .gmail-boks: etter innhold: "; flyte: venstre; bredde: 360px; høyde: 360px; grense: 2px solid rgb (201, 44, 25); margin: 10px 0 0 40px; -o-transform : roter (45deg); -webkit-transformer: roter (45deg); -moz-transformer: roter (45deg);

Vi er nesten ferdige. La oss legge litt gradient til den røde konvolutten.

 .gmail-logo: etter innhold: "; posisjon: relative; z-indeks: 2; innhold:"; float: venstre; margin-top: -404px; bredde: 600 piksler; høyde: 408px; display: block; bakgrunn: -moz-lineær gradient (topp, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); bakgrunn: -o-lineær gradient (topp, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, rgba (255, 255, 255, 0.3)), / * fargestopp (30%, rgba (255, 255, 255 , 0,2)), * / fargestopp (100%, rgba (255, 255, 255, 0,1)));  

Sist men ikke minst, la oss gi den en annen farge ved hovered. Legg til følgende HTML DOCTYPE før

Og følgende CSS-stiler før

 .gmail-logo: svever bakgrunn: # 313131; border-color: # 313131; / * markør: pointer; * / .gmail-logo: svever .gmail-boks: før border-color: # 313131;  .gmail-logo: svever .gmail-boks: etter border-color: # 313131; nedre kant-farge: #fff; border-right-color: #fff; 

Forhåndsvisning | Last ned kildefilen

Gmail-logoen # 2

Deretter oppretter vi Gmail-logoen fra et annet perspektiv med en liten 3D-effekt. Vi starter med det grunnleggende HTML-oppslaget.

Siden logoen har et annet perspektiv, begynner vi ved å rotere det litt og lage lagene som trengs (som vi kaller dem elementer) i rekkefølge.

 # gmail-logo2 margin: 0 auto; display: block; bredde: 380px; høyde: 290px; -moz-transform: roter (6deg); -webkit-transform: roter (6deg); -o-transform: rotere (6deg); transform: roter (6deg);  # gmail-logo2. element1 display: block; bredde: 380px; høyde: 290px;  # gmail-logo2. element2, # gmail-logo2. element3, # gmail-logo2. element4, # gmail-logo2. element5 float: left; display: block; bredde: 380px; høyde: 290px; margin: -290px 0 0 0;  

styling .element1 :: før

 # gmail-logo2. element1 :: før innhold: "; posisjon: relative; margin: 2px 0 0 14px; float: venstre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 30px; høyde: 276px; -moz-transform: roter (3deg); -webkit-transform: roter (3deg); -o-transformer: roter (3deg); transformer: roter (3deg); grensestrek: 22px 0 0 20px; -moz bredde: 22px 0 0 20px; -webkit-grense-radius: 22px 0 0 20px; boksskygge: -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-boks-skygge: -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-boks-skygge: -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 :: etter

 # gmail-logo2. element1 :: etter content: "; posisjon: relative; margin: 40px 5px 0 0; float: høyre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 30px; høyde: 238px; -moz-transform: roter (3deg); -webkit-transform: roter (3deg); -o-transformer: roter (3deg); transform: roter (3deg); grense-radius: 0 18px 26px 0; -webkit -renger-radius: 0 18px 26px 0; -moz-grense-radius: 0 18px 26px 0; bokseskygge: -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-boks-skygge: -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-boks-skygge: -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 :: før

 # gmail-logo2. element2 :: før innhold: "; margin: 22px 0 0 48px; float: venstre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 315px; høyde: 14px; -moz -transform: roter (6.8deg); -webkit-transform: roter (6.8deg); -o-transform: roter (6.8deg); transformer: roter (6.8deg); boks-skygge: 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-boks-skygge: 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-boks -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 .element2 :: etter

 # gmail-logo2. element2 :: etter content: "; posisjon: relative; margin: 230px 0 0 36px; float: venstre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 310px; høyde: 12px; boksskygge: 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-boks-skygge: 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 O rgb (109, 10, 0); -moz-boks-skygge: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb ), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

styling .Element3 :: før

 # gmail-logo2. element3 :: før innhold: "; posisjon: relative, margin: 8px 0 0 42px; float: venstre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 42px; høyde: 268px; -moz-transform: roter (3deg); -webkit-transform: roter (3deg); -o-transform: roter (3deg); transformer: roter (3deg);

styling .Element3 :: etter

 # gmail-logo2. element3 :: etter content: "; posisjon: relative; margin: 40px 32px 0 0; float: høyre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 22px; høyde: 236px; -moz-transform: rotate (3.0deg); -webkit-transform: roter (3.0deg); -o-transform: roter (3.0deg); transformer: roter (3.0deg); bokseskygge: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 04px 0 rgb (109, 10, 0), 0 5px 0 rgb 109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-boks-skygge: 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); -Mos-boks-skygge: 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 :: før

 # gmail-logo2. element4 :: før innhold: "; posisjon: relative; margin: -2px 0 0 130px; float: venstre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 54px; høyde : 192px; -moz-transform: rotate (-49deg); -webkit-transform: roter (-49deg); -o-transform: roter (-49deg); transformer: roter (-49deg); bokseskygge: -1px 010 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-boks-skygge: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 010 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-boks-skygge: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10,0), -6px 0 0 rgb (109, 10, 0), -7px (109, 10, 0), -4px 0 0 rgb 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);

styling .element4 :: etter

 # gmail-logo2. element4 :: etter innhold: "; posisjon: relative; margin: 12px 88px 0 0; float: høyre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 54px; høyde: 186px; grense-radius: 30px 0 0 0; -webkit-grense-radius: 30px 0 0 0; -moz-grense-radius: 30px 0 0 0; -moz-transform: roter (53deg); -webkit-transform: roter (53deg); -o-transformer: roter (53deg); transformer: roter (53deg);

styling .element5 :: før

# gmail-logo2. element5 :: før innhold: "; posisjon: relative, margin: 115px 0 0 125px; float: venstre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 2px; høyde: 150px; -moz-transform: roter (55deg); -o-transformer: roter (55deg); -webkit-transform: roter (55deg); transformer: roter (55deg);

styling .element5 :: etter

 # gmail-logo2. element5 :: etter posisjon: relative; innhold: "; margin: 115px 0 0 150px; float: venstre; display: blokk; bakgrunn: rgb (201, 44, 25); bredde: 2px; høyde: 150px; -moz-transform: roter (-50deg); webkit-transform: roter (-50deg); -o-transformer: roter (-50deg); transformer: roter (-50deg);

Justere prioriteten til z-indeks.

 # gmail-logo2. element1 :: før z-indeks: 3; # gmail-logo2. element1 :: etter z-indeks: 1; / * # gmail-logo2 .element2 :: før  * / # gmail-logo2. element2 :: etter z-indeks: 2; # gmail-logo2 .element3 :: før z-indeks: 5; # gmail-logo2 .element3 :: etter z-indeks: 1; # gmail-logo2. element4 :: før z-indeks: 4; # gmail-logo2. element4 :: etter z-indeks: 3; / * # gmail-logo2 .element5 :: før  # gmail- logo2. element5 :: etter  * /

Vi er nesten ferdige. Gmail-logoen din bør se slik ut:

Til slutt, la oss gi den en annen farge ved hovered.

 # gmail-logo2: svever * :: etter, # gmail-logo2: svever * :: før bakgrunn: rgba (20, 196, 7, 1);  # gmail-logo2: svever .element1 :: før boks-skygge: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-boks-skygge: -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-boks-skygge: -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: svever. element1 :: etter boks-skygge: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb , 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-boks-skygge: -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-boks-skygge: -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 :: før boksskygge: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -boks-boks-skygge: 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 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -Oz-boks-skygge: 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 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: svever. element2 :: etter boksskygge: 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); -boks-boks-skygge: 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 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -Oz-boks-skygge: 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 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: svever. element3 :: etter boksskygge: 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); -boks-boks-skygge: 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 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -Oz-boks-skygge: 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 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: svever .element4 :: før boks-skygge: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb , 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-boks-skygge: -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), -7px 0 0 rgb (10, 90, 4), -8px (10, 90, 4), -5px 0 0 rgb 0 0 rgb (10, 90, 4); -webkit-boks-skygge: -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), -7px 0 0 rgb (10, 90, 4), -8px (10, 90, 4), -5px 0 0 rgb 0 0 rgb (10, 90, 4); 

Forhåndsvisning | Last ned kildefilen

Redaktørens notat: Dette innlegget er skrevet av Irham Kendeni for Hongkiat.com. Irham, også kjent som Indaam, er webdesigner og utvikler fra Indonesia. Han elsker også CSS og WordPress tema utvikling.