Kako ustvariti logotip Gmail s CSS3
Pred nekaj meseci sem vam pokazal, kako ustvariti RSS novice z CSS3. Mislil sem, da bi bilo zabavno ustvariti nekaj bolj zapletenega. V današnji objavi vam bom pokazal, kako ustvariti ne eno, ampak dve različici Gmailovega logotipa s samo CSS3.
Bližnjice do:
- Logotip Gmail Vadnica CSS # 1 | Predogled
- Logotip Gmail CSS tutorial # 2 | Predogled
Logotip Gmail # 1
Ta prvi logotip je preprost in dokaj enostaven za ustvarjanje. Brez nadaljnjega odlašanja, tukaj so koraki. Začnimo s sprožanjem vašega najljubšega urejevalnika kod in vnesite naslednje kode HTML in ga shranite kot logo-gmail.html.
Gmailov logotip CSS
Dodajte naslednje sloge CSS med ponastaviti privzete vrednosti CSS.
.gmail-logo, .gmail-logo *, .gmail-logo *: prej, .gmail-logo *: po margin: 0; oblazinjenje: 0; ozadje: pregledno; meja: 0; oris: 0; prikaz: blok; pisava: normalna normalna 0/0 serif;
Naslednje kode CSS nam dajejo rdečo ozadje logotipa Gmaila in zaokrožene strani.
.gmail-logo margin: 110px auto; ozadje: rgb (201, 44, 25); širina: 600px; višina: 400px; border-top: 4px solid rgb (201, 44, 25); obrobno-dno: 4px solid rgb (201, 44, 25); obrobni polmer: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Nato nadaljujemo z ustvarjanjem belega polja v rdečem ozadju.
.gmail-logo .gmail-box overflow: hidden; plovec: levo; širina: 440px; višina: 400px; marža: 0 0 0 80px; ozadje: belo; obrobni polmer: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
Da bi ustvarili rdeč učinek "M", bomo najprej ustvarili škatlo z rdečo obrobo.
.gmail-logo .gmail-box: pred position: relative; vsebina: "; z-index: 1; ozadje: belo; plavajoče: levo; širina: 320px; višina: 320px; meja: 100px solid rgb (201, 44, 25); rob: -310px 0 0 -40px; polmer: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg); -o-transform: rotate (45deg) );
Nato nadaljujemo s skrivanjem prekomernih strani, tako da dobimo popolno »M« v rdeči barvi.
.gmail-logo .gmail-box overflow: hidden;
Zdaj pa dajmo dve tanki rdeči obrobi, s čimer dobimo videz ovojnice.
.gmail-logo .gmail-box: po content: "; float: levo; širina: 360px; višina: 360px; meja: 2px solid rgb (201, 44, 25); rob: 10px 0 0 40px; -o-transform : rotacija (45deg); -webkit-transform: rotacija (45deg); -moz-transform: rotate (45deg);
Skoraj smo končali. Dodamo nekaj prelivov v rdečo ovojnico.
.gmail-logo: po content: "; position: relative; z-index: 2; content:"; plovec: levo; rob-top: -404px; širina: 600px; višina: 408px; prikaz: blok; ozadje: -moz-linear-gradient (vrh, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); ozadje: -o-linearno gradient (top, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); ozadje: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0%, rgba (255, 255, 255, 0.3)), / * barvno zaustavitev (30%, rgba (255, 255, 255) , 0.2)), * / barvni stop (100%, rgba (255, 255, 255, 0.1));
In nenazadnje, dajmo mu drugačno barvo. Pred tem dodajte naslednji HTML DOCTYPE
In naslednji CSS stili prej
.gmail-logo: hover ozadje: # 313131; border-color: # 313131; / * kazalec: kazalec; * / .gmail-logotip: hover .gmail-box: pred border-color: # 313131; .gmail-logo: hover .gmail-box: po border-color: # 313131; border-bottom-color: #fff; mejna-desna barva: #fff;
Predogled | Prenesite izvorno datoteko
Logotip Gmail # 2
Nato bomo ustvarili logotip Gmail iz druge perspektive z majhnim 3D učinkom. Začeli bomo z osnovno oznako HTML.
Gmailov logotip 2
Ker ima logotip drugačno perspektivo, bomo začeli z obračanjem in ustvarjanjem potrebnih slojev (ki jih bomo poklicali elementov) v zaporedju.
# gmail-logo2 margin: 0 auto; prikaz: blok; širina: 380 px; višina: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); -o-transform: vrtenje (6deg); transform: rotate (6deg); # gmail-logo2 .element1 display: block; širina: 380 px; višina: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: levo; prikaz: blok; širina: 380 px; višina: 290px; marža: -290px 0 0 0;
Styling .element1 :: pred
# gmail-logo2 .element1 :: pred content: "; position: relative; margin: 2px 0 0 14px; float: levo; prikaz: blok; ozadje: rgb (201, 44, 25); širina: 30px; višina: 276px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg), transform: rotate (3deg); border-radius: 22px 0 0 20px; -moz -bord-radius: 22px 0 0 20px; -bubit-border-radius: 22px 0 0 20px; 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) -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), -5 px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
Styling .element1 :: po
# gmail-logo2 .element1 :: after content: "; position: relative; margin: 40px 5px 0 0; float: desno; prikaz: blok; ozadje: rgb (201, 44, 25), širina: 30px; 238px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg), transform: rotate (3deg); border-radius: 0 18px 26px 0; -webkit - radij ob robovih: 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) ), -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), -3 px 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), -4 px 4 px 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);
Styling .element2 :: pred
# gmail-logo2 .element2 :: pred content: "; margin: 22px 0 0 48px; float: levo; prikaz: blok; ozadje: rgb (201, 44, 25); širina: 315px; višina: 14px; -moz -transform: rotate (6.8deg); -webkit-transform: rotate (6.8deg); -o-transform: rotate (6.8deg); transform: rotate (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 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);
Styling .element2 :: po
# gmail-logo2 .element2 :: after content: "; position: relative; margin: 230px 0 0 36px; float: levo; prikaz: blok; ozadje: rgb (201, 44, 25), širina: 310px; 12px; polje-senca: 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);
Styling .element3 :: pred
# gmail-logo2 .element3 :: pred content: "; position: relative; margin: 8px 0 0 42px; float: levo; prikaz: blok; ozadje: rgb (201, 44, 25); širina: 42px; višina: -Moz-transform: rotacija (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg), transform: rotate (3deg);
Styling .element3 :: po
# gmail-logo2 .element3 :: after content: "; position: relative; margin: 40px 32px 0 0; float: desno; prikaz: blok; ozadje: rgb (201, 44, 25), širina: 22px; 236px; -moz-transform: rotate (3.0deg); -webkit-transform: rotate (3.0deg); -o-transform: rotate (3.0deg), transform: rotate (3.0deg); 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);
Styling .element4 :: pred
# gmail-logo2 .element4 :: pred content: "; position: relative; margin: -2px 0 0 130px; float: levo; prikaz: blok; ozadje: rgb (201, 44, 25), širina: 54px; : 192px; -moz-transform: rotate (-49deg); -webkit-transform: rotate (-49deg); -o-transform: rotate (-49deg), transform: rotate (-49deg); box-shadow: -1px 0 0 rgb (109, 10, 0), -2 px 0 0 rgb (109, 10, 0), -3 px 0 0 rgb (109, 10, 0), -4 px 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 (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), -4 px 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 (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), -4 px 0 0 rgb (109, 10, 0), -5 px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);
Styling .element4 :: po
# gmail-logo2 .element4 :: after content: "; position: relative; margin: 12px 88px 0 0; float: desno; prikaz: blok; ozadje: rgb (201, 44, 25), širina: 54px; 186px; meji polmera: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotate (53deg); -webkit-transform: -o-transform: rotate (53deg), transform: rotate (53deg);
Styling .element5 :: pred
# gmail-logo2 .element5 :: pred content: "; position: relative; margin: 115px 0 0 125px; float: levo; prikaz: blok; ozadje: rgb (201, 44, 25); širina: 2px; višina: 150px; -moz-transform: rotacija (55deg); -o-transform: rotacija (55deg); -webkit-transform: rotate (55deg); transform: rotate (55deg);
Styling .element5 :: po
# gmail-logo2 .element5 :: after position: relative; vsebina: "; rob: 115px 0 0 150px; plovec: levo; prikaz: blok; ozadje: rgb (201, 44, 25); širina: 2px; višina: 150px; -moz-transform: rotate (-50deg); - webkit-transform: rotate (-50deg); -o-transform: rotate (-50deg), transform: rotate (-50deg);
Prilagajanje prioritete z-indeks.
# gmail-logo2 .element1 :: pred z-index: 3; # gmail-logo2 .element1 :: za z-index: 1; / * # gmail-logo2 .element2 :: pred * / # gmail-logo2 .element2 :: po z-index: 2; # gmail-logo2 .element3 :: pred z-index: 5; # gmail-logo2 .element3 :: za z-index: 1; # gmail-logo2 .element4 :: pred z-index: 4; # gmail-logo2 .element4 :: po z-index: 3; / * # gmail-logo2 .element5 :: pred # gmail- logo2 .element5 :: po * /
Skoraj smo končali. Logotip Gmail bi moral izgledati takole:
Nazadnje, dajmo mu drugačno barvo ob obdanih.
# gmail-logo2: hover * :: after, # gmail-logo2: hover * :: before ozadje: 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 (10 90, 4), -4 px 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 :: 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 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 :: pred 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 :: 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 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 :: 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 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 :: pred box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10 , 90, 4), -4 px 0 0 rgb (10, 90, 4), -5 px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 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), -4 px 0 rgb (10, 90, 4), -5 px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 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), -5 px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 rgb (10, 90, 4);
Predogled | Prenesite izvorno datoteko
Opomba urednika: To objavo je napisal Irham Kendeni za Hongkiat.com. Irham, znan tudi kot Indaam, je spletni oblikovalec in razvijalec iz Indonezije. Prav tako ima rad CSS in WordPress temo razvoj.
