Как сделать живой логотип для сайта, с объёмными буквами и без картинки, используя только HTML и CSS.
Эта мысль не давала мне покоя с тех пор, как я увидел, что малюсенькая картинка на 500 байт, грузится гораздо дольше чем портянка с HTML.
Некоторые познания в CSS давали мне основания предполагать что это возможно. И вот что у меня получилось после суточного бдения над клавиатурой.
Это простейший вариант. Буквы естественно могут быть любые и любых размеров.
Есть идеи как сделать им округлые формы, и добавить логотипу что-то наподобие колец сириуса, или какой-то другой прибамбас.
Но это в недалёком будущем, а пока смотрим что получилось и как это сделано.
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 мс.
Какие-то домик конвертик и карандашик, сжирают почти секунду. Попробуем их вывести кодом.
Желаю творческих успехов!
сгодится
