Сердце на CSS

  • Не нравится
  • 0
  • Нравится
Привет)
Была такая заметка, что с помощью гугла можно нарисовать сердце. Вот есть еще один вариант, где можно уже на CSS сделать тоже сердечко. Только уже покрасивее) Можно менять цвет, тень, градиент и т.д, а это значит, что у я буду использовать векторный символ ASCII :) Такой вариант пойдет на всех браузерах :) Это самый большой плюс.

Как сделать?


На странице где хотим увидить, надо создать тег div или span с классом class="zvheart".

<div class="zvheart">&#9829;</div>
<span class="zvheart">&#9829;</span>


Код сердца:

// Первый вариант
&hearts;

// Второй вариант
&#9829;


Ну, теперь надо CSS:

.zvheart {
font-family: Arial, sans-serif;
color: #c70000;
text-align: center;
font-size: 250px;
text-shadow: 0 0 0 #AB0000,
-1px 1px 0 #A20000,
-2px 2px 0 #980000,
-3px 3px 0 #8F0000,
-4px 4px 0 #860000,
-5px 5px 0 #7D0000,
-6px 6px 0 #740000,
-7px 7px 0 #6B0000,
-8px 8px 0 #610000,
-9px 9px 0 #580000,
-10px 10px 0 #4F0000,
0 0 20px #f48104,
0 0 30px #FEEC85,
0 0 40px #f48104,
0 0 50px #EC760C,
0 0 60px #CD4606,
0 0 70px #ed0103,
0 -30px 50px #C70000;
}


Вот и все :)
Теперь подбирайте цвета и размер сердца и будет все ЛАЙК ;)

Пример

Коментарии

Добавление комментария


Имя:*
E-Mail:*
Комментарий:*
  • winkwinkedsmileam
    belayfeelfellowlaughing
    lollovenorecourse
    requestsadtonguewassat
    cryingwhatbullyangry
Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив