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

Сегодня я хочу поздравить всех посетителей моего блога с Днем Святого Валентина. И как бы не выглядело банальным, но в качестве подарка будет сердце – общепринятый символ любви. Используется исключительно CSS, без каких-либо графических элементов – то что я называю CSS-арт.
За основу будет взята CSS иконка от Николаса Галлахера. Мне понравился его подход, основанный на псевдоэлементах CSS вместо дополнительных блоков. Это означает предельно краткий HTML – сердце использует всего лишь один элемент.
Demo
Вы можете увидеть демо, отключив изображение в браузере и перезагрузив страницу – сердце все равно будет видно. Кроме того, если вы просмотрите исходник, вы обнаружите всего лишь один div. То что нужно, верно? Давайте попробуем использовать подход как у Николаса, но постараемся улучшить и украсить наше сердце.
Теория
Сердце будет складываться из двух элементов, каждый из них будет закруглен с одной стороны. Затем мы повернем элементы на 90 градусов относительно друг друга. Для наглядности посмотрите изображение ниже:
Если с теорией все ясно, то переходим к реализации ее ввиде кода. 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: 44%
Если данный пост показался вам полезным или интересным, нажмите на одну из кнопок ниже - от vkontakte, facebook, tweeter или google+, чтобы о нем узнали ваши друзья. Спасибо!
Также рекомендую публикации, похожие на "Сердце на CSS для всех влюбленных :)"


Простой рейтинг бар со звездами
Я люблю простые решения, ведь зачастую простота означает надежность, а надежность является для меня наивысшим приоритетом. Однажды для одного из проектов мне понадобился рейтинг-бар, состоящий из звезд. Основные требования [...]Нет комментариев
No comments yet.
RSS feed for comments on this post.
Последние комментарии