Як створити логотип Gmail за допомогою CSS3

Кілька місяців тому я показав вам, як створити логотип RSS-каналу за допомогою CSS3. Я вирішив, що було б цікаво створити щось більш складне. У сьогоднішньому пості я покажу вам, як створити не одну, а дві варіації логотипу Gmail, використовуючи тільки CSS3.

Ярлики до:

• Логотип Gmail Підручник CSS # 1 | Попередній перегляд
• Логотип Gmail CSS підручник # 2 | Попередній перегляд

Логотип Gmail №1

Цей перший логотип простий і досить простий у створенні. Без подальших розбіжностей, ось кроки. Почнемо з запуску улюбленого редактора коду та введіть наступні HTML-коди та збережіть його як logo-gmail.html.

Додайте наступні стилі CSS скинути значення CSS за замовчуванням.

.gmail-logo, .gmail-logo *, .gmail-logo *: до, .gmail-логотип *: після margin: 0; заповнення: 0; фон: прозорий; кордон: 0; контур: 0; дисплей: блок; шрифт: нормальний нормальний 0/0 serif; 

Наступні коди CSS дають нам червоний логотип Gmail і округлені сторони.

 .gmail-logo margin: 110px auto; фон: rgb (201, 44, 25); ширина: 600px; висота: 400px; border-top: 4px твердий rgb (201, 44, 25); кордон нижній: 4px твердий rgb (201, 44, 25); кордон-радіус: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; 

Потім ми продовжуємо створювати біле поле на червоному тлі.

 .gmail-logo .gmail-box переповнення: прихований; поплавок: лівий; ширина: 440px; висота: 400px; маржа: 0 0 0 80px; фон: білий; кордон-радіус: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 

Для того, щоб створити червоний ефект "М", ми спочатку створимо ящик з червоною облямівкою.

 .gmail-logo .gmail-box: до position: relative; content: "; z-index: 1; фон: білий; float: лівий; ширина: 320px; висота: 320px; кордон: 100px твердий rgb (201, 44, 25); край: -310px 0 0 -40px; -mos-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg); -o-transform: Rotate (45deg); );

Потім ми приховуємо надмірні сторони, даючи нам повний "М" в червоний колір.

 .gmail-logo .gmail-box переповнення: прихований; 

Тепер давайте виділимо дві тонкі червоні межі, що надають йому вигляд конверта.

 .gmail-logo .gmail-box: після content: "; float: left; width: 360px; висота: 360px; кордон: 2px твердий rgb (201, 44, 25); margin: 10px 0 0 40px; -o-transform -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg);

Ми майже готові. Додамо градієнт до червоного конверта.

 .gmail-logo: після content: "; position: relative; z-index: 2; content:"; поплавок: лівий; margin-top: -404px; ширина: 600px; висота: 408px; дисплей: блок; background: -moz-linear-gradient (зверху, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); фон: -o-лінійний градієнт (верхній, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); background: -webkit-gradient (лінійний, лівий верхній, лівий нижній, колір-стоп (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)));  

І останнє, але не менш важливе, дамо йому інший колір після зависання. Додайте до цього HTML DOCTYPE

І наступні стилі CSS раніше

 .gmail-logo: hover background: # 313131; border-color: # 313131; / * курсор: покажчик; * / .gmail-логотип: hover .gmail-box: до border-color: # 313131;  .gmail-логотип: hover .gmail-box: після border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff; 

Попередній перегляд | Завантажити вихідний файл

Логотип Gmail №2

Далі ми створимо логотип Gmail з іншої точки зору з невеликим 3D-ефектом. Почнемо з базової HTML-розмітки.

Оскільки логотип має іншу перспективу, ми почнемо обертати його трохи і створювати необхідні шари (які ми назвемо їх елементи) послідовно.

 # gmail-logo2 margin: 0 auto; дисплей: блок; ширина: 380px; висота: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); -o-transform: повернути (6deg); transform: rotate (6deg);  # gmail-logo2 .element1 display: block; ширина: 380px; висота: 290px;  # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; дисплей: блок; ширина: 380px; висота: 290px; маржа: -290px 0 0 0;  

Стиль .element1 :: перед

 # gmail-logo2 .element1 :: before content: "; position: relative; margin: 2px 0 0 14px; float: left; дисплей: блок; фон: rgb (201, 44, 25); ширина: 30px; висота: -Moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg); кордон-радіус: 22px 0 0 20px; -moz -border-radius: 22px 0 0 20px; -bunkit-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) -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); 

Стиль .element1 :: after

 # gmail-logo2 .element1 :: after content: "; position: relative; margin: 40px 5px 0 0; float: right; display: block; background: rgb (201, 44, 25); ширина: 30px; висота: -Moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg); border-radius: 0 18px 26px 0; -webkit -об'ємний радіус: 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);  

Стиль .element2 :: раніше

 # gmail-logo2 .element2 :: before content: "; margin: 22px 0 0 48px; float: лівий; дисплей: блок; фон: rgb (201, 44, 25); ширина: 315px; висота: 14px; -moz -transform: rotate (6.8deg); -o-transform: rotate (6.8deg); transform: rotate (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); -шаня: 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);

Стиль .element2 :: after

 позиція: відносна; край: 230px 0 0 36px; float: лівий; дисплей: блок; фон: rgb (201, 44, 25); ширина: 310px; висота: 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);

Стиль .element3 :: перед

 # gmail-logo2 .element3 :: до content: "; position: relative; margin: 8px 0 0 42px; float: left; display: block; background: rgb (201, 44, 25); ширина: 42px; висота: -Moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg);

Стиль .element3 :: after

 # gmail-logo2 .element3 :: after content: "; position: relative; margin: 40px 32px 0 0; float: right; display: block; background: rgb (201, 44, 25); ширина: 22px; висота: -Moz-transform: rotate (3.0deg); -webkit-transform: rotate (3.0deg); -o-transform: rotate (3.0deg); transform: rotate (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);

Стиль .element4 :: перед

 # gmail-logo2 .element4 :: before content: "; position: relative; margin: -2px 0 0 130px; float: left; дисплей: блок; фон: rgb (201, 44, 25); ширина: 54px; висота -Moz-transform: rotate (-49deg); -e-transform: rotate (-49deg); -o-transform: rotate (-49deg); transform: rotate (-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);

Стиль .element4 :: after

 # gmail-logo2 .element4 :: after content: "; position: relative; margin: 12px 88px 0 0; float: right; display: block; background: rgb (201, 44, 25); ширина: 54px; висота: Кордон-радіус: 30px 0 0 0; -вебкіт-кордон-радіус: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotate (53deg); -webkit-transform: обернути (53deg); -o-transform: rotate (53deg); transform: rotate (53deg);

Стиль .element5 :: перед

# gmail-logo2 .element5 :: before content: "; position: relative; margin: 115px 0 0 125px; float: left; дисплей: блок; фон: rgb (201, 44, 25); ширина: 2px; висота: -Moz-transform: rotate (55deg); -o-transform: rotate (55deg); -webkit-transform: rotate (55deg); transform: rotate (55deg);

Стиль .element5 :: after

 # gmail-logo2 .element5 :: after position: relative; content: "; margin: 115px 0 0 150px; float: left; дисплей: блок; фон: rgb (201, 44, 25); ширина: 2px; висота: 150px; -moz-transform: rotate (-50deg); - webkit-transform: rotate (-50deg); -o-transform: rotate (-50deg); transform: rotate (-50deg);

Налаштування пріоритету z-індекс.

 # gmail-logo2 .element1 :: перед z-index: 3; # gmail-logo2 .element1 :: після z-index: 1; / * # gmail-logo2 .element2 :: до  * / # gmail-logo2 .element2 :: після z-index: 2; # gmail-logo2 .element3 :: перед z-index: 5; # gmail-logo2 .element3 :: after z-index: 1; # gmail-logo2 .element4 :: перед z-index: 4; # gmail-logo2 .element4 :: після z-index: 3; / * # gmail-logo2 .element5 :: до  # gmail- logo2 .element5 :: після  * /

Ми майже готові. Логотип Gmail має виглядати приблизно так:

Нарешті, дамо їй інший колір після зависання.

 # gmail-logo2: hover * :: after, # gmail-logo2: hover * :: before фон: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: до 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 :: після 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 :: до 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 :: після 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 :: до 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 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); 

Попередній перегляд | Завантажити вихідний файл

Примітка редактора: Цей пост написано Ірхем Кендені для Hongkiat.com. Irham, також відомий як Indaam, є веб-дизайнером і розробником з Індонезії. Він також любить розробку теми CSS і WordPress.