Cum se creează logo-ul Gmail cu CSS3

În urmă cu câteva luni am prezentat cum să creați un logo RSS cu CSS3. M-am gândit că ar fi distractiv creând ceva mai complex. În postul de astăzi, vă voi arăta cum să creați nu una, ci două variante ale logo-ului Gmail folosind doar CSS3.

Comenzi rapide la:

• Gmail logo CSS tutorial # 1 | previzualizare
• Gmail logo CSS tutorial # 2 previzualizare

Gmail logo # 1

Acest prim logo este simplu și ușor de creat. Fără alte cuvinte, iată pașii. Să începem cu arhivarea editorului de coduri preferate și să introducem următoarele coduri HTML și să le salvăm ca logo-gmail.html.

Adăugați următoarele stiluri CSS între pentru a reseta valorile prestabilite ale CSS.

.gmail-logo, .gmail-logo *, .gmail-logo *: înainte, .gmail-logo *: după margine: 0; padding: 0; fundal: transparent; de frontieră: 0; schiță: 0; display: block; font: normal normal 0/0 serif; 

Următoarele coduri CSS ne dau fondul roșu al logo-ului Gmail și laturile rotunjite.

 .gmail-logo margine: 110px auto; fundal: rgb (201, 44, 25); lățime: 600px; height: 400px; vârf de frontieră: rgb solid 4px (201, 44, 25); margine de fund: 4px solid rgb (201, 44, 25); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Apoi continuăm să creăm cutia albă în fundal roșu.

 .gmail-logo .gmail-box overflow: ascuns; plutește la stânga; lățime: 440px; height: 400px; margine: 0 0 0 80px; fundal: alb; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 

Pentru a crea efectul roșu "M", vom crea mai întâi o casetă cu margine roșie.

 .gmail-logo .gmail-box: înainte de position: relative; (zecimal): 1, fundal: alb, float: stânga, lățime: 320px, înălțime: 320px, graniță: 100px solid rgb (201, 44, 25) raza: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); );

Apoi continuăm să ascundem laturile excesive, oferindu-ne un "M" complet în culoarea roșie.

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

Acum, să dăm două granițe roșii subțiri, oferindu-i aspectul plicului.

 .gmail-logo.gmail-box: după content: "; float: left; width: 360px; height: 360px; border: 2px solid rgb (201, 44, 25); : rotate (45deg); -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg);

Aproape am terminat. Să adăugăm un gradient plicului roșu.

 .gmail-logo: după content: "; position: relative; z-index: 2; conținut:"; plutește la stânga; margin-top: -404px; lățime: 600px; height: 408px; display: block; fundal: -moz-linear-gradient (255, 255, 255, 255, 255, 255, 255, 255, 255, ) 100%); (255, 255, 255, 0,35) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba ) 100%); fundal: -webkit-gradient (liniar, stânga sus, jos stânga, oprire culoare (0%, rgba (255, 255, 255, , 0,2)), * / stop color (100%, rgba (255, 255, 255, 0,1));  

Nu în ultimul rând, să-i dăm o culoare diferită în cazul în care este plutind. Adăugați mai înainte HTML DOCTYPE

Și următoarele stiluri CSS înainte

 .gmail-logo: hover fundal: # 313131; border-color: # 313131; / * cursor: pointer; * / .gmail-logo: hover .gmail-box: înainte de border-color: # 313131;  .gmail-logo: hover .gmail-box: după border-color: # 313131; border-bottom-culoare: #fff; border-dreapta-culoare: #fff; 

Previzualizare | Descărcați fișierul sursă

Gmail logo # 2

Apoi, vom crea logo-ul Gmail dintr-o altă perspectivă cu un efect 3D mic. Vom începe cu marcajul HTML de bază.

Deoarece logo-ul are o altă perspectivă, vom începe prin rotirea ei puțin și crearea straturilor necesare (pe care le vom numi element) in secvență.

 # gmail-logo2 marja: 0 auto; display: block; lățime: 380px; height: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); o- transforma: roti (6deg); transforma: rotate (6deg);  # gmail-logo2.element1 afișare: bloc; lățime: 380px; height: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; display: block; lățime: 380px; height: 290px; marcă: -290px 0 0 0;  

Coafura .element1 :: înainte

 # gmail-logo2 .element1 :: înainte de conținut: "; poziție: relativă; margine: 2px 0 0 14px; float: stânga; afișare: bloc; fundal: rgb (201, 44, 25) 276px; -moz-transform: rotate (3deg); -webkit-transform: rotire (3deg); -o-transform: rotate (3deg); -pagina-raza: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; box-shadow: -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 , 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb -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 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); 

Coafura .element1 :: după

 # gmail-logo2 .element1 :: după content: "; position: relative; margin: 40px 5px 0 0; float: right; 238px; -moz-transform: rotate (3deg); -webkit-transform: rotire (3deg); -o-transform: rotate (3deg); - raza de frontieră: 0 18px 26px 0; -moz-border-radius: 0 18px 26px 0; box-shadow: -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 , 0), -6px 7px 0 rgb (109, 10, 0); -moz-box-shadow: -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 ), -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 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb -6px 7px 0 rg b (109, 10, 0);  

Coafura .element2 :: înainte

 # gmail-logo2 .element2 :: înainte de content: "; margin: 22px 0 0 48px; float: stânga; afișare: bloc; fundal: rgb (201, 44, 25) - transforma: roti (6.8deg); -webkit-transform: roti (6.8deg); -o-transform: rotate (6.8deg) 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 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) 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) (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);

Coafura .element2 :: după

 # gmail-logo2 .element2 :: după content: "; position: relative; margin: 230px 0 0 36px; float: left; display: block; (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 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 0px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

Coafura .element3 :: înainte

 # gmail-logo2 .element3 :: înainte de conținut: "; poziție: relativă; margine: 8px 0 0 42px; float: stânga; afișare: bloc; fundal: rgb (201, 44, 25) (3deg); -o-transform: rotate (3deg); transform: rotate (3deg);

Coafura .element3 :: după

 # gmail-logo2.element3 :: după content: "; position: relative; margin: 40px 32px 0 0 float: right; display: block; background: rgb (201, 44, 25) 236px; -moz-transform: rotire (3.0deg); -webkit-transform: rotire (3.0deg); -o-transform: rotate (3.0deg); 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) 109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 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) 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

Coafura .element4 :: înainte

 # gmail-logo2 .element4 :: înainte de content: "; position: relative; margin: -2px 0 0 130px; float: stânga; afișare: bloc; fundal: rgb (201, 44, 25); : 192px; -moz-transform: rotate (-49deg); -webkit-transform: rotire (-49deg); -o-transform: rotate (-49deg); 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (0, 0, 0), 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb ); -moz-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0) 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb -10 0 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 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) 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);

Coafura .element4 :: după

 # gmail-logo2 .element4 :: după content: "; position: relative; margin: 12px 88px 0 0; float: right; display: block; 186px; raza de graniță: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotate (53deg); -webkit-transform: rotire (53deg); -o-transform: rotire (53deg); transformare: rotire (53deg);

Coafura .element5 :: înainte

# gmail-logo2 .element5 :: înainte de content: "; position: relative; margin: 115px 0 0 125px; float: left; display: block; 150px; -moz-transform: rotire (55deg); -o-transform: rotire (55deg); -webkit-transform: rotire (55deg);

Coafura .element5 :: după

 # gmail-logo2 .element5 :: după poziție: relativă; (201, 44, 25); lățime: 2px; înălțime: 150px; -moz-transform: rotate (-50deg); - webkit-transform: rotire (-50deg); -o-transform: rotire (-50deg); transform: rotate (-50deg);

Ajustarea priorității z-index.

 # gmail-logo2 .element1 :: înainte de z-index: 3; # gmail-logo2 .element1 :: după z-index: 1; gmail-logo2 .element2 :: după z-index: 2; # gmail-logo2 .element3 :: înainte de z-index: 5; # gmail-logo2. # gmail-logo2 .element4 :: înainte de z-index: 4; # gmail-logo2 .element4 :: după z-index: 3; / logo2 .element5 :: după  * /

Aproape am terminat. Sigla dvs. Gmail ar trebui să arate cam așa:

În cele din urmă, hai să-i dăm o culoare diferită după ce a fost plutind.

 # gmail-logo2: hover * :: după, # gmail-logo2: hover * :: înainte de background: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: înainte de box-shadow: -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-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 :: după box-shadow: -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-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 :: înainte de box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4) 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); (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) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  gmail-logo2: hover .element2 :: după box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4) 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); (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) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: hover .element3 :: după box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4) 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); (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) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: hover .element4 :: înainte de box-shadow: -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-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4) 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) 0 rgb (10, 90, 4); -wbkit-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4) 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) 0 rgb (10, 90, 4); 

Previzualizare | Descărcați fișierul sursă

Nota editorului: Această postare este scrisă de Irham Kendeni pentru Hongkiat.com. Irham, cunoscut și ca Indaam, este un designer și dezvoltator de web din Indonezia. De asemenea, iubește dezvoltarea temelor pentru CSS și WordPress.