Любов до CSS

Від автора: мені подобається думати про CSS, як про красивому мовою. Якщо код написаний добре, він прекрасний, як поезія. Це любов до CSS, не інакше. У мові є свої правила, семантика і, як і саме почуття люблю, з допомогою цієї мови можна передати сенс різними способами. Розглянемо кілька варіантів, чорний колір в CSS можна написати різними способами.

І напередодні Дня святого Валентина я подумав, що було б цікаво розвинути цю концепцію, розглянути різні способи того, як створити сердечко в HTML і CSS.

Звичайне фонове зображення

Зображення серця можна вказати посилання в якості фону.

.heart {
background-image: url(“heart.png”);
background-size: 100%;
background-repeat: no-repeat;
}

HTML і ASCII символи

Все правильно. Ми можемо не малювати серце самі, а зробити це за допомогою браузера.

.heart {
content: ‘♥’;
}

CSS фігура

У реальному житті серце дуже складний об’єкт, але в CSS це всього лише два кола і повернутий квадрат:

Намалювати таку картину можна з допомогою одного тега за допомогою псевдокласів ::before ::after.

.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.

@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*=”entypo-“]:before {
font-family: ‘entypo’, sans-serif;
color: red;
}

Инлайновый SVG

Ну так, це не зовсім CSS, але всі ми любимо SVG.

I
You

Щоб приклад хоч якось ставився до CSS, додамо биття серця.

.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); }
}