Comment créer un logo Gmail avec CSS3
Il y a quelques mois, je vous ai montré comment créer un logo de flux RSS avec CSS3. J'ai pensé que ce serait amusant de créer quelque chose d'un peu plus complexe. Dans le post d'aujourd'hui, je vais vous montrer comment créer non pas un, mais deux variantes du logo Gmail en utilisant uniquement CSS3..
Raccourcis vers:
- Logo Gmail tutoriel CSS # 1 | Aperçu
- Logo Gmail - Tutoriel CSS n ° 2 | Aperçu
Logo Gmail # 1
Ce premier logo est simple et assez facile à créer. Sans plus tarder, voici les étapes. Commençons par lancer votre éditeur de code préféré et saisissez les codes HTML suivants, puis enregistrez-le sous le nom suivant: logo-gmail.html.
Gmail CSS Logo
Ajoutez les styles CSS suivants entre réinitialiser les valeurs CSS par défaut.
.logo gmail, logo gmail *, logo gmail *: avant, logo gmail *: après marge: 0; rembourrage: 0; fond: transparent; bordure: 0; contour: 0; bloc de visualisation; police: normal normal 0/0 serif;
Les codes CSS suivants nous donnent le fond rouge du logo Gmail et ses côtés arrondis.
.gmail-logo margin: 110px auto; arrière-plan: RGB (201, 44, 25); largeur: 600px; hauteur: 400px; bord supérieur: rgb solide 4px (201, 44, 25); bordure inférieure: rgb solide 4px (201, 44, 25); border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Ensuite, nous procédons à la création de la boîte blanche dans le fond rouge.
.gmail-logo .gmail-box débordement: masqué; float: gauche; largeur: 440px; hauteur: 400px; marge: 0 0 0 80px; fond blanc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
Pour créer l'effet "M" rouge, nous allons d'abord créer une boîte avec une bordure rouge.
.gmail-logo .gmail-box: avant position: relative; content: "; index z: 1; fond: blanc; float: gauche; largeur: 320px; hauteur: 320px; bordure: 100px solide rgb (201, 44, 25); marge: -310px 0 0 -40px; border- rayon: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transformation: rotation (45deg); -webkit-transformation: rotation (45deg); -o-transformation: rotation (45deg) );
Ensuite, nous procédons en cachant les côtés excessifs, nous donnant un "M" complet en rouge.
.gmail-logo .gmail-box débordement: masqué;
Maintenant, donnons deux fine bordure rouge, en lui donnant le look d'enveloppe.
.gmail-logo .gmail-box: after content: "; float: left; width: 360px; height: 360px; border: 2px solid rgb (201, 44, 25); marge: 10px 0 0 40px; -o-transformer : rotation (45deg); -webkit-transformation: rotation (45deg); -moz-transformation: rotation (45deg);
On a presque fini. Ajoutons un peu de dégradé à l'enveloppe rouge.
.gmail-logo: after content: "; position: relative; z-index: 2; content:"; float: gauche; marge supérieure: -404px; largeur: 600px; hauteur: 408px; bloc de visualisation; fond: -moz-linear-gradient (haut, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,3) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); arrière-plan: -o-linear-gradient (haut, rgba (255, 255, 255, 0,3) 0%, / * rgba (255, 255, 255, 0,2) 30%, * / rgba (255, 255, 255, 0,1 ) 100%); arrière-plan: -webkit-gradient (linéaire, haut à gauche, bas à gauche, arrêt de couleur (0%, rgba (255, 255, 255, 0.3)), / * arrêt de couleur (30%, rgba (255, 255, 255) , 0,2)), * / color-stop (100%, rgba (255, 255, 255, 0,1)));
Dernier point mais non le moindre, donnons-lui une couleur différente lors du survol. Ajoutez le DOCTYPE HTML suivant avant
Et les styles CSS suivants avant
.gmail-logo: survol background: # 313131; couleur de bordure: # 313131; / * curseur: pointeur; * / .gmail-logo: survolez .gmail-box: before border-color: # 313131; .gmail-logo: survol. gmail-box: après border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff;
Aperçu | Télécharger le fichier source
Logo Gmail # 2
Nous allons ensuite créer le logo Gmail sous un autre angle avec un petit effet 3D. Nous allons commencer avec le balisage HTML de base.
Logo Gmail 2
Le logo ayant une perspective différente, nous allons commencer par le faire pivoter un peu et créer les calques nécessaires (que nous appellerons éléments) en séquence.
# gmail-logo2 margin: 0 auto; bloc de visualisation; largeur: 380px; hauteur: 290px; -moz-transform: rotation (6deg); -webkit-transform: rotation (6deg); -o-transformer: faire pivoter (6deg); transformer: faire pivoter (6deg); # gmail-logo2 .element1 display: block; largeur: 380px; hauteur: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; bloc de visualisation; largeur: 380px; hauteur: 290px; marge: -290px 0 0 0;
Coiffant .element1 :: before
# gmail-logo2 .element1 :: before content: "; position: relative; marge: 2px 0 0 14px; float: gauche; affichage: bloc; arrière-plan: rgb (201, 44, 25); largeur: 30px; hauteur: 276 pixels; -moz-transformation: rotation (3 degrés); -webkit-transformation: rotation (3 degrés); -o-transformation: rotation (3 degrés); transformation: rotation (3 degrés); bord-rayon: 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);
Coiffant .element1 :: after
# gmail-logo2 .element1 :: after content: "; position: relative; marge: 40px 5px 0 0; float: droite; affichage: bloc; arrière-plan: rgb (201, 44, 25); largeur: 30px; hauteur: 238px; -moz-transformation: rotation (3deg); -webkit-transformation: rotation (3deg); -o-transformation: rotation (3deg); transformation: rotation (3deg); bord-rayon: 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);
Coiffant .element2 :: before
# gmail-logo2 .element2 :: before content: "; marge: 22px 0 0 48px; float: gauche; affichage: bloc; arrière-plan: rgb (201, 44, 25); largeur: 315px; hauteur: 14px; -moz -transform: tourner (6.8deg); -webkit-transformer: faire pivoter (6.8deg); -o-transformer: faire pivoter (6.8deg); transformer: faire pivoter (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);
Coiffant .element2 :: after
# gmail-logo2 .element2 :: after content: "; position: relative; marge: 230px 0 0 36px; float: gauche; affichage: bloc; arrière-plan: rgb (201, 44, 25); largeur: 310px; hauteur: 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);
Coiffant .element3 :: before
# gmail-logo2 .element3 :: before content: "; position: relative; marge: 8px 0 0 42px; float: gauche; affichage: bloc; arrière-plan: rgb (201, 44, 25); largeur: 42px; hauteur: 268px; -moz-transformation: rotation (3deg); -webkit-transformation: rotation (3deg); -o-transformation: rotation (3deg); transformation: rotation (3deg);
Coiffant .element3 :: after
# gmail-logo2 .element3 :: after content: "; position: relative; marge: 40px 32px 0 0; float: droite; affichage: bloc; arrière-plan: rgb (201, 44, 25); largeur: 22px; hauteur: 236px; -moz-transformation: rotation (3.0deg); -webkit-transformation: rotation (3.0deg); -o-transformation: rotation (3.0deg); transformation: rotation (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);
Coiffant .element4 :: before
# gmail-logo2 .element4 :: before content: "; position: relative; marge: -2px 0 0 130px; float: gauche; affichage: bloc; arrière-plan: rgb (201, 44, 25); largeur: 54px; hauteur : 192px; -moz-transformer: faire pivoter (-49deg); -webkit-transformer: faire pivoter (-49deg); -o-transformer: faire pivoter (-49deg); transformer: faire pivoter (-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);
Coiffant .element4 :: after
# gmail-logo2 .element4 :: after content: "; position: relative; marge: 12px 88px 0 0; float: droite; affichage: bloc; arrière-plan: rgb (201, 44, 25); largeur: 54px; hauteur: 186px; border-radius: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotation (53deg); -webkit-transform: rotation (53 degrés); -o-transformation: rotation (53 degrés); transformation: rotation (53 degrés);
Coiffant .element5 :: before
# gmail-logo2 .element5 :: before content: "; position: relative; marge: 115px 0 0 125px; float: gauche; affichage: bloc; arrière-plan: rgb (201, 44, 25); largeur: 2px; hauteur: 150px; -moz-transformation: rotation (55deg); -o-transformation: rotation (55deg); -webkit-transformation: rotation (55deg); transformation: rotation (55deg);
Coiffant .element5 :: after
# gmail-logo2 .element5 :: after position: relative; content: "; margin: 115px 0 0 150px; float: left; display: block; background: rgb (201, 44, 25); width: 2px; height: 150px; -moz-transform: rotation (-50deg); - webkit-transformation: rotation (-50deg); -o-transformation: rotation (-50deg); transformation: rotation (-50deg);
Ajuster la priorité de 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 index-z: 4; # gmail-logo2 .element4 :: after index-z: 3; / * # gmail-logo2 .element5 :: avant # gmail- logo2 .element5 :: after * /
On a presque fini. Votre logo Gmail devrait ressembler à ceci:
Enfin, donnons-lui une couleur différente en survolant.
# gmail-logo2: survol * :: après, # gmail-logo2: survol * :: avant background: rgba (20, 196, 7, 1); # gmail-logo2: survolez .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: survolez .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: survolez .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: survolez .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: survolez .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: survolez .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);
Aperçu | Télécharger le fichier source
Note de l'éditeur: Cet article est écrit par Irham Kendeni pour Hongkiat.com. Irham, également connu sous le nom d'Indaam, est un concepteur et développeur Web indonésien. Il aime aussi le développement de thèmes CSS et WordPress.
