Kā izveidot Gmail logo ar CSS3

Pirms pāris mēnešiem es parādīju, kā izveidot RSS plūsmas logotipu ar CSS3. Es sapratu, ka būtu jautri radīt kaut ko sarežģītāku. Šodienas ziņojumā es jums parādīšu, kā izveidot ne vienu, bet divas Gmail logo variācijas, izmantojot tikai CSS3.

Īsceļi uz:

• Gmail logo CSS apmācība # 1 Priekšskatījums
• Gmail logo CSS apmācība # 2 Priekšskatījums

Gmail logo # 1

Šis pirmais logotips ir vienkāršs un viegli izveidojams. Bez turpmākas norādes šeit ir norādīti soļi. Sāksim ar savu iecienītāko kodu redaktoru un ievadiet šādus HTML kodus un saglabājiet to kā logo-gmail.html.

Pievienojiet šādus CSS stilus lai atiestatītu noklusējuma CSS vērtības.

.gmail-logo, .gmail-logo *, .gmail-logo *: pirms, .gmail-logo *: pēc margin: 0; polsterējums: 0; fons: caurspīdīgs; robeža: 0; kontūra: 0; displejs: bloks; fonts: normāls normāls 0/0 serifs; 

Šādi CSS kodi sniedz mums Gmail logo sarkano fonu un noapaļotās puses.

 .gmail-logo margin: 110px auto; fons: rgb (201, 44, 25); platums: 600px; augstums: 400px; robeža: 4px cietā rgb (201, 44, 25); robežu apakšā: 4px cietā rgb (201, 44, 25); robežu rādiuss: 10px; -moz-border-rādiuss: 10px; -webkit-robežu rādiuss: 10px; 

Tad mēs turpinām izveidot balto lodziņu sarkanajā fonā.

 .gmail-logo .gmail-box overflow: paslēpts; peldēt: pa kreisi; platums: 440px; augstums: 400px; starpība: 0 0 0 80px; fons: balts; robežu rādiuss: 5px; -moz-border-rādiuss: 5px; -webkit-robežu rādiuss: 5px; 

Lai izveidotu sarkano "M" efektu, vispirms izveidosim lodziņu ar sarkanu apmali.

 .gmail-logo .gmail-box: pirms pozīcija: relatīvais; saturs: "; z-indekss: 1; fons: balts; pludiņš: pa kreisi; platums: 320px; augstums: 320px; robeža: 100px cietā rgb (201, 44, 25); starpība: -310px 0 -40px; rādiuss: 10px; -moz-border-radius: 10px; -webkit-robežu rādiuss: 10px; -moz-transform: pagriezt (45deg); -webkit-transformācija: pagriezt (45deg); -o-transformēt: pagriezt );

Tad mēs turpinām slēpt pārmērīgās puses, sniedzot mums pilnīgu "M" sarkanā krāsā.

 .gmail-logo .gmail-box overflow: paslēpts; 

Tagad dodam divas plānas sarkanas robežas, dodot tai aploksnes izskatu.

 .gmail-logo .gmail-box: pēc saturs: ", pludiņš: pa kreisi, platums: 360px, augstums: 360 pikseļi, robeža: 2px cietā rgb (201, 44, 25), starpība: 10px 0 0 40px; -o-transform : rotēt (45deg); -webkit-transform: rotēt (45deg); -moz-transform: rotēt (45deg);

Mēs esam gandrīz pabeigti. Pievienosim sarkano aploksni ar kādu gradientu.

 .gmail-logo: pēc saturs: "; pozīcija: relatīvais; z-indekss: 2; saturs:"; peldēt: pa kreisi; margin-top: -404px; platums: 600px; augstums: 408px; displejs: bloks; fons: -moz-lineārs gradients (augšā, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); fons: -o-lineārs gradients (augšā, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); fons: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0%, rgba (255, 255, 255, 0.3)), / * krāsu apstāšanās (30%, rgba (255, 255, 255) , 0,2)), * / krāsu apstāšanās (100%, rgba (255, 255, 255, 0,1)));  

Visbeidzot, bet ne mazāk svarīgi, dodam tai atšķirīgu krāsu pēc svārstībām. Pievienojiet šādu HTML DOCTYPE iepriekš

Un šādi CSS stili iepriekš

 .gmail-logo: lidināties fons: # 313131; rāmja krāsa: # 313131; / * kursors: rādītājs; * / .gmail-logo: hover .gmail-box: pirms border-color: # 313131;  .gmail-logo: hover .gmail-box: pēc border-color: # 313131; robežu apakšējā krāsa: #fff; robežu labā krāsa: #fff; 

Priekšskatījums Lejupielādēt avota failu

Gmail logo # 2

Tālāk mēs izveidosim Gmail logo no citas perspektīvas ar nelielu 3D efektu. Mēs sāksim ar pamata HTML atzīmi.

Tā kā logotipam ir atšķirīga perspektīva, mēs sākīsim to nedaudz pagriežot un izveidosim vajadzīgos slāņus (kurus mēs tos saucam elementiem) secībā.

 # gmail-logo2 margin: 0 auto; displejs: bloks; platums: 380px; augstums: 290px; -moz-transform: rotēt (6deg); -webkit-transform: rotēt (6deg); -o-transformēt: pagriezt (6deg); transformēt: pagriezt (6deg);  # gmail-logo2 .element1 displejs: bloks; platums: 380px; augstums: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: pa kreisi; displejs: bloks; platums: 380px; augstums: 290px; starpība: -290px 0 0 0;  

Stils .element1 :: pirms

 # gmail-logo2 .element1 :: pirms saturs: "; pozīcija: relatīvais; starpība: 2px 0 0 14px; peldošs: pa kreisi; displejs: bloks; fons: rgb (201, 44, 25); platums: 30px; augstums: 276px; -moz-transform: rotēt (3deg); -webkit-transformēt: pagriezt (3deg); -o-transformēt: pagriezt (3deg); pārveidot: pagriezt (3deg), robežu rādiusu: 22px 0 0 20px; - robeža-rādiuss: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; kastes ēna: -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); 

Stils .element1 :: pēc

 # gmail-logo2 .element1 :: pēc saturs: "; pozīcija: relatīvā; starpība: 40px 5px 0 0; pludiņš: pa labi; displejs: bloks; fons: rgb (201, 44, 25); platums: 30px; augstums: 238px; -moz-transform: rotēt (3deg); -webkit-transformēt: pagriezt (3deg); -o-transformēt: pagriezt (3deg); pārveidot: pagriezt (3deg); pierobežas rādiusu: 0 18px 26px 0; -režis: 0 18px 26px 0; -moz-border-rādiuss: 0 18px 26px 0; kastes ēna: -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);  

Stils .element2 :: pirms

 # gmail-logo2 .element2 :: before content: "; starpība: 22px 0 0 48px; pludiņš: pa kreisi; displejs: bloks; fons: rgb (201, 44, 25); platums: 315px; augstums: 14px; -moz -transformēt: pagriezt (6.8deg); -webkit-transformēt: pagriezt (6.8deg); -o-transformēt: pagriezt (6.8deg), pārveidot: pagriezt (6.8deg); kastes ēnu: 0 1px 0 rgb 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);

Stils .element2 :: pēc

 # gmail-logo2 .element2 :: pēc saturs: "; pozīcija: relatīvā; starpība: 230px 0 0 36px; pludiņš: pa kreisi; displejs: bloks; fons: rgb (201, 44, 25); platums: 310px; augstums: 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);

Stils .element3 :: pirms

 # gmail-logo2 .element3 :: pirms saturs: "; stāvoklis: relatīvais; starpība: 8px 0 0 42px; pludiņš: pa kreisi; displejs: bloks; fons: rgb (201, 44, 25); platums: 42px; augstums: 268px; -moz-transform: rotēt (3deg); -webkit-transform: rotēt (3deg); -o-transformēt: pagriezt (3deg); transformēt: pagriezt (3deg);

Stils .element3 :: pēc

 # gmail-logo2 .element3 :: pēc saturs: "; stāvoklis: relatīvais; starpība: 40px 32px 0 0; pludiņš: pa labi; displejs: bloks; fons: rgb (201, 44, 25); platums: 22px; augstums: 236px; -moz-transform: rotēt (3.0deg); -webkit-transformēt: pagriezt (3.0deg); -o-transformēt: pagriezt (3.0deg); pārveidot: pagriezt (3.0deg); kastes ēnu: 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);

Stils .element4 :: pirms

 # gmail-logo2 .element4 :: before content: "; pozīcija: relatīvā; starpība: -2px 0 0 130px; pludiņš: pa kreisi; displejs: bloks; fons: rgb (201, 44, 25); platums: 54px; augstums : -Moz-transform: rotēt (-49deg); -webkit-transformēt: pagriezt (-49deg); -o-transformēt: pagriezt (-49deg); pārveidot: pagriezt (-49deg); 0 0 rgb (109, 10, 0), -2px 0 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 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);

Stils .element4 :: pēc

 # gmail-logo2 .element4 :: pēc saturs: "; pozīcija: relatīvā; starpība: 12px 88px 0 0; pludiņš: pa labi; displejs: bloks; fons: rgb (201, 44, 25); platums: 54px; augstums: 186px; robežu rādiuss: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: pagriezt (53deg); -webkit-transform: pagriezt (53deg); -o-transformēt: pagriezt (53deg); transformēt: pagriezt (53deg);

Stils .element5 :: pirms

# gmail-logo2 .element5 :: pirms saturs: "; pozīcija: relatīvā; starpība: 115px 0 0 125px; pludiņš: pa kreisi; displejs: bloks; fons: rgb (201, 44, 25); -Moz-transform: rotēt (55deg); -o-transformēt: pagriezt (55deg); -webkit-transformēt: pagriezt (55deg); transformēt: pagriezt (55deg);

Stils .element5 :: pēc

 # gmail-logo2 .element5 :: pēc pozīcija: relatīvais; saturs: "; robeža: 115px 0 0 150px; pludiņš: pa kreisi; displejs: bloks; fons: rgb (201, 44, 25); platums: 2px; augstums: 150px; webkit-transform: rotēt (-50deg); -o-transformēt: pagriezt (-50deg); transformēt: pagriezt (-50deg);

Prioritātes prioritātes pielāgošana. \ T z-indekss.

 # gmail-logo2 .element1 :: pirms z-index: 3; # gmail-logo2 .element1 :: pēc z-index: 1; / * # gmail-logo2 .element2 :: pirms  * / # gmail-logo2 .element2 :: pēc z-index: 2; # gmail-logo2 .element3 :: pirms z-index: 5; # gmail-logo2 .element3 :: pēc z-index: 1; # gmail-logo2 .element4 :: pirms z-index: 4; # gmail-logo2 .element4 :: pēc z-index: 3; / * # gmail-logo2 .element5 :: pirms  # gmail- logo2 .element5 :: pēc  * /

Mēs esam gandrīz pabeigti. Gmail logotipam vajadzētu izskatīties šādi:

Visbeidzot, dodam tai citu krāsu pēc svārstībām.

 # gmail-logo2: lidināties * :: pēc, # gmail-logo2: lidināties * :: pirms fons: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: pirms 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ēc 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 :: pirms 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ēc 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ēc 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 :: pirms 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 0 rgb (10, 90, 4), -6px 0 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 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); 

Priekšskatījums Lejupielādēt avota failu

Redaktora piezīme: Šo ziņu raksta Irham Kendeni par Hongkiat.com. Irham, pazīstams arī kā Indaam, ir web dizainers un attīstītājs no Indonēzijas. Viņš arī mīl CSS un WordPress tēmas izstrādi.