Hur man skapar Gmail-logotyp med CSS3

För några månader sedan visade jag dig hur man skapar RSS-flödeslogo med CSS3. Jag tänkte att det skulle vara kul att skapa något lite mer komplext. I dagens inlägg kommer jag att visa dig hur man skapar inte en, men två variationer av Gmail-logotypen med bara CSS3.

Genvägar till:

• Gmail-logotyp CSS-handledning # 1 | Förhandsvisning
• Gmail-logotyp CSS-handledning # 2 | Förhandsvisning

Gmail-logotypen # 1

Den här första logotypen är enkel och ganska lätt att skapa. Utan ytterligare ado är här stegen. Låt oss börja med att skjuta upp din favorit kodredigerare och ange följande HTML-koder och spara den som logo-gmail.html.

Lägg till följande CSS-stilar mellan för att återställa standard CSS-värden.

.gmail-logo, .gmail-logo *, .gmail-logo *: före, .gmail-logo *: efter margin: 0; padding: 0; bakgrund: transparent; kant: 0; disposition: 0; display: block; typsnitt: normal normal 0/0 serif; 

Följande CSS-koder ger oss Gmail-logotypens röda bakgrund och en rundad sida.

 .gmail-logo margin: 110px auto; bakgrund: rgb (201, 44, 25); bredd: 600px; höjd: 400px; gränstopp: 4px fast rgb (201, 44, 25); gränsbotten: 4px solid rgb (201, 44, 25); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Sedan fortsätter vi att skapa den vita rutan i den röda bakgrunden.

 .gmail-logo .gmail-box overflow: hidden; flyta till vänster; bredd: 440px; höjd: 400px; marginal: 0 0 0 80px; bakgrund: vitt; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 

För att skapa den röda "M" -effekten skapar vi först en ruta med röd gräns.

 .gmail-logo .gmail-box: före position: relativ; innehåll: "; z-index: 1; bakgrund: vit; float: vänster; bredd: 320px; höjd: 320px; gräns: 100px solid rgb (201, 44, 25); marginal: -310px 0 0 -40px; radius: 10px; -moz-gränsen-radius: 10px; -webkit-gräns-radien: 10px; -moz-transform: rotera (45deg); -webkit-transform: rotera (45deg); -o-transformera: rotera );

Då fortsätter vi att dölja de överdrivna sidorna, vilket ger oss en komplett "M" i röd färg.

 .gmail-logo .gmail-box overflow: hidden; 

Nu, låt oss ge två tunna röda gränser, vilket ger kuvertet utseende.

 .gmail-logo .gmail-box: efter innehåll: "; float: vänster; bredd: 360px; höjd: 360px; gräns: 2px solid rgb (201, 44, 25); marginal: 10px 0 0 40px; -o-transform : rotera (45deg); -webkit-transform: rotera (45deg); -moz-transform: rotera (45deg);

Vi är nästan färdiga. Låt oss lägga en gradient till det röda kuvertet.

 .gmail-logo: efter innehåll: "; position: relativ; z-index: 2; innehåll:"; flyta till vänster; margin-top: -404px; bredd: 600px; höjd: 408px; display: block; bakgrund: -moz-linjär gradient (topp, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); bakgrund: -o-linjär gradient (topp, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, rgba (255, 255, 255, 0.3)), / * färgstopp (30%, rgba (255, 255, 255 , 0,2)), * / färgstopp (100%, rgba (255, 255, 255, 0,1)));  

Sist men inte minst, låt oss ge den en annan färg vid svängning. Lägg till följande HTML DOCTYPE innan

Och följande CSS-stilar före

 .gmail-logo: svävar (bakgrund: # 313131; border-color: # 313131; / * markör: pekare; * / .gmail-logo: hover .gmail-box: före border-color: # 313131;  .gmail-logo: hover .gmail-box: efter border-color: # 313131; border-bottom-färg: #fff; border-right-color: #fff; 

Förhandsgranskning | Hämta källfilen

Gmail-logotypen # 2

Därefter skapar vi Gmail-logotypen från ett annat perspektiv med en liten 3D-effekt. Vi börjar med den grundläggande HTML-uppteckningen.

Eftersom logotypen har ett annat perspektiv börjar vi att rotera det lite och skapa de lag som behövs (som vi kallar dem element) i turordning.

 # gmail-logo2 margin: 0 auto; display: block; bredd: 380px; höjd: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); -o-transform: Rotera (6deg); transform: rotate (6deg);  # gmail-logo2. element1 display: block; bredd: 380px; höjd: 290px;  # gmail-logo2. element2, # gmail-logo2. element3, # gmail-logo2. element4, # gmail-logo2. element5 float: left; display: block; bredd: 380px; höjd: 290px; marginal: -290px 0 0 0;  

styling .element1 :: innan

 # gmail-logo2. element1 :: före innehåll: "; position: relativ; marginal: 2px 0 0 14px; float: vänster; display: block; bakgrund: rgb (201, 44, 25); bredd: 30px; höjd: 276px; -moz-transform: rotera (3deg); -webkit-transform: rotera (3deg); -o-transformera: rotera (3deg); transformera: rotera (3deg); gränslinje: 22px 0 0 20px; -moz -gränssnitt: 22px 0 0 20px; -webkit-gräns-radie: 22px 0 0 20px; boxskugga: -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-skugga: -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-skugga: -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 :: efter

 # gmail-logo2. element1 :: efter innehåll: "; position: relativ; marginal: 40px 5px 0 0; float: höger; display: block; bakgrund: rgb (201, 44, 25); bredd: 30px; höjd: 238px; -moz-transform: rotera (3deg); -webkit-transform: rotera (3deg); -o-transformera: rotera (3deg); transformera: rotera (3deg); gränsradien: 0 18px 26px 0; -webkit -gränsen: 0 18px 26px 0; -moz-gränsradien: 0 18px 26px 0; boxskugg: -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-skugga: -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-skugga: -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 :: innan

 # gmail-logo2. element2 :: före innehåll: "; marginal: 22px 0 0 48px; float: vänster; display: block; bakgrund: rgb (201, 44, 25); bredd: 315px; höjd: 14px; -moz -transform: rotera (6.8deg); -webkit-transform: rotera (6.8deg); -o-transform: rotera (6.8deg); transformera: rotera (6.8deg); boxskugga: 0 1px 0 rgb 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), O4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-skugga: 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); -skugga: 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 :: efter

 # gmail-logo2. element2 :: efter innehåll: "; position: relativ; marginal: 230px 0 0 36px; float: vänster; display: block; bakgrund: rgb (201, 44, 25); bredd: 310px; höjd: 12px; boxskugga: 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-skugga: 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 O rgb (109, 10, 0); -moz-box-skugga: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb ), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

styling .Element3 :: innan

 # gmail-logo2. element3 :: före innehåll: "; position: relativ; marginal: 8px 0 0 42px; float: vänster; display: block; bakgrund: rgb (201, 44, 25); bredd: 42px; höjd: 268px; -moz-transform: rotera (3deg); -webkit-transform: rotera (3deg); -o-transformera: rotera (3deg); transformera: rotera (3deg);

styling .Element3 :: efter

 # gmail-logo2. element3 :: efter innehåll: "; position: relativ; marginal: 40px 32px 0 0; float: höger; display: block; bakgrund: rgb (201, 44, 25); bredd: 22px; höjd: 236px; -moz-transform: rotera (3.0deg); -webkit-transform: rotera (3.0deg); -o-transformera: rotera (3.0deg); transformera: rotera (3.0deg); boxaskugga: 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-skugga: 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-skugga: 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 :: innan

 # gmail-logo2. element4 :: före innehåll: "; position: relativ; marginal: -2px 0 0 130px; float: vänster; display: block; bakgrund: rgb (201, 44, 25); bredd: 54px; höjd : 192px; -moz-transform: rotera (-49deg); -webkit-transform: rotera (-49deg); -o-transformera: rotera (-49deg); transformera: rotera (-49deg); boxskugga: -1px 010 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 ) -moz-box-skugga: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 010 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-skugga: -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 :: efter

 # gmail-logo2. element4 :: efter content: "; position: relative; margin: 12px 88px 0 0; float: höger; display: block; bakgrund: rgb (201, 44, 25); bredd: 54px; höjd: 186px; gränsradio: 30px 0 0 0; -webkit-gränsradio: 30px 0 0 0; -moz-gränsradio: 30px 0 0 0; -moz-transform: rotera (53deg); -webkit-transform: rotera (53deg); -o-transformera: rotera (53deg); transformera: rotera (53deg);

styling .Element5 :: innan

# gmail-logo2. element5 :: före innehåll: "; position: relativt, marginal: 115px 0 0 125px; float: vänster; display: block; bakgrund: rgb (201, 44, 25); bredd: 2px; höjd: 150px; -moz-transform: rotera (55deg); -o-transform: rotera (55deg); -webkit-transform: rotera (55deg); transformera: rotera (55deg);

styling .Element5 :: efter

 # gmail-logo2. element5 :: efter position: relative; innehåll: "; margin: 115px 0 0 150px; float: vänster; display: block; bakgrund: rgb (201, 44, 25); bredd: 2px; höjd: 150px; -moz-transform: rotera (-50deg); webkit-transform: rotera (-50deg); -o-transformera: rotera (-50deg); transformera: rotera (-50deg);

Justering av prioriteringen av z-index.

 # gmail-logo2. element1 :: före z-index: 3; # gmail-logo2. element1 :: efter z-index: 1; / * # gmail-logo2 .element2 :: före  * / # gmail-logo2. element2 :: efter z-index: 2; # gmail-logo2. element3 :: före z-index: 5; # gmail-logo2. element3 :: efter z-index: 1; # gmail-logo2. element4 :: före z-index: 4; # gmail-logo2. element4 :: efter z-index: 3; / * # gmail-logo2. element5 :: före  # gmail- logo2. element5 :: efter  * /

Vi är nästan färdiga. Din Gmail-logotyp bör se ut så här:

Till sist, låt oss ge den en annan färg vid svängning.

 # gmail-logo2: sväva * :: efter, # gmail-logo2: sväva * :: före bakgrund: rgba (20, 196, 7, 1);  # gmail-logo2: svävar.element1 :: före box-skugga: -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-skugga: -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-skugga: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px O rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: svever. element1 :: efter box-skugga: -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-skugga: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px O 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-skugga: -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: sväva .element2 :: före box-skugga: 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-skugga: 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); -Oz-box-skugga: 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: sväva. element2 :: efter box-skugga: 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-skugga: 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); -Oz-box-skugga: 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 :: efter 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-skugga: 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); -Oz-box-skugga: 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 :: före 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-skugga: -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), -px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -webkit-box-skugga: -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), -px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); 

Förhandsgranskning | Hämta källfilen

Redaktörens anteckning: Det här inlägget är skrivet av Irham Kendeni för Hongkiat.com. Irham, även känd som Indaam, är webbdesigner och utvecklare från Indonesien. Han älskar också CSS och WordPress temat utveckling.