Come creare il logo Gmail con CSS3

Un paio di mesi fa ti ho mostrato come creare logo RSS feed con CSS3. Ho pensato che sarebbe stato divertente creare qualcosa di un po 'più complesso. Nel post di oggi, ti mostrerò come creare non uno, ma due varianti del logo Gmail usando solo CSS3.

Collegamenti a:

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

Logo Gmail n. 1

Questo primo logo è semplice e abbastanza facile da creare. Senza ulteriori indugi, ecco i passaggi. Iniziamo con l'attivazione del tuo editor di codice preferito e inserisci i seguenti codici HTML e salvalo come logo-gmail.html.

Aggiungi i seguenti stili CSS tra per ripristinare i valori CSS predefiniti.

.gmail-logo, .gmail-logo *, .gmail-logo *: prima, .gmail-logo *: dopo margine: 0; padding: 0; sfondo: trasparente; border: 0; contorno: 0; blocco di visualizzazione; font: normale normale 0/0 serif; 

I seguenti codici CSS ci danno lo sfondo rosso del logo Gmail e i lati arrotondati.

 .gmail-logo margin: 110px auto; background: rgb (201, 44, 25); larghezza: 600px; altezza: 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; 

Quindi, procediamo creando la casella bianca all'interno dello sfondo rosso.

 .gmail-logo .gmail-box overflow: nascosto; float: sinistra; larghezza: 440px; altezza: 400px; margine: 0 0 0 80 px; sfondo: bianco; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 

Per creare l'effetto "M" rosso, creeremo prima una casella con bordo rosso.

 .gmail-logo .gmail-box: before position: relativo; contenuto: "; z-index: 1; background: white; float: left; width: 320px; height: 320px; border: 100px solid rgb (201, 44, 25); margin: -310px 0 0 -40px; border- raggio: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: ruotare (45deg); -webkit-transform: ruotare (45deg); -o-transform: ruotare (45deg) );

Quindi procediamo a nascondere i lati eccessivi, dandoci una "M" completa di colore rosso.

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

Ora, diamo due sottili bordi rossi, dandogli l'aspetto della busta.

 .gmail-logo .gmail-box: dopo content: "; float: left; width: 360px; height: 360px; border: 2px solid rgb (201, 44, 25); margin: 10px 0 0 40px; -o-transform : rotate (45deg); -webkit-transform: ruotare (45deg); -moz-transform: ruotare (45deg);

Abbiamo quasi finito. Aggiungiamo un po 'di sfumatura alla busta rossa.

 .gmail-logo: after content: "; position: relative; z-index: 2; content:"; float: sinistra; margin-top: -404px; larghezza: 600px; altezza: 408px; blocco di visualizzazione; background: -moz-linear-gradient (in alto, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); background: -o-linear-gradient (top, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, rgba (255, 255, 255, 0,3)), / * color-stop (30%, rgba (255, 255, 255 , 0.2)), * / color-stop (100%, rgba (255, 255, 255, 0.1)));  

Ultimo ma non meno importante, diamo un altro colore al passaggio del mouse. Aggiungi il seguente DOCTYPE HTML prima

E i seguenti stili CSS prima

 .gmail-logo: hover background: # 313131; border-color: # 313131; / * cursore: puntatore; * / .gmail-logo: hover .gmail-box: before border-color: # 313131;  .gmail-logo: hover .gmail-box: after border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff; 

Anteprima | Scarica il file sorgente

Logo Gmail n. 2

Successivamente, creeremo il logo Gmail da un'altra prospettiva con un piccolo effetto 3D. Inizieremo con il markup HTML di base.

Dal momento che il logo ha una prospettiva diversa, inizieremo ruotandolo un po 'e creando gli strati necessari (che chiameremo elementi) in sequenza.

 # gmail-logo2 margin: 0 auto; blocco di visualizzazione; larghezza: 380px; altezza: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); -o-transform: rotate (6deg); trasformare: rotate (6deg);  # gmail-logo2 .element1 display: block; larghezza: 380px; altezza: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; blocco di visualizzazione; larghezza: 380px; altezza: 290px; margine: -290px 0 0 0;  

Messa in piega .element1 :: prima

 # gmail-logo2 .element1 :: before content: "; posizione: relativo; margin: 2px 0 0 14px; float: left; display: block; background: rgb (201, 44, 25); width: 30px; height: 276px; -moz-transform: ruotare (3deg); -webkit-transform: ruotare (3deg); -o-transform: ruotare (3deg); transform: ruotare (3deg); border-radius: 22px 0 0 20px; -moz -border-radius: 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); 

Messa in piega .element1 :: dopo

 # gmail-logo2 .element1 :: after content: "; posizione: relativa; margin: 40px 5px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 30px; height: 238px; -moz-transform: ruotare (3deg); -webkit-transform: ruotare (3deg); -o-transform: ruotare (3deg); transform: ruotare (3deg); border-radius: 0 18px 26px 0; -webkit -border-radius: 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), -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);  

Messa in piega .element2 :: prima

 # gmail-logo2 .element2 :: before content: "; margin: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); width: 315px; height: 14px; -moz -transform: ruotare (6.8deg); -webkit-transform: ruotare (6.8deg); -o-transform: ruotare (6.8deg); transform: ruotare (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);

Messa in piega .element2 :: dopo

 # gmail-logo2 .element2 :: after content: "; posizione: relativa; margin: 230px 0 0 36px; float: left; display: block; background: rgb (201, 44, 25); width: 310px; height: 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);

Messa in piega .element3 :: prima

 # gmail-logo2 .element3 :: before content: "; posizione: relativa; margin: 8px 0 0 42px; float: left; display: block; background: rgb (201, 44, 25); width: 42px; height: 268px; -moz-transform: ruotare (3deg); -webkit-transform: ruotare (3deg); -o-transform: ruotare (3deg); transform: ruotare (3deg);

Messa in piega .element3 :: dopo

 # gmail-logo2 .element3 :: after content: "; posizione: relativa; margin: 40px 32px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 22px; height: 236px; -moz-transform: ruotare (3.0deg); -webkit-transform: ruotare (3.0deg); -o-transform: ruotare (3.0deg); transform: ruotare (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);

Messa in piega .element4 :: prima

 # gmail-logo2 .element4 :: before content: "; posizione: relativa; margin: -2px 0 0 130px; float: left; display: block; background: rgb (201, 44, 25); width: 54px; height : 192px; -moz-transform: rotazione (-49deg); -webkit-transform: rotazione (-49deg); -o-transform: rotazione (-49deg); trasformazione: rotazione (-49deg); 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 -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 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), -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);

Messa in piega .element4 :: dopo

 # gmail-logo2 .element4 :: after content: "; posizione: relativa; margin: 12px 88px 0 0; float: right; display: block; background: rgb (201, 44, 25); width: 54px; height: 186px; border-radius: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotazione (53deg); -webkit-transform: ruota (53 gradi); -o-trasforma: ruota (53 gradi); trasforma: ruota (53 gradi);

Messa in piega .element5 :: prima

# gmail-logo2 .element5 :: before content: "; position: relative; margin: 115px 0 0 125px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-transform: rotazione (55deg); -o-transform: rotazione (55deg); -webkit-transform: rotazione (55deg); transform: rotazione (55deg);

Messa in piega .element5 :: dopo

 # gmail-logo2 .element5 :: after position: relative; contenuto: "; margin: 115px 0 0 150px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-transform: ruotare (-50deg); webkit-transform: ruotare (-50deg); -o-transform: ruotare (-50deg); transform: ruotare (-50deg);

Regolazione della priorità di z-index.

 # gmail-logo2 .element1 :: before z-index: 3; # gmail-logo2 .element1 :: after z-index: 1; / * # gmail-logo2 .element2 :: before  * / # gmail-logo2 .element2 :: after z-index: 2; # gmail-logo2 .element3 :: before z-index: 5; # gmail-logo2 .element3 :: after z-index: 1; # gmail-logo2 .element4 :: before z-index: 4; # gmail-logo2 .element4 :: after z-index: 3; / * # gmail-logo2 .element5 :: before  # gmail- logo2 .element5 :: after  * /

Abbiamo quasi finito. Il tuo logo Gmail dovrebbe assomigliare a questo:

Infine, diamo un altro colore al passaggio del mouse.

 # gmail-logo2: hover *: after, # gmail-logo2: hover * :: before background: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: before 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 :: after 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 :: before 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 :: after 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 :: after 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 :: before 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 0 rgb (10, 90, 4), -8px 0 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 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-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 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); 

Anteprima | Scarica il file sorgente

Nota dell'editore: Questo post è scritto da Irham Kendeni per Hongkiat.com. Irham, noto anche come Indaam, è un web designer e sviluppatore dall'Indonesia. Ama anche lo sviluppo di temi CSS e WordPress.