Любовь к CSS

Любовь к CSS

От автора: мне нравится думать о CSS, как о красивом языке. Если код написан хорошо, он прекрасен как поэзия. Это любовь к CSS, не иначе. В языке есть свои правила, семантика и, как и само чувство люблю, с помощью данного языка можно передать смысл различными способами. Рассмотрим несколько вариантов, черный цвет в CSS можно написать различными способами.

#000000

#000

rgb(0, 0, 0)

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: '&#9829';
}

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
<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, добавим биение сердца.

.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

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree