Ako vytvoriť logo služby Gmail s CSS3

Pred pár mesiacmi som vám ukázal, ako vytvoriť logo RSS feed s CSS3. Myslel som, že by bolo zábavné vytvoriť niečo o niečo zložitejšie. V dnešnom príspevku vám ukážem, ako vytvoriť nie len jednu, ale dve varianty loga Gmailu pomocou CSS3.

Skratky na:

• Logo Gmail CSS tutorial # 1 Náhľad
• Logo Gmail CSS tutorial # 2 Náhľad

Logo Gmail # 1

Toto prvé logo je jednoduché a ľahko sa dá vytvoriť. Bez ďalšieho kroku tu sú kroky. Začnime spustením vášho obľúbeného editora kódu a zadajte nasledujúce HTML kódy a uložte ich ako logo-gmail.html.

Pridať medzi tieto štýly CSS obnoviť predvolené hodnoty CSS.

.gmail-logo, .gmail-logo *, .gmail-logo *: pred, .gmail-logo *: po margin: 0; padding: 0; pozadie: transparentná; border: 0; obrys: 0; Zobrazenie: blok; písmo: normal normal 0/0 serif; 

Nasledujúce kódy CSS nám poskytujú červené pozadie loga Gmailu a zaoblené strany.

 .gmail-logo margin: 110px auto; pozadie: rgb (201, 44, 25); šírka: 600px; výška: 400px; hraničná vrstva: 4-násobná pevná rgb (201, 44, 25); hraničná spodná časť: 4px pevná rgb (201, 44, 25); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Potom pokračujeme vytváraním bielych políčok v červenom pozadí.

 .gmail-logo .gmail-box pretečenie: skryté; float: left; šírka: 440px; výška: 400px; okraj: 0 0 0 80px; background: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 

Ak chcete vytvoriť červený efekt "M", najprv vytvoríme rámček s červeným okrajom.

 .gmail-logo .gmail-box: pred pozícia: relatívna; obsah: "; z-index: 1; pozadie: biela; plavák: ľavá; šírka: 320px; výška: 320px; okraj: 100px solid rgb (201, 44, 25) polomer: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg) );

Potom pokračujeme skrývať nadmerné strany a dáva nám kompletný "M" v červenej farbe.

 .gmail-logo .gmail-box pretečenie: skryté; 

Teraz daj dva tenké červené okraje, dávajúc im vzhľad obálky.

 .gmail-logo.gmail-box: po content: "; float: left; width: 360px; height: 360px; border: 2px solid rgb (201,44,25); margin: 10px 0 0 40px; : rotácia (45deg); -webkit-transform: rotácia (45deg); -moz-transform: rotácia (45deg);

Už sme takmer hotoví. Pridajme určitý gradient do červenej obálky.

 .gmail-logo: po obsah: "; pozícia: relatívna; z-index: 2; obsah:"; float: left; margin-top: -404px; šírka: 600px; výška: 408px; Zobrazenie: blok; pozadie: -moz-lineárny gradient (vrchol, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0.3) ) 100%); pozadie: -o-lineárny gradient (vrchol, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0.2) ) 100%); pozadie: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, rgba (255, 255, 255, , 0,2)), * / farebný stop (100%, rgba (255, 255, 255, 0,1));  

V neposlednom rade mu dajme inú farbu na vznášaní. Predtým vložte nasledujúci HTML DOCTYPE

A predtým nasledujúce štýly CSS

 .gmail-logo: vznášadlo background: # 313131; border-color: # 313131; / * kurzor: ukazovateľ; * / .gmail-logo: hover .gmail-box: pred border-color: # 313131;  .gmail-logo: hover .gmail-box: po border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff; 

Náhľad | Stiahnite si zdrojový súbor

Gmail logo # 2

Ďalej vytvoríme logo Gmail z inej perspektívy s malým 3D efektom. Začneme so základnou značkou HTML.

Keďže logo má inú perspektívu, začneme tým, že ho trochu rotujeme a vytvoríme potrebné vrstvy (ktoré im nazveme prvky) v sekvencii.

 # gmail-logo2 margin: 0 auto; Zobrazenie: blok; šírka: 380px; výška: 290px; -moz-transformácie: otáčania (6deg); -webkit-transformácie: otáčania (6deg); -o-transformácie: otočenie (6deg); transformácie: otáčania (6deg);  # gmail-logo2.element1 zobrazenie: blok; šírka: 380px; výška: 290px;  # gmail-logo2.element2, # gmail-logo2. element3, # gmail-logo2. element4, # gmail-logo2. element5 float: left; Zobrazenie: blok; šírka: 380px; výška: 290px; margin: -290px 0 0 0;  

styling .element1 :: predtým

 # gmail-logo2.element1 :: skôr ako content: "; position: relative; margin: 2px 0 0 14px; float: left; display: block; background: rgb (201, 44, 25) 276px; -moz-transform: otočiť (3deg); -webkit-transform: rotovať (3deg); -o-transformovať: rotovať (3deg); transformovať: rotovať (3deg); okraj-polomer: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; box-tieň: -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); 

styling .element1 :: po

 # gmail-logo2.element1 :: po content: "; position: relative; margin: 40px 5px 0 0; float: right; display: block; background: rgb (201, 44, 25) 238px; -moz-transform: otočiť (3deg); -webkit-transform: rotovať (3deg); -o-transformovať: rotovať (3deg); transformovať: rotovať (3deg); okraj-polomer: 0 18px 26px 0, -moz-okraj-okraj: 0 18px 26px 0, box-tieň: -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-tieň: -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);  

styling .element2 :: predtým

 # gmail-logo2 .element2 :: skôr než content: "; margin: 22px 0 0 48px; float: left; zobrazenie: block; background: rgb (201, 44, 25); transformovať: otočiť (6.8deg), -webkit-transformovať: rotovať (6.8deg), -o-transformovať: rotovať (6.8deg), transformovať: rotovať (6.8deg), 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), -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 0 3PX 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);

styling .element2 :: po

 # gmail-logo2.element2 :: po content: "; position: relative; margin: 230px 0 0 36px; float: left; display: block; background: rgb (201, 44, 25) 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 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-tieň: 0 1px 0 rgb (109, 10, 0), 0 2px 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)

styling .element3 :: predtým

 # gmail-logo2 .element3 :: pred content: "; position: relative; margin: 8px 0 0 42px; float: left; display: block; background: rgb (201, 44, 25) 268px; -moz-transform: otočiť (3deg); -webkit-transform: rotovať (3deg); -o-transformovať: rotovať (3deg);

styling .element3 :: po

 # gmail-logo2.element3 :: po content: "; position: relative; margin: 40px 32px 0 0; float: right; display: block; background: rgb (201, 44, 25) 236px; -moz-transform: otočiť (3.0deg); -webkit-transform: rotovať (3.0deg); -o-transformovať: rotovať (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), 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 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);

styling .element4 :: predtým

 # gmail-logo2.element4 :: pred content: "; position: relative; margin: -2px 0 0 130px; float: left; display: block; background: rgb (201, 44, 25); : 192px; -moz-transform: rotovať (-49deg); -webkit-transform: rotovať (-49deg); -o-transformovať: rotovať (-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 (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 ); -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 (109, 10, 0) rgb (109, 10, 0), -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb 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);

styling .element4 :: po

 # gmail-logo2 .element4 :: po content: "; position: relative; margin: 12px 88px 0 0; float: right; display: block; background: rgb (201, 44, 25) 186px, border-radius: 30px 0 0 0 -webkit-border-radius: 30px 0 0 0 -moz-border-radius: 30px 0 0 0 -moz-transform: rotate (53deg); -webkit-transform: otáčať (53deg), -o-transformovať: rotovať (53deg), transformovať: rotovať (53deg);

styling .element5 :: predtým

# gmail-logo2 .element5 :: skôr než content: "; position: relative; margin: 115px 0 0 125px; float: left; display: block; background: rgb (201, 44, 25) 150px; -moz-transform: otočiť (55deg); -o-transformovať: rotovať (55deg); -webkit-transform: rotovať (55deg);

styling .element5 :: po

 # gmail-logo2 .element5 :: po pozícia: relatívna; (201, 44, 25), šírka: 2px, výška: 150px, -moz-transform: rotate (-50deg), - webkit-transform: otočiť (-50deg); -o-transformovať: rotovať (-50deg); transformovať: rotovať (-50deg);

Nastavenie priority z-index.

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

Už sme takmer hotoví. Vaše logo služby Gmail by malo vyzerať takto:

Nakoniec mu dajme inú farbu pri vznášaní.

 # gmail-logo2: hover * :: po, # gmail-logo2: hover * :: pred background: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: pred 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-tieň: -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 , 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-tieň: -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 :: pred box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb 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); (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 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); (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 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); (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 :: pred 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-tieň: -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 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) 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 0 rgb (10, 90, 4); 

Náhľad | Stiahnite si zdrojový súbor

Poznámka redaktora: Tento príspevok je napísaný používateľom Irham Kendeni pre Hongkiat.com. Irham, tiež známy ako Indaam, je webový dizajnér a vývojár z Indonézie. On tiež miluje CSS a WordPress tému vývoj.