Сегодня мы разберем три примера работы с каскадными стилями, каждый из которых, наверняка, облегчит жизнь разработчика.

Содержание

Курсоры

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

И это при том, что CSS позволяет использовать не менее трех десятков различных видов курсоров.

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

Хорошим примером является возможность скрыть курсор над проигрывателем видео-контента, не забыв отобразить его над элементами управления.

Для старых версий браузеров курсор скрывается с помощью прозрачного изображения размером 1 на 1 пиксель:

video {
    cursor: url("cursor.gif");
}

Во всех современных браузерах скрыть курсор можно только с помощью CSS:

video {
    cursor: none;
}

Затемнение

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

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}

.popup {
    position: absolute;
    z-index: 1;
}

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

Решение с псевдо-элементом для body выглядит более практичным, не требует создания дополнительных HTML-элементов. Единственным минусом является необходимость использования JavaScript для достижения эффекта затемнения. При работе с ограниченным числом “подсвечиваемых” элементов такой подход можно считать приоритетным. Однако, он плохо подойдет для решений с несколькими выделяемыми элементами.

body.dimmed::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}

Центрирование

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

Абсолютное позиционирование

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

main {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18rem;
    height: 6rem;
    margin-top: -3rem;
    margin-left: -9rem;
}

Flexbox

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

Для этого потребуется соблюдение двух условий:

1. display: flex для родителя

2. margin: auto для центрируемого дочернего элемента

   body {
   display: flex;
   min-height: 90vh;
   margin: 0;
   }
   
   main {
   margin: auto;
   }
   

Спасибо за внимание.

Перевод статьи Mohit “3 Hidden CSS Features”.