Kuidas luua Gmaili logo CSS3-ga
Paar kuud tagasi näitasin teile, kuidas luua RSS-kanali logo CSS3-ga. Ma arvasin, et oleks lõbus luua midagi veidi keerulisemat. Tänases postituses näitan teile, kuidas luua mitte üks, vaid kaks Gmaili logo varianti, kasutades ainult CSS3.
Otseteed:
- Gmaili logo CSS juhendaja # 1 Eelvaade
- Gmaili logo CSS juhendaja # 2 Eelvaade
Gmaili logo # 1
See esimene logo on lihtne ja üsna lihtne luua. Ilma edasiste juhisteta on siin sammud. Alustame oma lemmikkoodi redaktori käivitamisest ja sisestage järgmised HTML-koodid ning salvestage need logo-gmail.html.
Gmaili CSS logo
Lisage järgmised CSS-stiilid CSS-i vaikeväärtuste lähtestamiseks.
.gmail-logo, .gmail-logo *, .gmail-logo *: enne, .gmail-logo *: pärast margin: 0; polster: 0; taust: läbipaistev; piir: 0; ülevaade: 0; kuva: plokk; font: tavaline normaalne 0/0 serif;
Järgmised CSS-koodid annavad meile Gmaili logo punase tausta ja ümarad küljed.
.gmail-logo margin: 110px auto; taust: rgb (201, 44, 25); laius: 600 px; kõrgus: 400 px; border-top: 4px tahke rgb (201, 44, 25); alumine serv: 4xx tahke rgb (201, 44, 25); raadius: 10 px; -moz-border-radius: 10 px; -webkit-border-radius: 10px;
Seejärel jätkame punase taustaga valge kasti loomist.
.gmail-logo .gmail-box ülevool: peidetud; float: vasakule; laius: 440px; kõrgus: 400 px; marginaal: 0 0 0 80px; taust: valge; raadius: 5 px; -moz-border-radius: 5 px; -webkit-border-radius: 5px;
Punase "M" efekti loomiseks loome kõigepealt punase servaga kasti.
.gmail-logo .gmail-box: enne asukoht: suhteline; sisu: "; z-indeks: 1; taust: valge; float: vasakul; laius: 320 px; kõrgus: 320 px; piir: 100px tahke rgb (201, 44, 25); varu: -310px 0 -40px; raadius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: pöörake (45deg); -webkit-transform: pöörake (45deg); -o-transform: pöörake (45deg) );
Siis jätkame peitmist liigseid külgi, andes meile täieliku "M" punase värvi.
.gmail-logo .gmail-box ülevool: peidetud;
Nüüd anname kaks õhukest punast piiri, andes talle ümbriku välimuse.
.gmail-logo .gmail-box: pärast sisu: ", float: vasakul, laius: 360 pikslit, kõrgus: 360 px, piir: 2px tahke rgb (201, 44, 25); varu: 10px 0 0 40px; -o-transform : rotate (45deg); -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg);
Me oleme peaaegu valmis. Lisame punase ümbriku juurde mõne gradiendi.
.gmail-logo: pärast sisu: "; positsioon: suhteline; z-indeks: 2; sisu:"; float: vasakule; margin-top: -404px; laius: 600 px; kõrgus: 408px; kuva: plokk; taust: -moz-lineaarne gradient (ülemine, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); taust: -o-lineaarne gradient (ülemine, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); taust: -webkit-gradient (lineaarne, vasakul üleval, vasakul, värvipeatus (0%, rgba (255, 255, 255, 0,3)), / * värvipeatus (30%, rgba (255, 255, 255) 0,2)), * / värvipeatus (100%, rgba (255, 255, 255, 0,1)));
Lõpuks, kuid mitte vähem tähtsaks, andkem talle erineva värvi. Lisage eelnevalt järgmine HTML DOCTYPE
Ja järgmised CSS-stiilid varem
.gmail-logo: hover background: # 313131; äärevärv: # 313131; / * kursor: pointer; * / .gmail-logo: hover .gmail-box: enne border-color: # 313131; .gmail-logo: hover .gmail-box: pärast border-color: # 313131; piir-alumine värv: #fff; parempoolne värv: #fff;
Eelvaade | Laadige alla lähtefail
Gmaili logo # 2
Seejärel loome Gmaili logo teisest vaatenurgast, millel on vähe 3D-efekti. Alustame HTML-märgistusega.
Gmaili logo 2
Kuna logoga on teistsugune perspektiiv, siis alustame seda pisut pöörates ja loome vajalikud kihid (mida me neid nimetame) elemente) järjest.
# gmail-logo2 marginaal: 0 auto; kuva: plokk; laius: 380 px; kõrgus: 290 px; -moz-transform: pöörake (6deg); -webkit-transform: rotate (6deg); -o-transform: pöörake (6deg); transform: rotate (6deg); # gmail-logo2 .element1 kuva: plokk; laius: 380 px; kõrgus: 290 px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: vasakule; kuva: plokk; laius: 380 px; kõrgus: 290 px; varu: -290px 0 0 0;
Stiil .element1 :: enne
# gmail-logo2 .element1 :: enne content: "; positsioon: suhteline; marginaal: 2px 0 0 14px; float: vasakul; kuva: plokk; taust: rgb (201, 44, 25); laius: 30 px; kõrgus: 276px; -moz-transform: rotate (3deg); -webkit-transform: pöörata (3deg); -o-transform: pöörata (3deg); muundamine: pöörata (3deg); piiri-raadius: 22px 0 0 20px; -moz -piiri raadius: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; karp-vari: -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);
Stiil .element1 :: pärast
# gmail-logo2 .element1 :: after content: "; positsioon: suhteline; marginaal: 40px 5px 0 0; float: parem; kuva: plokk; taust: rgb (201, 44, 25); laius: 30 px; kõrgus: 238px; -moz-transform: rotate (3deg); -webkit-transform: pöörake (3deg); -o-transform: pöörake (3deg); transformeerimine: pöörake (3deg); piiri-raadius: 0 18px 26px 0; -webkit -raadiuse raadius: 0 18px 26px 0; -moz-border-radius: 0 18px 26px 0; 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); -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);
Stiil .element2 :: enne
# gmail-logo2 .element2 :: before content: "; marginaal: 22px 0 0 48px; float: vasakul; kuva: plokk; taust: rgb (201, 44, 25); laius: 315px; kõrgus: 14px; -moz -transform: pöörake (6.8deg); -webkit-transformeeri: pöörake (6.8deg); -o-transformeeri: pööra (6.8deg); transformeeri: pööra (6.8deg); kasti vari: 0 1px 0 rgb 10, 0), 0 2px 0 rgb (109, 10, 0), 0px 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); -vari: 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);
Stiil .element2 :: pärast
# gmail-logo2 .element2 :: after content: "; positsioon: suhteline; marginaal: 230px 0 0 36px; float: vasakul; kuva: plokk; taust: rgb (201, 44, 25); laius: 310 px; kõrgus: Karpi vari: 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 6 px 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);
Stiil .element3 :: enne
# gmail-logo2 .element3 :: enne sisu: "; positsioon: suhteline; marginaal: 8px 0 0 42px; float: vasakul; kuva: plokk; taust: rgb (201, 44, 25); laius: 42 pikslit; -Moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: pöörata (3deg); transform: rotate (3deg);
Stiil .element3 :: pärast
# gmail-logo2 .element3 :: pärast sisu: "; positsioon: suhteline; marginaal: 40px 32px 0 0; ujuk: parem; kuva: plokk; taust: rgb (201, 44, 25); laius: 22px; kõrgus: -Moz-transform: rotate (3.0deg); -webkit-transform: rotate (3.0deg); -o-transform: pööra (3.0deg); muundamine: pöörake (3.0deg); rgb (109, 10, 0), 0px 0 rgb (109, 10, 0), 0pp0 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) 0pp0 rgb (109, 10, 0), 0pp0 rgb (109, 10, 0), 0pp0 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);
Stiil .element4 :: enne
# gmail-logo2 .element4 :: before content: "; positsioon: suhteline; marginaal: -2px 0 0 130px; float: vasakul; kuva: plokk; taust: rgb (201, 44, 25); laius: 54 px; kõrgus : 192px; -moz-transform: rotate (-49deg); -webkit-transformeerimine: pöörake (-49deg); -o-transform: pöörake (-49deg); muundamine: pöörake (-49deg); 0 0 rgb (109, 10, 0), -2px 0 rgb (109, 10, 0), -3px 0 rgb (109, 10, 0), -4px 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 rgb (109, 10, 0), -8px 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 rgb (109, 10, 0), -6px 0 rgb (109, 10, 0), -7px 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 rgb (109, 10, 0), -5px 0 rgb (109, 10, 0), -6px 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 rgb (109, 10, 0);
Stiil .element4 :: pärast
# gmail-logo2 .element4 :: after content: "; positsioon: suhteline; marginaal: 12px 88px 0 0; float: parem; kuva: plokk; taust: rgb (201, 44, 25); laius: 54 px; kõrgus: 186px; raadius: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: pööra (53deg); -webkit-transform: pöörake (53deg); -o-transform: pöörake (53deg); transform: pöörake (53deg);
Stiil .element5 :: enne
# gmail-logo2 .element5 :: enne sisu: "; positsioon: suhteline; marginaal: 115px 0 0 125px; float: vasakul; kuva: plokk; taust: rgb (201, 44, 25); laius: 2px; -Moz-transform: rotate (55deg); -o-transform: pööra (55deg); -webkit-transform: rotate (55deg); transform: rotate (55deg);
Stiil .element5 :: pärast
# gmail-logo2 .element5 :: after asukoht: suhteline; sisu: "; marginaal: 115px 0 0 150px; ujuk: vasakule; kuva: plokk; taust: rgb (201, 44, 25); laius: 2px; kõrgus: 150 px; webkit-transform: rotate (-50deg); -o-transform: pöörake (-50deg); transformeeri: pöörake (-50deg);
Prioriteedi kohandamine z-indeks.
# gmail-logo2 .element1 :: enne z-index: 3; # gmail-logo2 .element1 :: pärast z-index: 1; / * # gmail-logo2 .element2 :: enne * / # gmail-logo2 .element2 :: pärast z-index: 2; # gmail-logo2 .element3 :: enne z-index: 5; # gmail-logo2 .element3 :: pärast z-index: 1; # gmail-logo2 .element4 :: enne z-index: 4; # gmail-logo2 .element4 :: pärast z-index: 3; / * # gmail-logo2 .element5 :: enne # gmail- logo2 .element5 :: pärast * /
Me oleme peaaegu valmis. Teie Gmaili logo peaks nägema midagi sellist:
Lõpuks anname talle erineva värvi.
# gmail-logo2: hover * :: after, # gmail-logo2: hover * :: enne taust: rgba (20, 196, 7, 1); # gmail-logo2: hover .element1 :: enne 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 :: pärast 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 :: enne 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 :: pärast 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 :: pärast 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 :: enne 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 rgb (10, 90, 4), -6px 0 rgb (10, 90, 4), -7px 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), -5px 0 rgb (10, 90, 4), -6px 0 rgb (10, 90, 4), -7px 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 rgb (10, 90, 4), -6px 0 rgb (10, 90, 4), -7px 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4);
Eelvaade | Laadige alla lähtefail
Toimetaja märkus: See postitus on kirjutatud Irham Kendeni Hongkiat.com jaoks. Irham, tuntud ka kui Indaam, on Indoneesia veebidisainer ja arendaja. Ta armastab ka CSS ja WordPress teema arendamist.
