Сердце на CSS для всех влюбленных :)

Сегодня я хочу поздравить всех посетителей моего блога с Днем Святого Валентина. И как бы не выглядело банальным, но в качестве подарка будет сердце – общепринятый символ любви. Используется исключительно CSS, без каких-либо графических элементов – то что я называю CSS-арт.

За основу будет взята CSS иконка  от Николаса Галлахера.  Мне понравился его подход, основанный на псевдоэлементах CSS вместо дополнительных блоков. Это означает предельно краткий HTML – сердце использует всего лишь один элемент.

Demo

Вы можете увидеть демо, отключив изображение в браузере и перезагрузив страницу – сердце все равно будет видно. Кроме того, если вы просмотрите исходник, вы обнаружите всего лишь один div. То что нужно, верно? Давайте попробуем использовать подход как у Николаса, но постараемся улучшить и украсить наше сердце.

Теория

Сердце будет складываться из двух элементов, каждый из них будет закруглен с одной стороны. Затем мы повернем элементы на 90 градусов относительно друг друга. Для наглядности посмотрите изображение ниже:

Сердце на CSS для всех влюбленных

Если с теорией все ясно, то переходим к реализации ее ввиде кода. HTML – всего один элемент:

<div class="my-heart"></div>

И CSS:

.my-heart {
	position: relative;
	width: 200px;
	height: 200px;
}
.my-heart:before,
.my-heart:after {
	position: absolute;
	content: "";
	left: 100px;
	top: 0;
	width: 100px;
	height: 160px;
	background: #f00;
	border-radius: 100px 100px 0 0;
}

Теперь, если просто добавить свойство transform: rotate (-45deg) для my-heart: before и свойство transform: rotate (45deg) для my-heart: after, у нас появится красное сердце. Совсем не сложно, верно? Давайте попробуем улучшить наше сердце с помощью CSS-art. Во-первых, я хочу добавить градиент:

.my-heart:before{
	background: linear-gradient(100deg, #f00, #f00, #f00, #f00, #900);
}
.my-heart:after {
	left: 0;
	background: linear-gradient(20deg, #f00, #f00, #f00, #900);
}

А во-вторых, добавлю простую анимацию:

@keyframes heart-size {
	0% { width: 100px;height: 160px;}
	5% {width: 100px;height: 161px;}
	10% {width: 100px;height: 160px;}
	15% {width: 100px;height: 162px;}
	20% {width: 100px;height: 160px;}
}

Следует помнить, что анимацию “heart-size” нужно добавить для псевдоэлементов my-heart: before и my-heart: after. Все, теперь у нас есть крутое красное сердце с помощью CSS-art для всех влюбленных. Работает в Firefox, Google Chrome, Opera и Safari. Любите и будьте любимы А если возникли какие-либо вопросы – добро пожаловать в комментарии. И напоследок – возможно, будет полезно ознакомиться с CSS иконками от Николаса.

Popularity: 14%

Добавлено 14 февраля 2019
Рубрика: Новости
Метки: CSS