От автора: мне нравится думать о CSS, как о красивом языке. Если код написан хорошо, он прекрасен как поэзия. Это любовь к CSS, не иначе. В языке есть свои правила, семантика и, как и само чувство люблю, с помощью данного языка можно передать смысл различными способами. Рассмотрим несколько вариантов, черный цвет в CSS можно написать различными способами.
#000000
#000
rgb(0, 0, 0)
hsla(360, 100%, 0%, 1)
black
И накануне Дня святого Валентина я подумал, что было бы интересно развить эту концепцию и рассмотреть различные способы того, как создать сердечко в HTML и CSS.
Обычное фоновое изображение
Изображения сердца можно указать по ссылке в качестве фона.
|
1 2 3 4 5 |
.heart { background-image: url("heart.png"); background-size: 100%; background-repeat: no-repeat; } |
HTML и ASCII символы
Все правильно. Мы можем не рисовать сердце сами, а сделать это с помощью браузера.
|
1 2 3 |
.heart { content: '♥'; } |
CSS фигура
В реальной жизни сердце очень сложный объект, но в CSS это всего лишь два круга и повернутый квадрат:
Нарисовать такую картину можно с помощью одного тега при помощи псевдоклассов ::before и ::after.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.heart { background-color: red; display: inline-block; height: 30px; margin: 0 10px; position: relative; top: 0; transform: rotate(-45deg); width: 30px; } .heart:before, .heart:after { content: ""; background-color: red; border-radius: 50%; height: 30px; position: absolute; width: 30px; } .heart:before { top: -15px; left: 0; } .heart:after { left: 15px; top: 0; } |
Шрифты-иконки
В битве с SVG иконочным шрифтам сильно досталось, но они все еще крайне полезны. Можно было бы воспользоваться файлами шрифта различного формата и правилом @font-face для создания иконки сердца, но мы воспользуемся сайтом We Love Icon Fonts.
|
1 2 3 4 5 6 |
@import url(//weloveiconfonts.com/api/?family=entypo); [class*="entypo-"]:before { font-family: 'entypo', sans-serif; color: red; } |
Инлайновый SVG
Ну да, это не совсем CSS, но все мы любим SVG.
|
1 2 3 4 5 6 |
I <svg class="heart" viewBox="0 0 32 29.6"> <path d="M23.6, 0c-3.4, 0-6.3, 2.7-7.6, 5.6C14.7, 2.7, 11.8, 0, 8.4, 0C3.8, 0, 0, 3.8, 0, 8.4c0, 9.4, 9.5, 11.9, 16, 21.2 c6.1-9.3, 16-12.1, 16-21.2C32, 3.8, 28.2, 0, 23.6, 0z"/> </svg> You |
Чтобы пример хоть как-то относился к CSS, добавим биение сердца.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.heart { fill: red; position: relative; top: 5px; width: 50px; animation: pulse 1s ease infinite, } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } |
Автор: Geoff Graham
Источник: //css-tricks.com/
Редакция: Команда webformyself.
