7 CSS трюков, о которых вы не знали

Иногда ко мне на почту приходят сообщения следующего содержания:

"Я никогда не знал что такое возможно в CSS! Удивительно."

Думая над тем, какую статью написать для блога в этот раз, я решил затронуть тему малоизвестных нюансов в CSS. Специально для вас )

Но прежде, давайте я отвечу на самый популярный вопрос читателей: "Стоит ли изучать CSS".

Мой ответ: "Конечно". Если у вас есть возможность, обязательно изучите CSS. При создании своего блога знание верстки мне очень пригодилось. Хотя сайт у меня на готовом движке )

1. Границы в виде изображений

Мало кто знает, что в качестве рамки в CSS можно использовать изображения. А те, кто знают, почему-то очень редко используют эту возможность.

Как задается рамка в виде изображения? Просто: нужно воспользоваться свойством border-image. При помощи неё можно создавать поистине необычные границы элементов. Вот что я сделал на скорую руку:

При желании, у вас должно получиться намного лучше. Таким образом, используя свойство border-image можно применять свои, кастомные рамки для тех или иных элементов веб-страниц.

2. Гибкая настройка border-radius

Все мы знаем о свойстве border-radius, при помощи которой можно закруглять углы рамок. Однако, мало кому известно о возможности задавать значения закругления отдельно по оси X и Y.

Такой эффект может понадобиться в случаях, когда требуется создать несимметричное закругление. Например, давайте попробуем сделать более крутой угол по вертикали, и меньше по горизонтали.

.wrapper { border-radius: 30px 30px 30px 30px / 50px 50px 50px 50px; }

Обратите внимание, что через знак слэш указывается значение по горизонтали. Вот как это выглядит на практике:

На примере выше вы можете видеть большее значение радиуса по горизонтали, и меньшее по вертикали. Из-за этого рамка по бокам выглядит более покатой, а сверху и снизу более крутой. Вот такие вот пироги)

3. Oblique и Italic - это не одно и то же!

Многие веб-мастера не знают о том, что значение oblique и italic у свойства font-style - это не одно и то же. Значение italic использует специально отрисованные дизайнерами курсивное начертание шрифтов.

В то время как значение oblique заставляет взять браузер обычное начертание шрифта и поменять его наклон для имитации курсива. Кто-то может возразить, сказав что на практике разница незаметна. Однако, это не так.

Посмотрите на иллюстрацию ниже, чтобы понять разницу этих двух значений.

4. Значения свойства font-weight

Все мы привыкли использовать для свойства font-weight значения наподобие normal и bold. Некоторые, более продвинутые знают о возможности использования числовых значений, таких как 400, 500, 700 и так далее.

Ключевому слову normal эквивалентно числовое значение 400, а bold - 700. Однако, мало кто знает о существовании таких значений, как bolder и lighter.

Применяются они довольно редко. Но тем не менее могут быть очень полезны в некоторых ситуациях. Дело в том, что при использовании значения lighter за основу берется шрифт родительского элемента.

Таким образом, если родителю задан шрифт нормальной жирности (400), то для потомка должно быть применено тонкое начертание (300). Если такой в наличии нет, то ничего не поменяется и будет использовано нормальное начертание. Подобное же положение и со значением bolder.

5. Толщину границы можно задавать ключевыми словами

Рамка - это одна из наиболее часто используемых свойств декора. И все мы привыкли задавать ее толщину в пикселях.

Однако, имеется пара ключевых слов, которые могут стать альтернативой привычному положению дел. Вот собственно и они: thin, medium и thick.

Thin, как видно из названия, является тонкой версией границы. Medium - средней. А при помощи thick мы можем создать толстую границу. Вот как это выглядит на практике:

На примере выше использовано ключевое слово thick, что означает толстый.

6. Padding-top высчитывается от ширины контейнера, а не высоты

Как вы знаете, ширина блока в процентах высчитывается от ширины родительского элемента. Таким же образом, можно было бы думать, что внутренние отступы сверху и снизу высчитываются от высоты блока. Вы будете удивлены, однако, это не так.

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

На иллюстрации выше верхний внутренний отступ равняется 10%, и будет меняться в зависимости от ширины блока.

7. Свойство color передается не только тексту

Обычно мы используем свойство color для придания тексту определенного цвета. Но большинство из нас не знает, что при определенных условиях значения этого свойства могут показать себя с неожиданной стороны.

Например, я задал оранжевый цвет элементу body. Этим я добивался того, чтобы весь основной текст веб-страницы отображался оранжевым цветом.

Однако, самое интересное происходит тогда, когда я начинаю создавать на веб-странице списки с границами. Маркеры списков, их номера, а также рамки теперь отображаются оранжевым цветом.

Но и это еще не все. При неудачной загрузке изображения содержимое атрибута alt теперь тоже стало оранжевого цвета.

Как видите, стоит быть предельно осторожным используя какие-то экзотические цвета для элементов, имеющих потомков.

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

Если вам известны еще какие-то секреты CSS, о которых я не упомянул, буду рад увидеть их в комментариях.

А на этом у меня все. Надеюсь, данная статья была для вас полезна. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.