Hogyan lehet létrehozni a Gmail logót a CSS3 segítségével
Néhány hónappal ezelőtt megmutattam, hogyan lehet létrehozni az RSS feed logót a CSS3-mal. Rájöttem, hogy szórakoztató lenne valami kicsit bonyolultabb. A mai poszton megmutatom, hogy hogyan hozhatok létre egyetlen, de csak két változatot a Gmail logóból, csak a CSS3 segítségével.
Gyorsbillentyűk:
- Gmail logó CSS bemutató # 1 Előnézet
- Gmail logó CSS bemutató # 2 Előnézet
Gmail logó # 1
Ez az első logó egyszerű és meglehetősen egyszerű. További lépések nélkül itt vannak a lépések. Kezdjük a kedvenc kódszerkesztõjével, és írjuk be a következõ HTML kódokat, és mentjük el logo-gmail.html.
Gmail CSS logó
Adja hozzá a következő CSS-stílusokat az alapértelmezett CSS-értékek visszaállítása.
.gmail-logo, .gmail-logo *, .gmail-logo *: korábban, .gmail-logo *: margin: 0 után; padding: 0; háttér: átlátszó; átnyúló: 0; vázlat: 0; display: block; betűtípus: normál normál 0/0 serif;
A következő CSS kódok a Gmail logójának piros hátterét és lekerekített oldalát adják meg.
.gmail-logo margin: 110px auto; háttér: rgb (201, 44, 25); szélesség: 600px; magasság: 400px; border-top: 4px szilárd rgb (201, 44, 25); szegély: 4px szilárd rgb (201, 44, 25); border-radius: 10px; -moz átnyúló-sugár: 10px; -webkit átnyúló-sugár: 10px;
Ezután folytatjuk a fehér doboz létrehozását a piros háttéren.
.gmail-logo .gmail-box overflow: rejtett; balra lebeg; szélesség: 440px; magasság: 400px; margin: 0 0 0 80px; háttér: fehér; border-radius: 5px; -moz átnyúló-sugár: 5px; -webkit átnyúló-sugár: 5px;
A piros "M" hatás létrehozásához először egy piros szegéllyel rendelkező fiókot hozunk létre.
.gmail-logo .gmail-box: előtt pozíció: relatív; tartalom: "; z-index: 1; háttér: fehér; float: bal; szélesség: 320px; magasság: 320px; határ: 100px szilárd rgb (201, 44, 25); margó: -310px 0 0 -40px; sugár: 10px; -moz-border-radius: 10px; -webkit-border-sugár: 10px; -moz-transform: forgatás (45deg); -webkit-transform: forgatás (45deg); -o-transzformáció: forgatás (45deg) );
Ezután elkezdjük elrejteni a túlzott oldalakat, és teljes "M" -et kapunk piros színben.
.gmail-logo .gmail-box overflow: rejtett;
Most, adjunk két vékony piros szegélyt, így a boríték megjelenését.
.gmail-logo .gmail-box: után tartalom: ", úszó: bal, szélesség: 360px, magasság: 360px, határ: 2px szilárd rgb (201, 44, 25), margó: 10px 0 0 40px; -o-transform : forgatás (45deg); -webkit-transform: forgatás (45deg); -moz-transform: forgatás (45deg);
Majdnem végeztünk. Adjunk hozzá néhány színátmenetet a piros borítékhoz.
.gmail-logo: tartalom: "után: pozíció: relatív; z-index: 2; tartalom:"; balra lebeg; margin-top: -404px; szélesség: 600px; magasság: 408px; display: block; háttér: -moz-lineáris gradiens (felső, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); háttér: -o-lineáris gradiens (felső, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); háttér: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (0%, rgba (255, 255, 255, 0.3)), / * szín-stop (30%, rgba (255, 255, 255) 0,2)), * / szín-stop (100%, rgba (255, 255, 255, 0,1)));
Végül, de nem utolsósorban, adjunk neki egy másik színt a lebegéskor. Add hozzá a következő HTML DOCTYPE-t
És a következő CSS stílusok korábban
.gmail-logo: lebeg háttér: # 313131; border-color: # 313131; / * kurzor: mutató; * / .gmail-logó: hover .gmail-box: határszín: # 313131; .gmail-logó: hover .gmail-box: border-color: # 313131; border-bottom-color: #fff; border-jobb-color: #fff;
Előnézet | Forrásfájl letöltése
Gmail logó # 2
Ezután Gmail logót fogunk létrehozni egy másik nézőpontból egy kis 3D hatással. Kezdjük az alapvető HTML jelöléssel.
Gmail logó 2
Mivel a logónak más nézőpontja van, elkezdjük egy kicsit elforgatva, és létrehozzuk a szükséges rétegeket (amelyeket hívunk elemek) sorban.
# gmail-logo2 margó: 0 automatikus; display: block; szélesség: 380px; magasság: 290px; -moz-transzformáció: Forgatás (6deg); -webkit-transzformáció: Forgatás (6deg); -o-transzformáció: forgatni (6deg); transzformáció: Forgatás (6deg); # gmail-logo2 .element1 kijelző: blokk; szélesség: 380px; magasság: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: balra; display: block; szélesség: 380px; magasság: 290px; margó: -290px 0 0 0;
Styling .element1 :: előtt
# gmail-logo2 .element1 :: előtt tartalom: "; pozíció: relatív; margó: 2px 0 0 14px; úszó: bal; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 30px; magasság: 276px; -moz-transform: forgatás (3deg); -webkit-transzformálás: forgatás (3deg); -o-transzformálás: forgatás (3deg); átalakítás: forgatás (3deg); határ-sugár: 22px 0 0 20px; -moz -szélesség: 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 ), -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);
Styling .element1 :: után
# gmail-logo2 .element1 :: után tartalom: "; pozíció: relatív; margó: 40px 5px 0 0; úszó: jobb; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 30px; magasság: 238px; -moz-transform: forgatás (3deg); -webkit-transzformálás: forgatás (3deg); -o-transzformálás: forgatás (3deg); transzformálás: forgatás (3deg); szegély-sugár: 0 18px 26px 0; -szélesség: 0 18px 26px 0; -moz-border-sugár: 0 18px 26px 0; doboz-árnyék: -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-árnyék: -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);
Styling .ELEMENT2 :: előtt
# gmail-logo2 .element2 :: before content: "; margó: 22px 0 0 48px; float: bal; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 315px; magasság: 14px; -moz -transzformáció: forgatás (6.8deg); -webkit-transzformáció: forgatás (6.8deg); -o-transzformálás: forgatás (6.8deg), transzformálás: forgatás (6.8deg); doboz-árnyék: 0 1px 0 10, 0), 0 2px 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) 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 :: után
# gmail-logo2 .element2 :: után tartalom: "; pozíció: relatív; margó: 230px 0 0 36px; úszó: bal; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 310px; magasság: 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);
Styling .element3 :: előtt
# gmail-logo2 .element3 :: előtt tartalom: "; pozíció: relatív; margó: 8px 0 0 42px; úszó: bal; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 42px; magasság: 268px; -moz-transform: forgatás (3deg); -webkit-transform: forgatás (3deg); -o-transzformálás: forgatás (3deg); transzformálás: forgatás (3deg);
Styling .element3 :: után
# gmail-logo2 .element3 :: után tartalom: "; pozíció: relatív; margó: 40px 32px 0 0; úszó: jobb; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 22px; magasság: 236px; -moz-transform: forgatás (3.0deg); -webkit-transform: forgatás (3.0deg); -o-transzformálás: forgatás (3.0deg), átalakítás: forgatás (3.0deg), doboz-árnyék: 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 :: előtt
# gmail-logo2 .element4 :: before content: "; pozíció: relatív; margó: -2px 0 0 130px; float: bal; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 54px; magasság : 192px; -moz-transform: forgatás (-49deg); -webkit-transzformálás: forgatás (-49deg); -o-transzformálás: forgatás (-49deg), átalakítás: forgatás (-49deg); doboz-árnyék: -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 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), -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 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);
Styling .element4 :: után
# gmail-logo2 .element4 :: után tartalom: "; pozíció: relatív; margó: 12px 88px 0 0; úszó: jobb; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 54px; magasság: 186px; határ-sugár: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: forgatás (53deg); -webkit-transform: forgatás (53deg); -o-transzformálás: forgatás (53deg), átalakítás: forgatás (53deg);
Styling .element5 :: előtt
# gmail-logo2 .element5 :: tartalom: "; pozíció: relatív; margó: 115px 0 0 125px; úszó: bal; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 2px; magasság: -Moz-transform: forgatás (55deg); -o-transzformálás: forgatás (55deg); -webkit-transform: forgatás (55deg), transzformálás: forgatás (55deg);
Styling .element5 :: után
# gmail-logo2 .element5 :: után pozíció: relatív; tartalom: "; margin: 115px 0 0 150px; float: bal; kijelző: blokk; háttér: rgb (201, 44, 25); szélesség: 2px; magasság: 150px; -moz-transform: forgatás (-50deg); webkit-transform: rotate (-50deg); -o-transform: forgatás (-50deg); transzformálás: forgatás (-50deg);
A z-index
.
# gmail-logo2 .element1 :: előtt z-index: 3; # gmail-logo2 .element1 :: után z-index: 1; / * # gmail-logo2 .element2 :: * / # gmail-logo2 .element2 :: után z-index: 2; # gmail-logo2 .element3 :: előtt z-index: 5; # gmail-logo2 .element3 :: z-index: 1; után # gmail-logo2 .element4 :: előtt z-index: 4; # gmail-logo2 .element4 :: után z-index: 3; / * # gmail-logo2 .element5 :: # gmail- logo2 .element5 :: * / után
Majdnem végeztünk. Gmail-logójának olyannak kell lennie, mint ez:
Végül, adjunk egy másik színt a lebegéskor.
# gmail-logo2: hover * :: after, # gmail-logo2: hover * :: előtt háttér: rgba (20, 196, 7, 1); # gmail-logo2: hover .element1 :: előtt 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 :: után 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 :: előtt 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 :: után 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 :: után 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 :: előtt 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 0 rgb (10, 90, 4), -6px 0 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 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 0 rgb (10, 90, 4), -7px 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4);
Előnézet | Forrásfájl letöltése
A szerkesztő megjegyzése: Ezt a bejegyzést írta Irham Kendeni Hongkiat.com részére. Irham, más néven Indaam, webes tervező és fejlesztő Indonéziából. Ő is szereti a CSS és a WordPress téma fejlesztését.