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

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

Ярлыки для:

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

сбросить значения CSS по умолчанию.
.gmail-логотип,
.gmail-logo *,
.gmail-logo *: раньше,
.gmail-logo *: после {
Маржа: 0;
обивка: 0;
фон: прозрачный;
граница: 0;
очертание: 0;
отображения: блок;
шрифт: обычный нормальный 0/0 с засечками;
}
Следующие CSS-коды дают нам красный фон логотипа Gmail и закругленные стороны.

.gmail-logo {
маржа: 110px авто;
фон: 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: перед {
позиция: относительная;
Содержание: '';
Z-индекс: 1;
фон: белый;
плыть налево;
ширина: 320px;
высота: 320px;
граница: 100px solid rgb (201, 44, 25);
поле: -310px 0 0 -40px;
границы радиус: 10px;
-moz-граница радиус: 10px;
-webkit-граница радиус: 10px;
-moz-преобразование: Поворот (45 градусов);
-webkit-преобразование: Поворот (45 градусов);
-o-преобразование: Поворот (45 градусов);
}

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

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

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

.gmail-logo .gmail-box: после {
Содержание: '';
плыть налево;
ширина: 360 пикселей;
Высота: 360 пикселей;
граница: 2px solid rgb (201, 44, 25);
поле: 10px 0 0 40px;
-o-преобразование: Поворот (45 градусов);
-webkit-преобразование: Поворот (45 градусов);
-moz-преобразование: Поворот (45 градусов);
}

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

.gmail-logo: после {
Содержание: '';
позиция: относительная;
Z-индекс: 2;
Содержание: '';
плыть налево;
Запас-топ: -404px;
ширина: 600px;
высота: 408px;
отображения: блок;
фон:
-моз-линейный градиент (верх, 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%);
фон: -webkit-градиент (
линейный, левый верхний, левый нижний, цветовой стоп (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 {
фон: # 313131;
границы цвета: # 313131;
/ * курсор: указатель; * /
}
.gmail-logo: hover .gmail-box: before {
границы цвета: # 313131;
}
.gmail-logo: hover .gmail-box: после {
границы цвета: # 313131;
границы снизу цвет: #fff;
границы правого цвета: #fff;
}
предварительный просмотр | Скачать исходный файл
Логотип Gmail № 2
Далее мы создадим логотип Gmail с другой точки зрения с небольшим эффектом 3D. Начнем с базовой разметки HTML.