Sådan oprettes Gmail-logo med CSS3

For nogle måneder siden viste jeg dig, hvordan du opretter RSS feed logo med CSS3. Jeg regnede med at det ville være sjovt at skabe noget lidt mere komplekst. I dagens indlæg vil jeg vise dig, hvordan du opretter ikke en, men to variationer af Gmail-logoet ved hjælp af kun CSS3.

Genveje til:

• Gmail logo CSS tutorial # 1 | Eksempel
• Gmail logo CSS tutorial # 2 | Eksempel

Gmail logo # 1

Dette første logo er enkelt og ret nemt at oprette. Uden yderligere ado er her trinene. Lad os starte med at skyde din foretrukne kode editor og indtaste følgende HTML-koder, og gem den som logo-gmail.html.

Tilføj følgende CSS-stilarter mellem for at nulstille standard CSS-værdier.

.gmail-logo, .gmail-logo *, .gmail-logo *: før, .gmail-logo *: efter margin: 0; padding: 0; baggrund: gennemsigtig; kant: 0; skitse: 0; display: block; skrifttype: normal normal 0/0 serif; 

Følgende CSS-koder giver os Gmail-logoets røde baggrund og afrundede sider.

 .gmail-logo margin: 110px auto; baggrund: rgb (201, 44, 25); bredde: 600px; højde: 400px; border-top: 4px solid rgb (201, 44, 25); border-bottom: 4px solid rgb (201, 44, 25); border-radius: 10px; moz-border-radius: 10px; -webkit-border-radius: 10px; 

Så fortsætter vi med at skabe den hvide boks inden for den røde baggrund.

 .gmail-logo .gmail-box overløb: skjult; flyde: venstre; bredde: 440px; højde: 400px; margen: 0 0 0 80px; baggrund: hvid; border-radius: 5px; moz-border-radius: 5px; -webkit-border-radius: 5px; 

For at oprette den røde "M" -effekt skaber vi først en boks med rød kant.

 .gmail-logo .gmail-box: før position: relative; indhold: "; z-indeks: 1; baggrund: hvid; float: venstre; bredde: 320px; højde: 320px; grænse: 100px solid rgb (201, 44, 25); margin: -310px 0 0 -40px; radius: 10px; -moz-grænse-radius: 10px; -webkit-grænse-radius: 10px; -moz-transform: roter (45deg); -webkit-transform: roter (45deg); -o-transformer: roter );

Så fortsætter vi med at gemme de store sider, hvilket giver os en komplet "M" i rød farve.

 .gmail-logo .gmail-box overløb: skjult; 

Lad os nu give to tynde røde grænser og give konvolutten udseende.

 .gmail-logo .gmail-box: efter indhold: "; float: venstre; bredde: 360px; højde: 360px; grænse: 2px solid rgb (201, 44, 25); margin: 10px 0 0 40px; -o-transform : roter (45deg); -webkit-transform: roter (45deg); -moz-transform: roter (45deg);

Vi er næsten færdige. Lad os tilføje en gradient til den røde konvolut.

 .gmail-logo: efter indhold: "; position: relative; z-indeks: 2; indhold:"; flyde: venstre; margin-top: -404px; bredde: 600px; højde: 408px; display: block; baggrund: -moz-lineær gradient (top, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); baggrund: -o-lineær gradient (top, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); baggrund: -webkit-gradient (lineær, venstre øverste, venstre bund, farve stop (0%, rgba (255, 255, 255, 0.3)), / * farve stop (30%, rgba (255, 255, 255 , 0,2)), * / farve-stop (100%, rgba (255, 255, 255, 0,1)));  

Sidst men ikke mindst, lad os give det en anden farve på svævet. Tilføj følgende HTML DOCTYPE før

Og følgende CSS-stilarter før

 .gmail-logo: svever baggrund: # 313131; border-color: # 313.131; / * markør: pointer; * / .gmail-logo: hover .gmail-box: før border-color: # 313131;  .gmail-logo: hover .gmail-box: efter border-color: # 313131; border-bottom-farve: #fff; border-højre-farve: #fff; 

Preview | Download kildefil

Gmail logo # 2

Dernæst opretter vi Gmail-logoet fra et andet perspektiv med en lille 3D-effekt. Vi starter med den grundlæggende HTML-markup.

Da logoet har et andet perspektiv, begynder vi ved at rotere det lidt og oprette de nødvendige lag (som vi kalder dem elementer) i rækkefølge.

 # gmail-logo2 margin: 0 auto; display: block; bredde: 380px; højde: 290px; moz-transformation: rotate (6deg); -webkit-transformation: rotate (6deg); -o-transformation: rotere (6deg); transformation: rotate (6deg);  # gmail-logo2. element1 display: block; bredde: 380px; højde: 290px;  # gmail-logo2. element2, # gmail-logo2. element3, # gmail-logo2. element4, # gmail-logo2. element5 float: left; display: block; bredde: 380px; højde: 290px; margin: -290px 0 0 0;  

Styling .element1 :: før

 # gmail-logo2. element1 :: før indhold: "; position: relative; margin: 2px 0 0 14px; float: venstre; display: blok; baggrund: rgb (201, 44, 25); bredde: 30px; højde: 276px; -moz-transform: rotere (3deg); -webkit-transform: rotere (3deg); -o-transformere: rotere (3deg); transformere: rotere (3deg); grænseradius: 22px 0 0 20px; -moz -borde-radius: 22px 0 0 20px; -webkit-grænse-radius: 22px 0 0 20px; boksskygge: -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-boks-skygge: -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-boks-skygge: -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 indhold: "; position: relative; margin: 40px 5px 0 0; float: højre; display: blok; baggrund: rgb (201, 44, 25); bredde: 30px; højde: 238px; -moz-transform: rotere (3deg); -webkit-transform: rotere (3deg); -o-transformere: rotere (3deg); transformere: rotere (3deg); grænseradius: 0 18px 26px 0; -webkit -borde-radius: 0 18px 26px 0; -moz-grænse-radius: 0 18px 26px 0; boksskygge: -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-boks-skygge: -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-boks-skygge: -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 :: før

 # gmail-logo2 .element2 :: før indhold: "; margin: 22px 0 0 48px; float: venstre; display: blok; baggrund: rgb (201, 44, 25); bredde: 315px; højde: 14px; -moz -transform: roter (6.8deg); -webkit-transform: roter (6.8deg); -o-transformer: roter (6.8deg); transformer: roter (6.8deg); box-skygge: 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-boks-skygge: 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-boks -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 :: efter

 # gmail-logo2. element2 :: efter indhold: "; position: relative; margin: 230px 0 0 36px; float: venstre; display: blok; baggrund: rgb (201, 44, 25); bredde: 310px; højde: 12px; boksskygge: 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-boks-skygge: 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-skygge: 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 :: før

 # gmail-logo2. element3 :: før indhold: "; position: relative; margin: 8px 0 0 42px; float: venstre; display: blok; baggrund: rgb (201, 44, 25); bredde: 42px; højde: 268px; -moz-transform: roter (3deg); -webkit-transform: roter (3deg); -o-transformer: roter (3deg); transformer: roter (3deg);

Styling .Element3 :: efter

 # gmail-logo2. element3 :: efter indhold: "; position: relative; margin: 40px 32px 0 0; float: højre; display: blok; baggrund: rgb (201, 44, 25); bredde: 22px; højde: 236px; -moz-transform: rotate (3.0deg); -webkit-transform: rotere (3.0deg); -o-transformere: rotere (3.0deg); transformere: rotere (3.0deg); box-skygge: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 04px 0 rgb (109, 10, 0), 0 5px 0 rgb 109, 10, 0), -6px 6px 0 rgb (109,10,0); -webkit-boks-skygge: 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-skygge: 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 :: før

 # gmail-logo2. element4 :: før indhold: "; position: relative; margin: -2px 0 0 130px; float: venstre; display: blok; baggrund: rgb (201, 44, 25); bredde: 54px; højde : 192px; -moz-transform: rotate (-49deg); -webkit-transform: rotere (-49deg); -o-transformere: rotere (-49deg); transformere: rotere (-49deg); bokseskygge: -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-skygge: -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-boks-skygge: -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 indhold: "; position: relative; margin: 12px 88px 0 0; float: højre; display: blok; baggrund: rgb (201, 44, 25); bredde: 54px; højde: 186px; grænse-radius: 30px 0 0 0; -webkit-grænse-radius: 30px 0 0 0; -moz-grænse-radius: 30px 0 0 0; -moz-transform: rotere (53deg); -webkit-transform: roter (53deg); -o-transformer: roter (53deg); transformer: roter (53deg);

Styling .element5 :: før

# gmail-logo2. element5 :: før indhold: "; position: relative; margin: 115px 0 0 125px; float: venstre; display: blok; baggrund: rgb (201, 44, 25); bredde: 2px; højde: 150px; -moz-transform: roter (55deg); -o-transformer: roter (55deg); -webkit-transform: roter (55deg); transformer: roter (55deg);

Styling .element5 :: efter

 # gmail-logo2. element5 :: efter position: relative; indhold: "; margin: 115px 0 0 150px; float: venstre; display: blok; baggrund: rgb (201, 44, 25); bredde: 2px; højde: 150px; -moz-transform: rotere (-50deg); webkit-transform: roter (-50deg); -o-transformer: roter (-50deg); transform: roter (-50deg);

Justering af prioritet for z-index.

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

Vi er næsten færdige. Dit Gmail-logo skal se sådan ud:

Endelig lad os give det en anden farve ved svinget.

 # gmail-logo2: svæver * :: efter, # gmail-logo2: svæver * :: før (baggrund: rgba (20, 196, 7, 1);  # gmail-logo2: svever. element1 :: før box-skygge: -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); -webkit-boks-skygge: -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-skygge: -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 :: efter box-shadow: -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-skygge: -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-boks-skygge: -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æveelement. element2 :: før boksskygge: 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-boks-skygge: 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-skygge: 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æveelement. element2 :: efter boksskygge: 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-boks-skygge: 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-skygge: 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æveelement. element3 :: efter boksskygge: 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-boks-skygge: 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-skygge: 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æveelement. element4 :: før boksskygge: -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 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -moz-box-skygge: -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 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -webkit-boks-skygge: -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 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); 

Preview | Download kildefil

Redaktørens note: Dette indlæg er skrevet af Irham Kendeni til Hongkiat.com. Irham, også kendt som Indaam, er webdesigner og udvikler fra Indonesien. Han elsker også CSS og WordPress tema udvikling.