Від автора: мені подобається думати про CSS, як про красивому мовою. Якщо код написаний добре, він прекрасний, як поезія. Це любов до CSS, не інакше. У мові є свої правила, семантика і, як і саме почуття люблю, з допомогою цієї мови можна передати сенс різними способами. Розглянемо кілька варіантів, чорний колір в CSS можна написати різними способами.
#000000
#000
rgb(0, 0, 0)
# hsla-color hsla(360, 100%, 0%, 1)
black
І напередодні Дня святого Валентина я подумав, що було б цікаво розвинути цю концепцію, розглянути різні способи того, як створити сердечко в 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); }
}