Сердце на 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;
}


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

Пример

Вернуться назад

Коментарии