Jak vytvořit logo Gmail s CSS3

Před několika měsíci jsem vám ukázal, jak vytvořit logo RSS feed s CSS3. Myslel jsem, že by bylo zábavné vytvořit něco trochu složitějšího. V dnešním příspěvku vám ukážu, jak vytvořit ne jednu, ale dvě varianty loga Gmailu pomocí pouze CSS3.

Zkratky pro:

• Logo služby Gmail CSS tutorial # 1 | Náhled
• Logo služby Gmail CSS tutorial # 2 | Náhled

Logo služby Gmail # 1

Toto první logo je jednoduché a poměrně snadno vytvořitelné. Bez dalších okolků jsou zde kroky. Začněme s vypálením editoru oblíbených kódů a zadáním následujících kódů HTML a uložte jej jako logo-gmail.html.

Přidejte následující styly CSS mezi obnovit výchozí hodnoty CSS.

.gmail-logo, .gmail-logo *, .gmail-logo *: before, .gmail-logo *: po margin: 0; výplň: 0; pozadí: transparentní; ohraničení: 0; obrys: 0; zobrazení: blok; písmo: normální normální 0/0 serif; 

Následující kódy CSS nám poskytují červené pozadí loga Gmail a zaoblené strany.

 .gmail-logo okraj: 110px auto; pozadí: rgb (201, 44, 25); šířka: 600px; výška: 400px; border-top: 4px pevný rgb (201, 44, 25); hraniční dno: 4px pevné rgb (201, 44, 25); hraniční rádius: 10px; -moz-border-radius: 10px; -webk-border-radius: 10px; 

Pak pokračujeme ve vytváření bílého rámečku v červeném pozadí.

 .gmail-logo .gmail-box přetečení: skryté; plavat vlevo; šířka: 440px; výška: 400px; marže: 0 0 0 80px; pozadí: bílá; hraniční rádius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 

Abychom vytvořili červený efekt „M“, nejprve vytvoříme pole s červeným okrajem.

 .gmail-logo .gmail-box: před pozice: relativní; obsah: "; z-index: 1; pozadí: bílá; float: vlevo; šířka: 320px; výška: 320px; hranice: 100px pevná rgb (201, 44, 25); okraj: -310px 0 0 -40px; poloměr: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webk-transform: rotate (45deg); -o-transformace: rotace (45deg );;

Pak pokračujeme skrýváním nadměrných stran, což nám dává kompletní "M" v červené barvě.

 .gmail-logo .gmail-box přetečení: skryté; 

Pojďme dát dva tenké červené okraje, které mu dávají obálku.

 .gmail-logo .gmail-box: po content: "; float: vlevo; šířka: 360px; výška: 360px; ohraničení: 2px pevné rgb (201, 44, 25); okraj: 10px 0 0 40px; -o-transform : rotace (45deg); -webk-transformace: rotace (45deg); -moz-transformace: rotace (45deg);

Jsme skoro hotovi. Přidejme trochu přechodu na červenou obálku.

 .gmail-logo: po content: "; pozice: relativní; z-index: 2; content:"; plavat vlevo; horní okraj: -404px; šířka: 600px; výška: 408px; zobrazení: blok; pozadí: -moz-lineární gradient (horní, rgba (255, 255, 255, 0,3) 0%, / rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1) ) 100%); pozadí: -o-lineární gradient (horní, rgba (255, 255, 255, 0,3) 0%, / rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1) ) 100%); pozadí: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (0%, rgba (255, 255, 255, 0,3)), / * barevný doraz (30%, rgba (255, 255, 255) , 0,2)), * / zbarvení (100%, rgba (255, 255, 255, 0,1))));  

V neposlední řadě, pojďme se na to vznášet jinou barvou. Předtím přidejte následující kód HTML DOCTYPE

A následující styly CSS

 .gmail-logo: hover pozadí: # 313131; hraniční barva: # 313131; / * kurzor: ukazatel; * / .gmail-logo: hover .gmail-box: before border-color: # 313131;  .gmail-logo: hover .gmail-box: po border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff; 

Náhled | Stáhnout zdrojový soubor

Logo služby Gmail # 2

Dále vytvoříme logo služby Gmail z jiné perspektivy s malým 3D efektem. Začneme základním značením HTML.

Vzhledem k tomu, že logo má jinou perspektivu, začneme tím, že ho trochu otočíme a vytvoříme potřebné vrstvy (které jim zavoláme) Prvky) v sekvenci.

 # gmail-logo2 okraj: 0 auto; zobrazení: blok; šířka: 380px; výška: 290px; -moz-transformace: rotace (6deg); -webk-transform: rotovat (6deg); -o-transformace: rotace (6deg); transformace: rotace (6deg);  # gmail-logo2 .element1 zobrazit: blok; šířka: 380px; výška: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: vlevo; zobrazení: blok; šířka: 380px; výška: 290px; marže: -290px 0 0 0;  

Styling .element1 :: dříve

 # gmail-logo2 .element1 :: before content: "; pozice: relativní; okraj: 2px 0 0 14px; float: vlevo; zobrazení: blok; pozadí: rgb (201, 44, 25); šířka: 30px; výška: 276px; -moz-transformace: rotace (3deg); -webkit-transformace: rotace (3deg); -o-transformace: rotace (3deg), transformace: rotace (3deg), hraniční rádius: 22px 0 0 20px; -obsah rádia: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0 ), -3px3px0 rgb (109, 10, 0), -4px4px0 rgb (109, 10, 0), -5px 5px0 rgb (109, 10, 0), -6px 6px0 rgb (109, 10 -Webk-box-shadow: -1px 1px0 rgb (109, 10, 0), -2px2px0 rgb (109, 10, 0), -3px 3px0 rgb (109, 10, 0), -4px 4px0 rgb (109, 10, 0), -5px 5px0 rgb (109, 10, 0), -6px 6px0 rgb (109, 10, 0); -moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px2px0 rgb (109, 10, 0), -3px 3px0 rgb (109, 10, 0), -4px 4px0 rgb (109, 10, 0), -5px 5px0 rgb (109, 10, 0), -6px6px0 rgb (109, 10, 0); 

Styling .element1 :: po

 # gmail-logo2 .element1 :: after content: "; pozice: relativní; okraj: 40px 5px 0 0; float: vpravo; zobrazení: blok; pozadí: rgb (201, 44, 25); šířka: 30px; výška: 238px; -moz-transformace: rotace (3deg); -webkit-transformace: rotace (3deg); -o-transformace: rotace (3deg); transformace: rotace (3deg), hraniční rádius: 0 18px 26px 0; -obsah rádia: 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 ), -3px3px0 rgb (109, 10, 0), -4px4px0 rgb (109, 10, 0), -5px 5px0 rgb (109, 10, 0), -6px 6px0 rgb (109, 10 , 0), -6px7px0 rgb (109, 10, 0); -moz-box-shadow: -1px 1px0 rgb (109, 10, 0), -2px2px0 rgb (109, 10, 0), -3px 3px0 rgb (109, 10, 0), -4px4px0 rgb (109, 10, 0), -5px 5px0 rgb (109, 10, 0), -6px 6px0 rgb (109, 10, 0) -6px7px0 rgb (109, 10, 0); -webk-box-shadow-stín: -1px 1px0 rgb (109, 10, 0), -2px2px0 rgb (109, 10, 0), -3px 3px0 rgb (109, 10, 0), -4px4px0 rgb (109, 10, 0), -5px 5px0 rgb (109, 10, 0), -6px 6px0 rgb (109, 10, 0), -6px 7px 0 rg b (109, 10, 0);  

Styling .element2 :: dříve

 # gmail-logo2 .element2 :: before content: "; marže: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); šířka: 315px; výška: 14px; -moz -transforma: rotace (6,8deg); -webk-transformace: rotace (6,8deg); -o-transformace: rotace (6,8deg), transformace: rotace (6,8deg), box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2pxo rgb (109, 10, 0), 0, 3pxo rgb (109, 10, 0), 0, 4px0 rgb (109, 10, 0), 0,5px0 rgb (109, 10, 0), -6px6px0 rgb (109, 10, 0); -webk-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0, 4pxo rgb (109, 10, 0), 0,5px0 rgb (109, 10, 0), -6px6px0 rgb (109, 10, 0); -shadow: 0 1px0 rgb (109, 10, 0), 0 2px0 rgb (109, 10, 0), 0 3px0 rgb (109, 10, 0), 0 4px0 rgb (109, 10, 0) , 5px0 rgb (109, 10, 0), -6px6px0 rgb (109, 10, 0);

Styling .element2 :: po

 # gmail-logo2 .element2 :: after content: "; pozice: relativní; okraj: 230px 0 0 36px; float: vlevo; zobrazení: blok; pozadí: rgb (201, 44, 25); šířka: 310px; výška: 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), 5px0 rgb (109, 10, 0), -6px 6px0 rgb (109, 10, 0); -webk-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0, 3px0 rgb (109, 10, 0), 0 4px0 rgb (109, 10, 0), 0 5px0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: 0 1px0 rgb (109, 10, 0), 0 2px0 rgb (109, 10, 0), 0 3px0 rgb (109, 10, 0) ), 4pxo rgb (109, 10, 0), 0,5px0 rgb (109, 10, 0), -6px6px0 rgb (109, 10, 0);

Styling .element3 :: dříve

 # gmail-logo2 .element3 :: before content: "; pozice: relativní; okraj: 8px 0 0 42px; float: vlevo; zobrazení: blok; pozadí: rgb (201, 44, 25); šířka: 42px; výška: 268px; -moz-transformace: rotace (3deg); -webk-transformace: rotace (3deg); -o-transformace: rotace (3deg), transformace: rotace (3deg);

Styling .element3 :: po

 # gmail-logo2 .element3 :: after content: "; pozice: relativní; okraj: 40px 32px 0 0; float: right; display: block; background: rgb (201, 44, 25); šířka: 22px; výška: 236px; -moz-transform: rotate (3.0deg); -webkit-transform: rotate (3.0deg); -o-transform: rotate (3.0deg), transformace: rotate (3.0deg), box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px0 rgb (109, 10, 0), 0 3px0 rgb (109, 10, 0), 0 4px0 rgb (109, 10, 0), 0,5px 0 rgb ( 109, 10, 0), -6px6px0 rgb (109, 10, 0); -webk-box-shadow: 0 1px0 rgb (109, 10, 0), 0 2px0 rgb (109, 10, 0) , 0, 3pxo rgb (109, 10, 0), 0, 4pxo rgb (109, 10, 0), 0,5px0 rgb (109, 10, 0), -6px6px0 rgb (109, 10, 0); -moz-box-shadow: 0 1px0 rgb (109, 10, 0), 0 2px0 rgb (109, 10, 0), 0pp0o rgb (109, 10, 0), 0 4px0 rgb (109, 10, 0), 0,5px0 rgb (109, 10, 0), -6px6px0 rgb (109, 10, 0);

Styling .element4 :: dříve

 # gmail-logo2 .element4 :: before content: "; pozice: relativní; okraj: -2px 0 0 130px; float: vlevo; zobrazení: blok; pozadí: rgb (201, 44, 25); šířka: 54px; výška : 192px; -moz-transformace: rotace (-49deg); -webkit-transformace: rotace (-49deg); -o-transformace: rotace (-49deg); transformace: rotace (-49deg); box-shadow: -1px 0 rgb (109, 10, 0), -2px0o rgb (109, 10, 0), -3px0o rgb (109, 10, 0), -4px0o rgb (109, 10, 0), -5px0,0 rgb (109, 10, 0), -6px0o rgb (109, 10, 0), -7px0o rgb (109, 10, 0), -8px0o rgb (109, 10, 0) -moz-box-shadow: -1px0,0 rgb (109, 10, 0), -2px0o rgb (109, 10, 0), -3px0o rgb (109, 10, 0), -4px 0, 0 rgb (109, 10, 0), -5px0o rgb (109, 10, 0), -6px0o rgb (109, 10, 0), -7px0o rgb (109, 10, 0), -8px0o rgb (109, 10, 0); -webk-box-shadow: -1px0,0 rgb (109, 10, 0), -2px0o rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px0o rgb (109, 10, 0), -5px0o rgb (109, 10, 0), -6px0o rgb (109, 10, 0), -7px 0, 0 rgb (109, 10, 0), -8px0o rgb (109, 10, 0);

Styling .element4 :: po

 # gmail-logo2 .element4 :: after content: "; pozice: relativní; okraj: 12px 88px 0 0; float: vpravo; zobrazení: blok; pozadí: rgb (201, 44, 25); šířka: 54px; výška: 186px, poloměr ohraničení: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotate (53deg); -webkit-transform: rotace (53deg), -o-transformace: rotace (53deg), transformace: rotace (53deg);

Styling .element5 :: dříve

# gmail-logo2 .element5 :: before content: "; pozice: relativní; okraj: 115px 0 0 125px; float: vlevo; zobrazení: blok; pozadí: rgb (201, 44, 25); šířka: 2px; výška: 150px; -moz-transformace: rotace (55deg); -o-transformace: rotace (55deg); -webit-transformace: rotace (55deg), transformace: rotace (55deg);

Styling .element5 :: po

 # gmail-logo2 .element5 :: after position: relativní; content: "; margin: 115px 0 0 150px; float: left; display: block; background: rgb (201, 44, 25); šířka: 2px; výška: 150px; -moz-transform: rotovat (-50deg); - webkit-transformace: rotace (-50deg); -o-transformace: rotace (-50deg); transformace: rotace (-50deg);

Úprava priority z-index.

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

Jsme skoro hotovi. Vaše logo služby Gmail by mělo vypadat takto:

Konečně, pojďme dát jinou barvu na vznášející se.

 # gmail-logo2: hover * :: po, # gmail-logo2: hover * :: before background: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: before box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px4px0 rgb (10, 90, 4), -5px 5px0 rgb (10, 90, 4), -6px 6px0 rgb (10, 90, 4); -webk-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 5px0 rgb (10, 90, 4), -6px6px0 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 5px0 rgb (10, 90, 4), -6px6px0 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 5px0 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 5px0 rgb (10, 90, 4), -6px6px0 rgb (10, 90, 4), -6px 7px0 rgb (10, 90, 4); -webk-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 5px0 rgb (10, 90, 4), -6px6px0 rgb (10, 90, 4), -6px 7px0 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 4px0 rgb (10, 90, 4), 0,5px0 rgb (10, 90, 4), -6px6px0 rgb (10, 90, 4); -webk-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,5px0 rgb (10, 90, 4), -6px6px0 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,5px0 rgb (10, 90, 4), -6px6px0 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 4px0 rgb (10, 90, 4), 0,5px0 rgb (10, 90, 4), -6px6px0 rgb (10, 90, 4); -webk-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,5px0 rgb (10, 90, 4), -6px6px0 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,5px0 rgb (10, 90, 4), -6px6px0 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 4px0 rgb (10, 90, 4), 0,5px0 rgb (10, 90, 4), -6px6px0 rgb (10, 90, 4); -webk-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,5px0 rgb (10, 90, 4), -6px6px0 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,5px0 rgb (10, 90, 4), -6px6px0 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), -4px0,0 rgb (10, 90, 4), -5px0,0 rgb (10, 90, 4), -6px0,0 rgb (10, 90, 4), -7px0,0 rgb (10, 90, 4), -8x0,0 rgb (10, 90, 4); -moz-box-shadow: -1px0,0 rgb (10, 90, 4), -2px0,0 rgb (10, 90, 4), -3px0,0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px0,0 rgb (10, 90, 4), -6px0o rgb (10, 90, 4), -7px0,0 rgb (10, 90, 4), -8px 0, 0 rgb (10, 90, 4); -webit-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px0,0 rgb (10, 90, 4), -3px0,0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px0,0 rgb (10, 90, 4), -6px0o rgb (10, 90, 4), -7px0,0 rgb (10, 90, 4), -8px 0, 0 rgb (10, 90, 4); 

Náhled | Stáhnout zdrojový soubor

Poznámka editora: Tento příspěvek je napsán Irham Kendeni pro Hongkiat.com. Irham, také známý jako Indaam, je web designer a vývojář z Indonésie. Také miluje vývoj CSS a WordPress.