В данной теме не будем накручивать различные HTML-коды или скрипты, а используем уже имеющиеся, так например: любой логотип сайта обрамлен каким-нибудь тегом, например, ссылкой на корень. Такой пример и рассмотрим, итого имеем:
|
1 2 3 |
<a class="logo" href="/"> <img src="logo.png" /> </a> |
Пример этого кода с логотипом VK
Если у такой ссылки класс не задан, то добавляем теже стили, но через родительские элементы:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.logo { position: relative; display: inline-block; } .logo:before { content: ""; position: absolute; background: url("winter-hat.png"); background-size: cover; height: 60px; width: 60px; } |
В итоге у нас получится так:
Мы задали примерный размер в 60х60 пикселей и почти уже сразу что-то получилось 🙂
Далее остается подправить эту шапку так, как нравится.
Делается это все на глаз.
Найти другие иконки можно на одном из сайтов с бесплатными иконками или же просто найти в поисковиках
После указания нужных размеров мы получаем:
Добавились только размеры и положение шапки:
|
1 2 3 4 5 6 |
.logo:before { height: 70px; width: 70px; left: 160px; top: -2px; } |
Так как логотип прозрачный, то на задний его фон можно поставить дополнительно елку или целый лес, но мы сделаем для шапки ховер-ээфект с фильтром, используя CSS фильтры, и чуть ее повернем
Добавилось:
|
1 2 3 4 5 6 7 8 |
.logo:before { filter: hue-rotate(220deg); transition: 0.5s; } .logo:hover:before { filter: hue-rotate(0); transform: rotate(14deg); } |
В итоге у нас получилось немного украсить логотип, не трогая при этом ничего, кроме CSS, который в финале выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.logo { position: relative; display: inline-block; } .logo:before { content: ""; position: absolute; background: url("winter-hat.png"); background-size: cover; height: 70px; width: 70px; left: 160px; top: -2px; transform: rotate(10deg); filter: hue-rotate(220deg); transition: 0.5s; } .logo:hover:before { filter: hue-rotate(0); transform: rotate(14deg); } |
Вариант с елкой
