Как да създадете лого на Gmail с CSS3

Преди няколко месеца ви показах как да създадете логото на RSS емисия с CSS3. Реших, че ще е забавно да се създаде нещо по-сложно. В днешния пост ще ви покажа как да създадете не едно, а две вариации на логото на Gmail, използвайки само CSS3.

Преки пътища до:

• Лого на Gmail CSS урок # 1 | предварителен преглед
• Лого на Gmail CSS урок # 2 | предварителен преглед

Лого на Gmail # 1

Това първо лого е просто и доста лесно за създаване. Без повече шум, тук са стъпките. Нека започнем с изстрелването на любимия ви редактор на код и въведете следните HTML кодове и го запазете като лого-gmail.html.

Добавете следните CSS стилове между тях за нулиране на стойностите по подразбиране на CSS.

.gmail-logo, .gmail-logo *, .gmail-logo *: преди, .gmail-logo *: след margin: 0; подложка: 0; фон: прозрачен; граница: 0; очертание: 0; езика: блок; шрифт: нормален нормален 0/0 serif; 

Следните CSS кодове ни дават червения фон на логото на Gmail и заоблени страници.

 .gmail-logo марж: 110px авто; фон: rgb (201, 44, 25); ширина: 600px; Височина: 400 пиксела; border-top: 4px твърдо rgb (201, 44, 25); граница отдолу: 4px твърд rgb (201, 44, 25); граничен радиус: 10px; -moz гранично-радиус: 10px; -webkit гранично-радиус: 10px; 

След това продължаваме да създаваме бялата кутия в червения фон.

 .gmail-logo .gmail-box препълване: скрито; плаваш: ляв; ширина: 440px; Височина: 400 пиксела; марж: 0 0 0 80px; фон: бял; граничен радиус: 5px; -moz гранично-радиус: 5px; -webkit гранично-радиус: 5px; 

За да създадем червения "М" ефект, първо ще създадем кутия с червена рамка.

 .gmail-logo .gmail-box: преди position: relative; съдържание: "; z-индекс: 1; фон: бял; поплавък: ляв; ширина: 320px; височина: 320px; граница: 100px твърд rgb (201, 44, 25); граница: -310px 0 0 -40px; радиус: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg); -o-transform: rotate (45deg); -o-transform: rotate (45deg); );

След това продължаваме да прикриваме прекалените страни, давайки ни пълен "М" в червен цвят.

 .gmail-logo .gmail-box препълване: скрито; 

Сега, нека да дадем две тънки червени граници, давайки му външния вид на плика.

 .gmail-logo .gmail-box: след content: "; float: left; ширина: 360px; височина: 360px; граница: 2px твърд rgb (201, 44, 25); марж: 10px 0 0 40px; -o-transform -webkit-преобразуване: завъртане (45deg); -moz-transform: rotate (45deg);

Ние сме почти готови. Нека добавим някакъв градиент към червения плик.

 .gmail-logo: след content: "; position: relative; z-index: 2; съдържание:"; плаваш: ляв; марж-нагоре: -404px; ширина: 600px; височина: 408px; езика: блок; фон: -moz-linear-gradient (отгоре, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); фон: -о-линеен градиент (отгоре, 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; гранично-цвят: # 313 131; / * курсор: показалец; * / .gmail-logo: навъртам .gmail-box: преди border-color: # 313131;  .gmail-logo: навъртам .gmail-box: след border-color: # 313131; гранично-отдолу цвят: #fff; гранично-десен цвят: #fff; 

Преглед | Изтегляне на изходния файл

Лого на Gmail # 2

След това ще създадем логото на Gmail от друга перспектива с малък 3D ефект. Ще започнем с основния HTML код.

Тъй като логото има различна гледна точка, ще започнем с неговото въртене малко и ще създадем необходимите слоеве (които ще ги наричаме елементи) в последователност.

 # gmail-logo2 margin: 0 auto; езика: блок; ширина: 380px; височина: 290px; -moz трансформация: завъртане (6deg); -webkit трансформация: завъртане (6deg); -о-трансформиране: върти (6deg); Трансформация: завъртане (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 :: преди content: "; позиция: относителна; граница: 2px 0 0 14px; поплавък: ляв; дисплей: блок; фон: rgb (201, 44, 25); ширина: 30px; височина: -Moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg); border-radius: 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 :: след

 # gmail-logo2 .element1 :: after content: "; position: relative; margin: 40px 5px 0 0; float: right; дисплей: блок; фон: 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; -моз-граничен радиус: 0 18px 26px 0; кутия-сянка: -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), -3 px 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 :: преди content: "; margin: 22px 0 0 48px; плаващ: ляв; дисплей: блок; фон: 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); -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);

оформление .element2 :: след

 # gmail-logo2 .element2 :: after content: "; position: relative; margin: 230px 0 0 36px; float: left; дисплей: блок; фон: rgb (201, 44, 25); ширина: 310px; височина: Кутия-сянка: 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);

оформление .element3 :: преди

 # gmail-logo2 .element3 :: преди content: "; позиция: относителна; граница: 8px 0 0 42px; поплавък: ляво; дисплей: блок; фон: rgb (201, 44, 25); ширина: 42px; височина: -Moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg);

оформление .element3 :: след

 # gmail-logo2 .element3 :: after content: "; position: relative; margin: 40px 32px 0 0; float: right; дисплей: блок; фон: 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 :: преди content: "; позиция: относителна; марж: -2px 0 0 130px; поплавък: ляв; дисплей: блок; фон: rgb (201, 44, 25); ширина: 54px; височина -Moz-transform: rotate (-49deg); -webkit-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 :: след

 # gmail-logo2 .element4 :: after content: "; position: relative; margin: 12px 88px 0 0; float: right; дисплей: блок; фон: rgb (201, 44, 25); ширина: 54px; височина: Радиус на границата: 30px 0 0 0; -bubit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: rotate (53deg); -webkit-transform: -o-transform: rotate (53deg); transform: rotate (53deg);

оформление .element5 :: преди

# gmail-logo2 .element5 :: преди content: "; позиция: относителна; марж: 115px 0 0 125px; поплавък: ляв; дисплей: блок; фон: rgb (201, 44, 25); ширина: 2px; височина: -Moz-transform: rotate (55deg); -o-transform: rotate (55deg); -webkit-transform: rotate (55deg); transform: rotate (55deg);

оформление .element5 :: след

 # gmail-logo2 .element5 :: after position: relative; съдържание: "; марж: 115px 0 0 150px; поплавък: ляв; дисплей: блок; фон: 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 :: след 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 :: след 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 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 rgb (10, 90, 4); 

Преглед | Изтегляне на изходния файл

Бележка на редактора: Тази публикация е написана от Ирхам Кендени за Hongkiat.com. Irham, известен още като Indaam, е уеб дизайнер и разработчик от Индонезия. Той също обича CSS и WordPress тема развитие.