Kaip sukurti „Gmail“ logotipą su CSS3

Prieš porą mėnesių aš jums parodiau, kaip sukurti RSS kanalo logotipą su CSS3. Supratau, kad būtų smagu sukurti kažką šiek tiek sudėtingiau. Šiandieniniame pranešime aš jums parodysiu, kaip sukurti ne vieną, bet du „Gmail“ logotipo variantus, naudodami tik CSS3.

Nuorodos į:

• „Gmail“ logotipas CSS pamoka # 1 Peržiūra
• „Gmail“ logotipas CSS pamoka # 2 Peržiūra

„Gmail“ logotipas # 1

Šis pirmasis logotipas yra paprastas ir gana lengvas. Be tolesnių veiksmų, čia yra žingsniai. Pradėkime nuo mėgstamo kodo redaktoriaus kūrimo ir įveskite šiuos HTML kodus ir išsaugokite juos kaip logo-gmail.html.

Tarp šių CSS stilių pridėkite iš naujo nustatyti numatytasis CSS reikšmes.

.gmail-logo, .gmail-logo *, .gmail-logo *: prieš, .gmail-logo *: po margin: 0; įdėklas: 0; fonas: skaidrus; siena: 0; kontūras: 0; ekranas: blokas; šriftas: normalus normalus 0/0 serifas; 

Šie CSS kodai suteikia „Gmail“ logotipo raudoną foną ir apvalias puses.

 .gmail-logo margin: 110px auto; fonas: rgb (201, 44, 25); plotis: 600px; aukštis: 400px; krašto viršus: 4px kietas rgb (201, 44, 25); apačioje: 4px kietas rgb (201, 44, 25); pasienio spindulys: 10px; -moz-border-spindulys: 10px; -webkit-border-radius: 10px; 

Tada mes toliau kuriame baltą langelį raudoname fone.

 .gmail-logo .gmail-box overflow: paslėpta; plūdė: kairė; plotis: 440px; aukštis: 400px; paraštė: 0 0 0 80px; fonas: baltas; pasienio spindulys: 5px; -moz-border-spindulys: 5px; -webkit-border-radius: 5px; 

Norint sukurti raudoną „M“ efektą, mes pirmą kartą sukursime langelį su raudonu kraštu.

 .gmail-logo .gmail-box: prieš pozicija: santykinis; turinys: "; z-indeksas: 1; fonas: baltas; plūdės: kairėje; plotis: 320 piks. aukštis: 320 px; siena: 100px kietoji rgb (201, 44, 25); paraštė: -310px 0 0 -40px; spindulys: 10px; -moz-border-spindulys: 10px; -webkit-border-spindulys: 10px; -moz-transform: pasukti (45deg); -webkit-transformacija: pasukti (45deg); -o-transformuoti: pasukti );

Tada mes tęsiame paslėpti pernelyg dideles puses, suteikdami mums pilną „M“ raudoną spalvą.

 .gmail-logo .gmail-box overflow: paslėpta; 

Dabar duokime du ploną raudoną sieną, suteikdami jai vokų išvaizdą.

 .gmail-logo .gmail-box: po content: "; float: left; plotis: 360px; aukštis: 360 piks., kraštas: 2px kietas rgb (201, 44, 25), paraštė: 10px 0 0 40px; : pasukti (45deg); -webkit-transform: pasukti (45deg); -moz-transform: pasukti (45deg);

Mes beveik baigėme. Pridėkime raudoną voką tam tikru nuolydžiu.

 .gmail-logo: po content: "; pozicija: santykinis; z-index: 2; turinys:"; plūdė: kairė; margin-top: -404px; plotis: 600px; aukštis: 408px; ekranas: blokas; fonas: -moz-tiesinis gradientas (viršutinis, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); fonas: -o-tiesinis gradientas (viršutinis, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); fonas: -webkit-gradientas (tiesinis, kairysis viršuje, kairėje apačioje, spalvų sustojimas (0%, rgba (255, 255, 255, 0.3)), / * spalvų stabdymas (30%, rgba (255, 255, 255) , 0,2)), * / spalvos sustojimas (100%, rgba (255, 255, 255, 0,1)));  

Paskutinis, bet ne mažiau svarbus, suteiksime jai kitokią spalvą po to, kai svyruosime. Prieš tai pridėkite šį HTML DOCTYPE

Ir prieš tai buvę CSS stiliai

 .gmail-logotipas: pakimba fonas: # 313131; spalva: # 313131; / * žymeklis: žymeklis; * / .gmail-logotipas: hover .gmail-box: prieš border-color: # 313131;  .gmail-logotipas: hover .gmail-box: po border-color: # 313131; krašto apačios spalva: #fff; dešinė-dešinė: #fff; 

Peržiūra | Atsisiųsti šaltinio failą

„Gmail“ logotipas # 2

Be to, mes sukursime „Gmail“ logotipą iš kitos perspektyvos su nedideliu 3D efektu. Pradėsime nuo pagrindinio HTML žymėjimo.

Kadangi logotipas turi kitokią perspektyvą, pradėsime jį šiek tiek pasukdami ir sukurdami reikiamus sluoksnius (kuriuos mes juos vadinsime) elementus) sekoje.

 # gmail-logo2 margin: 0 auto; ekranas: blokas; plotis: 380px; aukštis: 290px; -moz-transform: pasukti (6deg); -webkit-transformacija: pasukti (6deg); -o-transformuoti: pasukti (6deg); transformuoti: pasukti (6deg);  # gmail-logo2 .element1 display: block; plotis: 380px; aukštis: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; ekranas: blokas; plotis: 380px; aukštis: 290px; paraštė: -290px 0 0 0;  

Stilius .element1 :: anksčiau

 # gmail-logo2 .element1 :: before content: "; pozicija: santykinė; paraštė: 2px 0 0 14px; plūdė: kairė; ekranas: blokas; fonas: rgb (201, 44, 25); plotis: 30px; aukštis: -Moz-transformuoti: pasukti (3deg); -webkit-transformuoti: pasukti (3deg); -o-transformuoti: pasukti (3deg); transformuoti: pasukti (3deg), pasienio spindulį: 22px 0 0 20px; -moz -paribio spindulys: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; dėžutės šešėlis: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb ), -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); 

Stilius .element1 :: po

 # gmail-logo2 .element1 :: po content: "; pozicija: santykinis; marža: 40px 5px 0 0; plūdė: dešinė; ekranas: blokas; fonas: rgb (201, 44, 25); plotis: 30px; aukštis: 238px; -moz-transform: pasukti (3deg); -webkit-transformuoti: pasukti (3deg); -o-transformuoti: pasukti (3deg); transformuoti: pasukti (3deg), pasienio spindulį: 0 18px 26px 0; -riba spindulys: 0 18px 26px 0; -moz-border-spindulys: 0 18px 26px 0; dėžutės šešėlis: -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);  

Stilius .element2 :: prieš

 # gmail-logo2 .element2 :: before content: "; paraštė: 22px 0 0 48px; float: kairė; ekranas: blokas; fonas: rgb (201, 44, 25); plotis: 315px; aukštis: 14px; -moz - transformuoti: pasukti (6.8deg); -webkit-transformuoti: pasukti (6.8deg); -o-transformuoti: pasukti (6.8deg); transformuoti: pasukti (6.8deg); 10, 0), 0 2px 0 rgb (109, 10, 0), 0px0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0) 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);

Stilius .element2 :: po

 # gmail-logo2 .element2 :: po content: "; pozicija: santykinis; paraštė: 230px 0 0 36px; plūdės: kairė; ekranas: blokas; fonas: rgb (201, 44, 25); plotis: 310px; aukštis: 12px; 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);

Stilius .element3 :: anksčiau

 # gmail-logo2 .element3 :: before content: "; pozicija: santykinė; paraštė: 8px 0 0 42px; plūdė: kairė; ekranas: blokas; fonas: rgb (201, 44, 25); plotis: 42px; aukštis: 268px; -moz-transform: rotate (3deg); -webkit-transformacija: pasukti (3deg); -o-transformuoti: pasukti (3deg); transformuoti: pasukti (3deg);

Stilius .element3 :: po

 # gmail-logo2 .element3 :: po content: "; pozicija: santykinis; paraštė: 40px 32px 0 0; plūdė: dešinė; ekranas: blokas; fonas: rgb (201, 44, 25); plotis: 22px; aukštis: 236px; -moz-transform: pasukti (3.0deg); -webkit-transformuoti: pasukti (3.0deg); -o-transformuoti: pasukti (3.0deg), transformuoti: pasukti (3.0deg), dėžutės šešėlį: 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);

Stilius .element4 :: anksčiau

 # gmail-logo2 .element4 :: before content: "; pozicija: santykinė; marža: -2px 0 0 130px; plūdė: kairė; ekranas: blokas; fonas: rgb (201, 44, 25); plotis: 54px; aukštis : 192px; -moz-transform: pasukti (-49deg); -webkit-transformuoti: pasukti (-49deg); -o-transformuoti: pasukti (-49deg); transformuoti: pasukti (-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 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 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);

Stilius .element4 :: po

 # gmail-logo2 .element4 :: po content: "; pozicija: santykinis; paraštė: 12px 88px 0 0; plūdė: dešinė; ekranas: blokas; fonas: rgb (201, 44, 25); plotis: 54px; aukštis: 186px; sienos spindulys: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: pasukti (53deg); -webkit-transform: pasukti (53deg); -o-transformuoti: pasukti (53deg), transformuoti: pasukti (53deg);

Stilius .element5 :: prieš

# gmail-logo2 .element5 :: before content: "; pozicija: santykinė; paraštė: 115px 0 0 125px; plūdė: kairė; ekranas: blokas; fonas: rgb (201, 44, 25); -Moz-transformuoti: pasukti (55deg); -o-transformuoti: pasukti (55deg); -webkit-transformaciją: pasukti (55deg); transformuoti: pasukti (55deg);

Stilius .element5 :: po

 # gmail-logo2 .element5 :: po pozicija: santykinis; turinys: "; skirtumas: 115px 0 0 150px; plūdės: kairėje; ekranas: blokas; fonas: rgb (201, 44, 25); plotis: 2px; aukštis: 150 px; webkit-transform: rotate (-50deg); -o-transformuoti: pasukti (-50deg); transformuoti: pasukti (-50deg);

Koreguojant. \ T z-indeksas.

 # gmail-logo2 .element1 :: prieš z-index: 3; # gmail-logo2 .element1 :: po z-index: 1; / * # gmail-logo2 .element2 :: prieš  * / # gmail-logo2 .element2 :: po z-index: 2; # gmail-logo2 .element3 :: prieš z-index: 5; # gmail-logo2 .element3 :: po z-index: 1; # gmail-logo2 .element4 :: prieš z-index: 4; # gmail-logo2 .element4 :: po z-index: 3; / * # gmail-logo2 .element5 :: prieš  # gmail- logo2 .element5 :: po  * /

Mes beveik baigėme. „Gmail“ logotipas turėtų atrodyti taip:

Galiausiai, suteiksime jai kitokią spalvą po to, kai svyruosime.

 # gmail-logo2: hover * :: after, # gmail-logo2: hover * :: prieš fonas: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: prieš 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 :: po 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 :: 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 :: po 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 :: po 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 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); 

Peržiūra | Atsisiųsti šaltinio failą

Redaktoriaus pastaba: Šį įrašą parašė Irham Kendeni už Hongkiat.com. Irham, taip pat žinomas kaip Indaam, yra interneto dizaineris ir kūrėjas iš Indonezijos. Jis taip pat mėgsta CSS ir WordPress temos kūrimą.