Создание логотипа Gmail с использованием CSS3

11 сентября 2014 | Опубликовано в css | 3 Комментариев »

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

Логотип Gmail вариант 1

Первый вариант логотипа простой, и его довольно легко создать. Начнем без промедления, будем действовать следующим образом. Давайте начнем с запуска редактора кода и вставим следующий HTML код, после чего сохраним файл как logo-gmail.html.

<html>
<head>
<title>Gmail CSS Logo</title>
<style type='text/css'>
</style>
</head>
<body>
<span class='gmail-logo'>
<span class='gmail-box'>&nbsp;</span>
</span><!-- Конец .gmail-logo -->
</body>
</html>

Добавим следующие стили CSS между <style></style>, чтобы переназначить значения свойств CSS по умолчанию.

.gmail-logo,
.gmail-logo *,
.gmail-logo *:before,
.gmail-logo *:after {
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    outline:0;
    display:block;
    font:normal normal 0/0 serif;
    }

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

.gmail-logo {
    margin:110px auto;
    background:rgb(201, 44, 25);
    width:600px;
    height:400px;
    border-top:4px solid rgb(201, 44, 25);
    border-bottom:4px solid rgb(201, 44, 25);
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    }

После этого мы создадим белый прямоугольник на красном фоне.

.gmail-logo .gmail-box {
    overflow:hidden;
    float:left;
    width:440px;
    height:400px;
    margin:0 0 0 80px;
    background:white;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    }

Чтобы создать красную букву «M», мы сначала создадим прямоугольник с красной границей.

.gmail-logo .gmail-box:before {
    position:relative;
    content:'';
    z-index:1;
    background:white;
    float:left;
    width:320px;
    height:320px;
    border:100px solid rgb(201, 44, 25);
    margin:-310px 0 0 -40px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    }

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

.gmail-logo .gmail-box {
    overflow:hidden;
    }

Теперь давайте добавим две красных тонких линии по границе, чтобы это выглядело, как конверт.

.gmail-logo .gmail-box:after {
    content:'';
    float:left;
    width:360px;
    height:360px;
    border:2px solid rgb(201, 44, 25);
    margin:10px 0 0 40px;
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    }

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

.gmail-logo:after {
    content:'';
    position:relative;
    z-index:2;
    content:'';
    float:left;
    margin-top:-404px;
    width:600px;
    height:408px;
    display:block;
    background:
        -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
        /* rgba(255, 255, 255, 0.3) 30%, */
        rgba(255, 255, 255, 0.1) 100%);
    background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
        /* rgba(255, 255, 255, 0.2) 30%, */
        rgba(255, 255, 255, 0.1) 100%);
    background:-webkit-gradient(
        linear, left top, left bottombottom, color-stop(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 перед <html>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Добавьте следующие стили CSS перед </style>

.gmail-logo:hover {
    background:#313131;
    border-color:#313131;
    /* cursor:pointer; */
    }
.gmail-logo:hover .gmail-box:before {
    border-color:#313131;
    }
.gmail-logo:hover .gmail-box:after {
    border-color:#313131;
    border-bottom-color:#fff;
    border-right-color:#fff;
    }

Демонстрация работы – Скачать исходный код

Логотип Gmail вариант 2

После этого мы создадим логотип Gmail в другом положении с небольшим трехмерным эффектом. Мы начнем с основной разметки HTML.

<html>
<head>
<title>Gmail logo 2 </title>
<style type="text/css">
</style>
</head>
<body>
<span id='gmail-logo2'>
<span class='element1'>&nbsp;</span>
<span class='element2'>&nbsp;</span>
<span class='element3'>&nbsp;</span>
<span class='element4'>&nbsp;</span>
<span class='element5'>&nbsp;</span>
</span>
</body>
</html>

Так как у этого логотипа другое положение, мы начнем с небольшого поворота и создания нужных для второго варианта логотипа слоев, которые мы назовем elements.

#gmail-logo2 {
    margin:0 auto;
    display:block;
    width:380px;
    height:290px;
    -moz-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
    -o-transform:rotate(6deg);
    transform:rotate(6deg);
    }
#gmail-logo2 .element1 {
    display:block;
    width:380px;
    height:290px;
    }
#gmail-logo2 .element2,
#gmail-logo2 .element3,
#gmail-logo2 .element4,
#gmail-logo2 .element5  {
    float:left;
    display:block;
    width:380px;
    height:290px;
    margin:-290px 0 0 0;
    }

Зададим стили для псевдокласса .element1::before

#gmail-logo2 .element1::before {
    content:'';
    position:relative;
    margin:2px 0 0 14px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:30px;
    height:276px;
    -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;
    -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::after

#gmail-logo2 .element1::after {
    content:'';
    position:relative;
    margin:40px 5px 0 0;
    float:rightright;
    display:block;
    background:rgb(201, 44, 25);
    width:30px;
    height:238px;
    -moz-transform:rotate(3deg);
    -webkit-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
    border-radius: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 rgb(109, 10, 0);
    }

Зададим стили для псевдокласса .element2::before

#gmail-logo2 .element2::before {
    content:'';
    margin:22px 0 0 48px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:315px;
    height:14px;
    -moz-transform:rotate(6.8deg);
    -webkit-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::after

#gmail-logo2 .element2::after {
    content:'';
    position:relative;
    margin:230px 0 0 36px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:310px;
    height: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::before

#gmail-logo2 .element3::before {
    content:'';
    position:relative;
    margin:8px 0 0 42px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:42px;
    height:268px;
    -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:rightright;
    display:block;
    background:rgb(201, 44, 25);
    width:22px;
    height: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::before

#gmail-logo2 .element4::before {
    content:'';
    position:relative;
    margin:-2px 0 0 130px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:54px;
    height: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::after

#gmail-logo2 .element4::after {
    content:'';
    position:relative;
    margin:12px 88px 0 0;
    float:rightright;
    display:block;
    background:rgb(201, 44, 25);
    width:54px;
    height:186px;
    border-radius:30px 0 0 0;
    -webkit-border-radius:30px 0 0 0;
    -moz-border-radius:30px 0 0 0;
    -moz-transform:rotate(53deg);
    -webkit-transform:rotate(53deg);
    -o-transform:rotate(53deg);
    transform:rotate(53deg);
    }

Зададим стили для псевдокласса .element5::before

#gmail-logo2 .element5::before {
    content:'';
    position:relative;
    margin:115px 0 0 125px;
    float:left;
    display:block;
    background:rgb(201, 44, 25);
    width:2px;
    height:150px;
    -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;
    display:block;
    background:rgb(201, 44, 25);
    width:2px;
    height:150px;
    -moz-transform:rotate(-50deg);
    -webkit-transform:rotate(-50deg);
    -o-transform:rotate(-50deg);
    transform:rotate(-50deg);
    }

Зададим приоритет 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 {z-index:4;}
#gmail-logo2 .element4::after {z-index:3;}
/*#gmail-logo2 .element5::before {} #gmail-logo2 .element5::after {}*/

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

Демонстрация работы – Скачать исходный код

Автор урока Irham Kendeni

Перевод — Дежурка

Смотрите также:

Опубликовано в css, сентября 11, 2014
Метки: css, верстка, изображение css, логотип css, урок css, урок верстка

�

Александр
12 сентября 2014 в 7:58
+1

ЗАЧЕМ?
Максим
15 сентября 2014 в 19:54
0

ЗАЧЕМ? [2]
Сергей
14 октября 2014 в 16:17
0

Господа! Не задавайте глупых вопросов. Такая работа, доказывает, что человек — профессионал. Ему не сложно, теперь, сделать сложную работы. А вот вы сами, попробуйте сделать так как он, а не скопи пастить с какого-то ресурса. Докажи те себе, что вы тоже, не пальцем деланы.

Создание логотипа Gmail с использованием CSS3

Логотип Gmail вариант 1

Логотип Gmail вариант 2

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые