Логотип для сайта

Как сделать живой логотип для сайта, с объёмными буквами и без картинки, используя только 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 мс.

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

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

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

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

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

    Смог бы.

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

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

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

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

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

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

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

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