Автор: Крис Койер
Перевод: Всеволод Козлов

А Вы представляете себе преимущества таким образом созданных логотипов?

  • Более быстрая загрузка
  • Отображается при выключенной графике
  • Масштабируемость

Итак, вот пример того, что можно сделать:

Создание стиля css для логотипа

Используемый CSS код:

#tower1 {
position:absolute;
top:51px;
left:20px;
width:20px;
height: 30px;
background-color: #333;
}
#tower2 {
position:absolute;
top:31px;
left:45px;
width:20px;
height: 50px;
background-color: #33E;
}
#tower3 {
position:absolute;
top:11px;
left:70px;
width:20px;
height: 70px;
background-color: #3A3;
}
#tower4 {
position:absolute;
top:90px;
left:20px;
width:20px;
height: 10px;
background-color: #AAA;
}
#tower5 {
position:absolute;
top:90px;
left:45px;
width:20px;
height: 17px;
background-color: #AAD;
}
#tower6 {
position:absolute;
top:90px;
left:70px;
width:20px;
height: 23px;
background-color: #ADA;
}

Заметьте, что с помощью этой техники можно создавать не только логотипы, но и другие по назначению элементы дизайна Вашего сайта.

Оригинал статьи: Create Your Logo with Pure CSS



















































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

Понравилась статья? Поделитесь ей в социальных сетях: