Логотип для сайта рисуем в CSS

Как сделать живой логотип для сайта, с объёмными буквами и без картинки, используя только HTML и CSS.

Эта мысль не давала мне покоя с тех пор, как я увидел, что малюсенькая картинка на 500 байт, грузится гораздо дольше чем портянка с HTML.

Некоторые познания в CSS давали мне основания предполагать что это возможно. И вот что у меня получилось после суточного бдения над клавиатурой.

Это простейший вариант. Буквы естественно могут быть любые и любых размеров.


Есть идеи как сделать им округлые формы, и добавить логотипу что-то наподобие колец сириуса, или какой-то другой прибамбас.

Но это в недалёком будущем, а пока смотрим что получилось и как это сделано.

 

Код:

/* Создаём объёмный блок */
.logotip {
perspective: 1000px;
position: relative;
margin-left: 200px;
width: 70px;
height: 70px;
transform-style: preserve-3d;
}
/* Создаём 5 блоков для каждого элемента буквы */
.basis,
.basis1,
.basis2,
.basis3,
.basis4 {
display: block;
position: absolute;
border-radius: 2px;
list-style: none;
}

.basis {
top: 0px;
left: 0px;
width: 20px;
height: 70px;
}
.basis1 {
top: 20px;
left: 18px;
width: 15px;
height: 20px;
}
.basis2 {
top: 0px;
left: 31px;
width: 20px;
height: 70px;
}
.basis3 {
top: 0px;
left: 49px;
width: 15px;
height: 20px;
}
.basis4 {
top: 0px;
left: 61px;
width: 20px;
height: 70px;
}

/* Создаём элементы букв */
.front,
.front1,
.front2,
.front3,
.front4 {
transform: translateZ(10px);
background: hsl(205, 90%, 40%);
}

.back,
.back1,
.back2,
.back3,
.back4 {
transform: translateZ(-10px) rotateY(-180deg);
background: hsl(205, 90%, 40%);
}

.left,
.left2,
.left4 {
transform: translateX(-10px) rotateY(-90deg);
background: linear-gradient(hsl(205, 90%, 40%), hsl(60, 90%, 50%));
}
.right,
.right2,
.right4 {
transform: translateX(10px) rotateY(90deg);
background: linear-gradient(hsl(205, 90%, 40%), hsl(60, 90%, 50%));
}
/* Подключаем анимацию к объёмному блоку */
.rotate-y {
animation: spinY 10s infinite linear;
}
/* Анимация непрерывного вращения */
@keyframes spinY {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}

HTML


<div class="logotip">
<ul class="logotip rotate-y">
<li class="basis back"></li>
<li class="basis front"></li>
<li class="basis left"></li>
<li class="basis right"></li>
<li class="basis1 back1"></li>
<li class="basis1 front1"></li>
<li class="basis2 front2"></li>
<li class="basis2 back2"></li>
<li class="basis2 left2"></li>
<li class="basis2 right2"></li>
<li class="basis3 front3"></li>
<li class="basis3 back3"></li>
<li class="basis4 front4"></li>
<li class="basis4 back4"></li>
<li class="basis4 left4"></li>
<li class="basis4 right4"></li>
</ul>
</div>

Один нюанс: в Firefox логотип отображается не совсем корректно. Никак не могу разобраться в чём причина. Префиксы не помогают.

Буду весьма признателен за помощь в этом вопросе.

В следующем посте будем рисовать значки меню.

Я недавно проверил один из своих сайтов с адаптивным дизайном на скорость загрузки, и был ошарашен тем, что значки меню сделанные картинками и весящие по 400 байт, грузятся по 300 мс.

Какие-то домик конвертик и карандашик, сжирают почти секунду. Попробуем их вывести кодом.

Желаю творческих успехов.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

4 комментария на «Логотип для сайта рисуем в CSS»

  1. stariс говорит:

    Смог бы.

  2. Влад говорит:

    А не смогли бы Вы написать логотип с буками С и К?

  3. stariс говорит:

    Буквы рисуются каждая по отдельности. Рисуется каждая чёрточка буквы, ей задаётся длина и отступы потом всё это соединяется в целую букву и получается результат. Канительно но увлекательно.

  4. Станислав говорит:

    Добрый вечер ! Спасибо! Подскажите , а как возможно заменить буквы ?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *