Как создать логотип Gmail с помощью CSS3

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

Ярлыки для:

• Gmail логотип CSS урок № 1 | предварительный просмотр
• Gmail логотип урок № 2 | предварительный просмотр

Логотип Gmail № 1

Этот первый логотип прост и довольно прост в создании. Без лишних слов, вот шаги. Давайте начнем с запуска вашего любимого редактора кода и введите следующие HTML-коды и сохраните их как Логотип-gmail.html.

Добавьте следующие стили CSS между сбросить значения CSS по умолчанию.

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

Следующие CSS-коды дают нам красный фон логотипа Gmail и закругленные стороны.

 .gmail-logo margin: 110px auto; фон: RGB (201, 44, 25); ширина: 600px; высота: 400px; border-top: 4px solid rgb (201, 44, 25); Граница внизу: 4px solid rgb (201, 44, 25); границы радиус: 10px; -moz-границы радиус: 10px; -webkit-границы радиус: 10px; 

Затем мы продолжаем создавать белое поле на красном фоне.

 .gmail-logo .gmail-box переполнение: скрыто; плыть налево; ширина: 440px; высота: 400px; поле: 0 0 0 80px; фон: белый; пограничный радиус: 5px; -moz-границы радиус: 5px; -webkit-границы радиус: 5px; 

Чтобы создать красный эффект «М», мы сначала создадим прямоугольник с красной рамкой.

 .gmail-logo .gmail-box: before позиция: относительная; содержимое: "; z-index: 1; фон: белый; поплавок: левый; ширина: 320px; высота: 320px; граница: 100px solid rgb (201, 44, 25); margin: -310px 0 0 -40px; border- радиус: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: поворот (45 градусов); -webkit-transform: поворот (45 градусов); -o-преобразование: поворот (45 градусов) );

Затем мы продолжаем скрывать чрезмерные стороны, давая нам полную букву «М» красного цвета..

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

Теперь давайте дадим две тонкие красные рамки, придав им вид конверта.

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

Мы почти закончили. Давайте добавим немного градиента в красный конверт.

 .gmail-logo: after content: "; позиция: относительная; z-index: 2; content:"; плыть налево; Запас-топ: -404px; ширина: 600px; высота: 408px; Дисплей: блок; фон: -moz-linear-Градиент (вверху, 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; границы цвета: # 313131; / * курсор: указатель; * / .gmail-logo: hover .gmail-box: before border-color: # 313131;  .gmail-logo: hover .gmail-box: after border-color: # 313131; границы снизу цвет: #fff; границы правого цвета: #fff; 

Предварительный просмотр | Скачать исходный файл

Логотип Gmail № 2

Далее мы создадим логотип Gmail с другой точки зрения с небольшим эффектом 3D. Начнем с базовой разметки HTML.

Поскольку логотип имеет другую перспективу, мы начнем с его небольшого поворота и создадим необходимые слои (которые мы назовем их элементы) по порядку.

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

стайлинг .element1 :: после

 # gmail-logo2 .element1 :: after content: "; позиция: относительная; поле: 40px 5px 0 0; плавать: вправо; отображение: блок; фон: rgb (201, 44, 25); ширина: 30px; высота: 238px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg); радиус границы: 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 рг б (109, 10, 0);  

стайлинг .element2 :: до того

 # gmail-logo2 .element2 :: before content: "; поле: 22px 0 0 48px; float: left; display: block; фон: rgb (201, 44, 25); ширина: 315px; высота: 14px; -moz -трансформировать: повернуть (6,8 градусов); -webkit-преобразовать: повернуть (6,8 градусов); -о-преобразовать: повернуть (6,8 градусов); преобразовать: повернуть (6,8 градусов); 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: "; позиция: относительная; поле: 230px 0 0 36px; плавать: слева; отображение: блок; фон: rgb (201, 44, 25); ширина: 310px; высота: 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);

стайлинг .element3 :: до того

 # gmail-logo2 .element3 :: before content: "; позиция: относительная; поле: 8px 0 0 42px; плавать: слева; отображение: блок; фон: rgb (201, 44, 25); ширина: 42px; высота: 268px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg);

стайлинг .element3 :: после

 # gmail-logo2 .element3 :: after content: "; позиция: относительная; поле: 40px 32px 0 0; плавать: вправо; отображение: блок; фон: rgb (201, 44, 25); ширина: 22px; высота: 236px; -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: "; позиция: относительная; поле: -2px 0 0 130px; плавать: слева; отображение: блок; фон: rgb (201, 44, 25); ширина: 54px; высота : 192px; -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: "; позиция: относительная; поле: 12px 88px 0 0; плавать: вправо; отображение: блок; фон: rgb (201, 44, 25); ширина: 54px; высота: 186px; border-radius: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: повернуть (53deg); -webkit-transform: rotate (53deg); -o-transform: rotate (53deg); transform: rotate (53deg);

стайлинг .element5 :: до того

# gmail-logo2 .element5 :: before content: "; позиция: относительная; поле: 115px 0 0 125px; плавать: слева; отображение: блок; фон: rgb (201, 44, 25); ширина: 2px; высота: 150px; -moz-transform: повернуть (55 градусов); -o-transform: повернуть (55 градусов); -webkit-transform: повернуть (55 градусов); преобразовать: повернуть (55 градусов);

стайлинг .element5 :: после

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

Регулировка приоритета Z-индекс.

 # 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  * /

Мы почти закончили. Ваш логотип Gmail должен выглядеть примерно так:

Наконец, давайте изменим цвет при наведении.

 # 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 ргб (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 ргб (10, 90, 4); 

Предварительный просмотр | Скачать исходный файл

Примечание редактора: Этот пост написан Ирхам Кендени для Hongkiat.com. Irham, также известный как Indaam, является веб-дизайнером и разработчиком из Индонезии. Он также любит разработку тем CSS и WordPress..