Kako stvoriti Gmail logo s CSS3
Prije nekoliko mjeseci sam vam pokazao kako stvoriti RSS feed logo s CSS3. Pomislio sam da bi bilo zabavno stvoriti nešto malo složenije. U današnjem postu, pokazat ću vam kako stvoriti ne jednu, već dvije varijacije Gmail logotipa pomoću samo CSS3.
Prečaci do:
- Gmail logo CSS tutorial # 1 | pregled
- Gmail logo CSS tutorial # 2 | pregled
Gmail logotip # 1
Ovaj prvi logotip je jednostavan i lako ga je stvoriti. Bez daljnjih smetnji, ovdje su koraci. Počnimo s ispaljivanjem omiljenog koda i unesite sljedeće HTML kodove i spremite ga kao logo-gmail.html.
Gmail CSS logotip
Dodajte sljedeće stilove CSS-a resetirati zadane vrijednosti CSS-a.
.gmail-logo, .gmail-logo *, .gmail-logo *: prije, .gmail-logo *: nakon margin: 0; padding: 0; Pozadina: proziran; granica: 0; nacrt: 0; Prikaz: blok; font: normalna normalna 0/0 serif;
Sljedeći CSS kodovi daju nam crvenu pozadinu logotipa Gmaila i zaobljene strane.
.gmail-logo margin: 110px auto; pozadina: rgb (201, 44, 25); Širina: 600px; visina: 400 piksela; border-top: 4px čvrsti rgb (201, 44, 25); rub-dno: 4px čvrsti rgb (201, 44, 25); granična radijus: 10px; -moz granica-radijus: 10px; -webkit granica-radijus: 10px;
Zatim nastavljamo s izradom bijele kutije unutar crvene pozadine.
.gmail-logo .gmail-box preljev: skriven; float: lijevo; Širina: 440px; visina: 400 piksela; margina: 0 0 0 80px; Pozadina: bijela; granična radijus: 5px; -moz granica-radijus: 5px; -webkit granica-radijus: 5px;
Da bismo stvorili crveni "M" efekt, prvo ćemo stvoriti okvir s crvenom granicom.
.gmail-logo .gmail-box: prije position: relative; sadržaj: "; z-index: 1; pozadina: bijela; pluta: lijevo; širina: 320px; visina: 320px; granica: 100px solid rgb (201, 44, 25); margina: -310px 0 0 -40px; radijus: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg); -o-transform: rotate (45deg); );
Zatim nastavljamo skrivati prekomjerne strane, dajući nam kompletan "M" u crvenoj boji.
.gmail-logo .gmail-box preljev: skriven;
Sada ćemo dati dvije tanke crvene granice, dajući joj izgled omotnice.
.gmail-logo .gmail-box: nakon content: "; float: lijevo; širina: 360px; visina: 360px; granica: 2px solid rgb (201, 44, 25); margin: 10px 0 0 40px; -o-transform : rotirati (45deg); -webkit-transform: rotirati (45deg); -moz-transform: rotirati (45deg);
Skoro smo gotovi. Dodajmo gradijent u crvenu omotnicu.
.gmail-logo: nakon content: "; position: relative; z-index: 2; sadržaj:"; float: lijevo; margin-top: -404px; Širina: 600px; visina: 408px; Prikaz: blok; background: -moz-linear-gradient (vrh, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); pozadina: -o-linearnog gradijenta (vrh, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); pozadina: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, boja-stop (0%, rgba (255, 255, 255, 0.3)), / * boja-stop (30%, rgba (255, 255, 255) , 0.2)), * / color-stop (100%, rgba (255, 255, 255, 0.1));
Posljednje, ali ne i najmanje važno, dajmo mu drugačiju boju nakon što se okrene. Prije toga dodajte sljedeći HTML DOCTYPE
I sljedeće CSS stilove prije
.gmail-logo: lebdjenje pozadina: # 313131; border-color: # 313131; / * pokazivač: pokazivač; * / .gmail-logo: lebdi .gmail-box: prije border-color: # 313131; .gmail-logo: lebdi .gmail-box: nakon border-color: # 313131; border-bottom-color: #fff; granica-pravo-boja: #fff;
Pregled | Preuzmite izvornu datoteku
Gmail logotip # 2
Zatim ćemo izraditi Gmail logotip s druge perspektive s malim 3D efektom. Započet ćemo s osnovnom HTML oznakom.
Gmail logotip 2
Budući da logotip ima drugačiju perspektivu, počet ćemo ga malo rotirati i stvoriti potrebne slojeve (koje ćemo nazvati elementi) u slijedu.
# gmail-logo2 margin: 0 auto; Prikaz: blok; Širina: 380px; visina: 290px; -moz-transformacija: rotirati (6deg); -webkit-transformacija: rotirati (6deg); -O-transformacija: rotirati (6deg); transformacija: rotirati (6deg); # gmail-logo2 .element1 display: block; Širina: 380px; visina: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: lijevo; Prikaz: blok; Širina: 380px; visina: 290px; margina: -290px 0 0 0;
stil .element1 :: prije
# gmail-logo2 .element1 :: prije content: "; position: relative; margin: 2px 0 0 14px; float: lijevo; display: block; pozadina: rgb (201, 44, 25); širina: 30px; visina: 276px; -moz-transform: rotirati (3deg); -webkit-transform: rotirati (3deg); -o-transformirati: rotirati (3deg); transformirati: rotirati (3deg); radijus obruba: 22px 0 0 20px; -moz -bord-radius: 22px 0 0 20px, -bajkit-granica-radius: 22px 0 0 20px, 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); -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);
stil .element1 :: poslije
# gmail-logo2 .element1 :: after content: "; position: relative; margin: 40px 5px 0 0; float: desno; display: block, background: rgb (201, 44, 25), širina: 30px; -Moz-transform: rotirati (3deg); -webkit-transformirati: rotirati (3deg); -o-transformirati: rotirati (3deg); transformirati: rotirati (3deg); granični radijus: 0 18px 26px 0; -webkit - radijus granice: 0 18px 26px 0; -moz-border-radius: 0 18px 26px 0; kutija-sjena: -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-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 rg b (109, 10, 0);
stil .element2 :: prije
# gmail-logo2 .element2 :: prije content: "; margin: 22px 0 0 48px; float: lijevo; prikaz: blok; pozadina: rgb (201, 44, 25); širina: 315px; visina: 14px; -moz - transformirati: rotirati (6.8deg); -o-transformirati: rotirati (6.8deg); transformirati: rotirati (6.8deg), kutija-sjena: 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 -sjenilo: 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);
stil .element2 :: poslije
# gmail-logo2 .element2 :: after content: "; position: relative; margin: 230px 0 0 36px; float: lijevo; display: block, background: rgb (201, 44, 25), width: 310px; Kutija-sjena: 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);
stil .element3 :: prije
# gmail-logo2 .element3 :: prije content: "; position: relative; margin: 8px 0 0 42px; float: lijevo; display: block; pozadina: rgb (201, 44, 25); širina: 42px; visina: -Moz-transform: rotirati (3deg); -webkit-transformirati: rotirati (3deg); -o-transformirati: rotirati (3deg); transformirati: rotirati (3deg);
stil .element3 :: poslije
# gmail-logo2 .element3 :: after content: "; position: relative; margin: 40px 32px 0 0; float: desno; display: block, background: rgb (201, 44, 25), width: 22px; 236px; -moz-transform: rotirati (3.0deg); -webkit-transformirati: rotirati (3.0deg); -o-transformirati: rotirati (3.0deg); transformirati: rotirati (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-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);
stil .element4 :: prije
# gmail-logo2 .element4 :: prije content: "; position: relative; margin: -2px 0 0 130px; float: lijevo; prikaz: blok; pozadina: rgb (201, 44, 25), širina: 54px; : 192px; -moz-transform: rotate (-49deg); -webkit-transform: rotate (-49deg); -o-transform: rotate (-49deg); transformiraj: rotiraj (-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), -4 px 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);
stil .element4 :: poslije
# gmail-logo2 .element4 :: after content: "; position: relative; margin: 12px 88px 0 0; float: desno; display: block, background: rgb (201, 44, 25), širina: 54px; Radijus granice: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotate (53deg); -webkit-transform: rotirati (53deg); -o-transformirati: rotirati (53deg); transformirati: rotirati (53deg);
stil .element5 :: prije
# gmail-logo2 .element5 :: prije content: "; position: relative; margin: 115px 0 0 125px; float: lijevo; display: block; pozadina: rgb (201, 44, 25); širina: 2px; visina: -Moz-transform: rotirati (55deg); -o-transformirati: rotirati (55deg); -webkit-transformirati: rotirati (55deg); transformirati: rotirati (55deg);
stil .element5 :: poslije
# gmail-logo2 .element5 :: after position: relative; sadržaj: "; margin: 115px 0 0 150px; float: lijevo; prikaz: blok; pozadina: rgb (201, 44, 25); širina: 2px; visina: 150px; -moz-transform: rotate (-50deg); - webkit-transform: rotirati (-50deg); -o-transformirati: rotirati (-50deg); transformirati: rotirati (-50deg);
Podešavanje prioriteta z-index.
# gmail-logo2 .element1 :: prije z-index: 3; # gmail-logo2 .element1 :: nakon z-index: 1; / * # gmail-logo2 .element2 :: prije * / # gmail-logo2 .element2 :: nakon z-index: 2; # gmail-logo2 .element3 :: prije z-index: 5; # gmail-logo2 .element3 :: nakon z-index: 1; # gmail-logo2 .element4 :: prije z-index: 4; # gmail-logo2 .element4 :: nakon z-index: 3; / * # gmail-logo2 .element5 :: prije # gmail- logo2 .element5 :: poslije * /
Skoro smo gotovi. Vaš Gmail logotip trebao bi izgledati ovako:
Naposljetku, dajte mu drugačiju boju nakon što se okrene.
# gmail-logo2: hover * :: after, # gmail-logo2: hover * :: before pozadina: rgba (20, 196, 7, 1); # gmail-logo2: lebdi .element1 :: prije 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-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); -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 :: poslije 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-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); # gmail-logo2: hover .element2 :: prije 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), 0px 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 :: poslije 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), 0px 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 :: poslije 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), 0px 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 :: prije 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 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), -5 px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 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), -5 px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 rgb (10, 90, 4);
Pregled | Preuzmite izvornu datoteku
Napomena urednika: Ovaj post je napisao / la Irham Kendeni za Hongkiat.com. Irham, također poznat kao Indaam, web dizajner i programer iz Indonezije. On također voli CSS i WordPress razvoj teme.
