Новогоднее украшение для логотипа

В данной теме не будем накручивать различные HTML-коды или скрипты, а используем уже имеющиеся, так например: любой логотип сайта обрамлен каким-нибудь тегом, например, ссылкой на корень. Такой пример и рассмотрим, итого имеем:

<a class="logo" href="/">
	<img src="logo.png" />
</a>

</a>

Пример этого кода с логотипом VK

Если у такой ссылки класс не задан, то добавляем теже стили, но через родительские элементы:

.logo {
	position: relative;
	display: inline-block;
}	
.logo:before {
	content: "";
	position: absolute;
	background: url("winter-hat.png");
	background-size: cover;
	height: 60px;
	width: 60px;
}

.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 пикселей и почти уже сразу что-то получилось 🙂

Далее остается подправить эту шапку так, как нравится.

Делается это все на глаз.

Используемая шапка:

Найти другие иконки можно на одном из сайтов с бесплатными иконками или же просто найти в поисковиках

После указания нужных размеров мы получаем:

Добавились только размеры и положение шапки:

.logo:before {
	height: 70px;
	width: 70px;
	left: 160px;
	top: -2px;
}

.logo:before {

height: 70px;

width: 70px;

left: 160px;

top: -2px;

}

Так как логотип прозрачный, то на задний его фон можно поставить дополнительно елку или целый лес, но мы сделаем для шапки ховер-ээфект с фильтром, используя CSS фильтры, и чуть ее повернем

Добавилось:

.logo:before {
	filter: hue-rotate(220deg);
	transition: 0.5s;
}
.logo:hover:before {
	filter: hue-rotate(0);
	transform: rotate(14deg);
}

.logo:before {

filter: hue-rotate(220deg);

transition: 0.5s;

}

.logo:hover:before {

filter: hue-rotate(0);

transform: rotate(14deg);

}

В итоге у нас получилось немного украсить логотип, не трогая при этом ничего, кроме CSS, который в финале выглядит так:

.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);
}

.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);

}

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

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

Комментарии: