Любовь к CSS

Любовь к CSS

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

#000000

#000

rgb(0, 0, 0)

hsla(360, 100%, 0%, 1)

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

black

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

Обычное фоновое изображение

Изображения сердца можно указать по ссылке в качестве фона.

HTML и ASCII символы

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

CSS фигура

В реальной жизни сердце очень сложный объект, но в CSS это всего лишь два круга и повернутый квадрат:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Шрифты-иконки

В битве с SVG иконочным шрифтам сильно досталось, но они все еще крайне полезны. Можно было бы воспользоваться файлами шрифта различного формата и правилом @font-face для создания иконки сердца, но мы воспользуемся сайтом We Love Icon Fonts.

Инлайновый SVG

Ну да, это не совсем CSS, но все мы любим SVG.

Чтобы пример хоть как-то относился к CSS, добавим биение сердца.

Автор: Geoff Graham

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки: ,

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree