5173

Пикабушник
поставил 4 плюса и 1 минус
107 рейтинг 2 подписчика 0 подписок 2 поста 0 в горячем

«Небольшой» fail

«Небольшой» fail Stopgame, Резервное копирование, База данных, Fail, Игры, Скриншот

Ссылка на новость

Показать полностью 1

You Don’t Know CSS: Свойство content

You Don’t Know CSS: Свойство content CSS, Web, Frontend, Веб-разработка, Длиннопост

Привет, пикабу! Решил написать серию небольших постов про Frontend в которых постараюсь рассказать о свойствах CSS, которые мало кто знает или не знает всех возможностей.

Итак, сегодня рассмотрим такое свойство как content. Уверен многие frontend-разработчики используют его каждый день для псевдоэлементов. Ну как-то так:

You Don’t Know CSS: Свойство content CSS, Web, Frontend, Веб-разработка, Длиннопост

Мало кто знает, что это свойство может принимать не только текст, но и attr(), counter(), url() и градиенты. А еще это свойство можно использовать и для обычных элементов. То есть мы можем поместить картинку внутрь псевдоэлемента или даже превратить <div /> в <img /> всего одной строчкой в CSS:

Демо

К сожалению градиенты не поддерживаются в Safari, поэтому не советую их использовать. А вот url() поддерживается всеми браузерами (даже IE8 !!!).

Еще можно указывать в content сразу несколько значений, но это работает только для псевдоэлементов:

You Don’t Know CSS: Свойство content CSS, Web, Frontend, Веб-разработка, Длиннопост

На этом пока всё. Если зайдет, то буду писать еще. И не только про CSS.

Показать полностью 4
Отличная работа, все прочитано!