Miten luoda Gmail-logo CSS3 lla

Pari kuukautta sitten näytin sinulle, miten voit luoda RSS-syötteen logon CSS3: lla. Luulin, että olisi hauskaa luoda jotain hieman monimutkaisempaa. Tämän päivän viestissä näytän sinulle, miten luot yhden Gmail-logon muunnelmia vain CSS3: n avulla.

Pikavalinnat:

• Gmail-logo CSS-opetusohjelma # 1 | esikatselu
• Gmail-logo CSS-opetusohjelma # 2 | esikatselu

Gmail-logo # 1

Tämä ensimmäinen logo on yksinkertainen ja melko helppo luoda. Ilman lisäedellytyksiä tässä ovat vaiheet. Aloitetaan suosikkikoodieditorin käynnistämisestä ja anna seuraavat HTML-koodit ja tallenna se logo-gmail.html.

Lisää seuraavat CSS-tyylit palauttaa oletusarvoiset CSS-arvot.

.gmail-logo, .gmail-logo *, .gmail-logo *: ennen, .gmail-logo *: marginaalin jälkeen: 0; padding: 0; tausta: läpinäkyvä; border: 0; ääriviivat: 0; display: block; fontti: normaali normaali 0/0 serif; 

Seuraavat CSS-koodit antavat Gmail-logon punaisen taustan ja pyöristetyt sivut.

 .gmail-logo margin: 110px auto; tausta: rgb (201, 44, 25); leveys: 600px; korkeus: 400px; border-top: 4px kiinteä rgb (201, 44, 25); reunapohja: 4px kiinteä rgb (201, 44, 25); border-säde: 10px; -moz ylittävä-säde: 10px; -webkit-border-säde: 10px; 

Sitten jatkamme valkoisen laatikon luomista punaisella taustalla.

 .gmail-logo .gmail-box ylivuoto: piilotettu; float: vasen; leveys: 440px; korkeus: 400px; marginaali: 0 0 80px; Tausta: valkoinen; border-säde: 5px; -moz ylittävä-säde: 5px; -webkit-border-säde: 5px; 

Punaisen "M" -efektin luomiseksi luomme ensin ruudun, jossa on punainen reunus.

 .gmail-logo .gmail-box: ennen sijainti: suhteellinen; sisältö: "; z-indeksi: 1; tausta: valkoinen; kelluva: vasen; leveys: 320px; korkeus 320px; raja: 100px kiinteä rgb (201, 44, 25); marginaali: -310px 0 -40px; säde: 10px; -moz-border-radius: 10px; -webkit-border-säde: 10px; -moz-transform: kiertää (45deg); -webkit-transform: kiertää (45deg); -o-transform: kiertää (45deg) );

Sitten siirrymme peittämään liialliset sivut, antamalla meille täydellisen "M" punaisen värin.

 .gmail-logo .gmail-box ylivuoto: piilotettu; 

Anna nyt kaksi ohutta punaista reunaa, antamalla sille kirjekuoren ulkoasu.

 .gmail-logo .gmail-box: jälkeen sisältö: ", float: vasen, leveys: 360px, korkeus: 360px, raja: 2px kiinteä rgb (201, 44, 25), marginaali: 10px 0 0 40px; : kiertää (45deg); -webkit-transform: rotate (45deg); -moz-transform: kiertää (45deg);

Olemme melkein valmis. Lisäämme punaiselle kirjekuorelle jonkin verran kaltevuutta.

 .gmail-logo: jälkeen content: ", sijainti: suhteellinen, z-index: 2, sisältö:"; float: vasen; margin-top: -404px; leveys: 600px; korkeus: 408px; display: block; tausta: -moz-lineaarinen gradientti (alkuun, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); tausta: -o-lineaarinen gradientti (alkuun, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); tausta: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0%, rgba (255, 255, 255, 0.3)), / * värin pysäytys (30%, rgba (255, 255, 255) , 0,2)), * / värin pysäytys (100%, rgba (255, 255, 255, 0,1)));  

Viimeisenä, mutta ei vähäisimpänä, annamme sille toisen värin hovered. Lisää seuraava HTML-DOCTYPE ennen

Ja seuraavat CSS-tyylit ennen

 .gmail-logo: hover tausta: # 313131; border-color: # 313131; / * kohdistin: osoitin; * / .gmail-logo: hover .gmail-box: ennen border-color: # 313131;  .gmail-logo: hover .gmail-laatikko: sen jälkeen, kun border-color: # 313131; border-bottom-väri: #fff; border-right-väri: #fff; 

Esikatselu | Lataa lähdetiedosto

Gmail-logo # 2

Seuraavaksi luomme Gmail-logon toisesta näkökulmasta, jossa on vähän 3D-vaikutusta. Aloitamme HTML-perusmerkinnällä.

Koska logolla on erilainen näkökulma, alamme pyörittämällä sitä hieman ja luomalla tarvittavat kerrokset (joita me kutsumme heille) elementtejä) järjestyksessä.

 # gmail-logo2 marginaali: 0 auto; display: block; leveys: 380px; korkeus: 290px; -moz-muunnos: kierrä (6deg); -webkit-muunnos: kierrä (6deg); -o-muunnos: pyöritä (6deg); muunnos: kierrä (6deg);  # gmail-logo2 .element1 näyttö: lohko; leveys: 380px; korkeus: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: vasen; display: block; leveys: 380px; korkeus: 290px; marginaali: -290px 0 0 0;  

Muotoilu .alkio1 :: ennen

 # gmail-logo2 .element1 :: ennen sisältö: ", sijainti: suhteellinen; marginaali: 2px 0 0 14px; float: vasen, näyttö: lohko, tausta: rgb (201, 44, 25), leveys: 30px, korkeus: 276px; -moz-transform: kiertää (3deg); -webkit-transform: kiertää (3deg); -o-transform: kiertää (3deg); muunnos: kiertää (3deg), raja-säde: 22px 0 0 20px; -moz -reuna-säde: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; laatikko-varjo: -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); 

Muotoilu .alkio1 :: jälkeen

 # gmail-logo2 .element1 :: jälkeen sisältö: ", sijainti: suhteellinen; marginaali: 40px 5px 0 0; float: oikea, näyttö: lohko, tausta: rgb (201, 44, 25), leveys: 30px, korkeus: 238px; -moz-transform: kiertää (3deg); -webkit-muunnos: kiertää (3deg); -o-transform: kiertää (3deg), muunnos: kiertää (3deg), raja-säde: 0 18px 26px 0; -webkit -reuna-säde: 0 18px 26px 0; -moz-border-säde: 0 18px 26px 0; laatikko-varjo: -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-varjo: -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);  

Muotoilu .element2 :: ennen

 # gmail-logo2 .element2 :: ennen sisältö: ", marginaali: 22px 0 0 48px, kelluva: vasen, näyttö: lohko, tausta: rgb (201, 44, 25), leveys: 315px, korkeus: 14px; -moz -muunnos: kiertää (6.8deg); -webkit-muunnos: kiertää (6.8deg); -o-muunnos: kiertää (6.8deg), muunnos: kiertää (6.8deg), laatikko-varjo: 0 1px 0 rgb (109, 10, 0), 0px 0 rgb (109, 10, 0), 0px 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); -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);

Muotoilu .element2 :: jälkeen

 # gmail-logo2 .element2 :: jälkeen sisältö: ", sijainti: suhteellinen, marginaali: 230px 0 0 36px, kelluva: vasen, näyttö: lohko, tausta: rgb (201, 44, 25), leveys: 310px, korkeus: 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);

Muotoilu .element3 :: ennen

 # gmail-logo2 .element3 :: ennen sisältö: ", sijainti: suhteellinen; marginaali: 8px 0 0 42px; float: vasen, näyttö: lohko, tausta: rgb (201, 44, 25), leveys: 42px, korkeus: 268px; -moz-transform: kiertää (3deg); -webkit-transform: kiertää (3deg); -o-transform: kiertää (3deg); muunnos: kiertää (3deg);

Muotoilu .element3 :: jälkeen

 # gmail-logo2 .element3 :: jälkeen sisältö: ", sijainti: suhteellinen, marginaali: 40px 32px 0 0, kelluva: oikea, näyttö: lohko, tausta: rgb (201, 44, 25), leveys: 22px, korkeus: 236px; -moz-transform: rotate (3.0deg); -webkit-transform: kiertää (3.0deg); -o-transform: kiertää (3.0deg), muunnos: kiertää (3.0deg), laatikko-varjo: 0 1px 0 rgb (109, 10, 0), 0px 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-varjo: 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);

Muotoilu .element4 :: ennen

 # gmail-logo2 .element4 :: ennen sisältö: ", sijainti: suhteellinen, marginaali: -2px 0 0 130px, kelluva: vasen, näyttö: lohko, tausta: rgb (201, 44, 25), leveys: 54px, korkeus : 192px; -moz-transform: kiertää (-49deg); -webkit-transform: kiertää (-49deg); -o-transform: kiertää (-49deg); muunnos: kiertää (-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 rgb (109, 10, 0), -5px 0 rgb (109, 10, 0), -6px 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 rgb (109, 10, 0);

Muotoilu .element4 :: jälkeen

 # gmail-logo2 .element4 :: jälkeen sisältö: ", sijainti: suhteellinen, marginaali: 12px 88px 0 0, kelluva: oikea, näyttö: lohko, tausta: rgb (201, 44, 25), leveys: 54px, korkeus: 186px; raja-säde: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: kiertää (53deg); -webkit-transform: kiertää (53deg); -o-transform: kiertää (53deg), muunnos: kiertää (53deg);

Muotoilu .Element5 :: ennen

# gmail-logo2 .element5 :: ennen sisältö: ", sijainti: suhteellinen; marginaali: 115px 0 0 125px; float: vasen, näyttö: lohko, tausta: rgb (201, 44, 25), leveys: 2px, korkeus: 150px; -moz-transform: kiertää (55deg); -o-transform: kiertää (55deg); -webkit-transform: kiertää (55deg); muunnos: kiertää (55deg);

Muotoilu .Element5 :: jälkeen

 # gmail-logo2 .element5 :: after sijainti: suhteellinen; sisältö: "; marginaali: 115px 0 0 150px; float: vasen; näyttö: lohko; tausta: rgb (201, 44, 25); leveys: 2px; korkeus: 150px; -moz-transform: pyörittää (-50deg); webkit-transform: rotate (-50deg); -o-transform: kiertää (-50deg); muunnos: kiertää (-50deg);

Painikkeen prioriteetin säätäminen z-index.

 # gmail-logo2 .element1 :: ennen z-index: 3; # gmail-logo2 .element1 :: jälkeen z-index: 1; / * # gmail-logo2 .element2 :: ennen  * / # gmail-logo2 .element2 :: jälkeen z-index: 2; # gmail-logo2 .element3 :: ennen z-index: 5; # gmail-logo2 .element3 :: z-index: 1; jälkeen # gmail-logo2 .element4 :: ennen z-index: 4; # gmail-logo2 .element4 :: jälkeen z-index: 3; / * # gmail-logo2 .element5 :: ennen  # gmail- logo2 .element5 :: jälkeen  * /

Olemme melkein valmis. Gmail-logosi pitäisi näyttää tältä:

Lopuksi annamme sille toisen värin, kun se on leijuu.

 # gmail-logo2: hover * :: after, # gmail-logo2: hover * :: ennen tausta: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: ennen 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 :: 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 :: ennen 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 :: jälkeen 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 :: jälkeen 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 :: ennen 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 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); 

Esikatselu | Lataa lähdetiedosto

Toimittajan huomautus: Tämä viesti on kirjoittanut Irham Kendeni varten Hongkiat.com. Irham, joka tunnetaan myös nimellä Indaam, on web-suunnittelija ja kehittäjä Indonesiasta. Hän rakastaa myös CSS- ja WordPress-teeman kehitystä.