• Теория
  • Теория

Нестандартные тени

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

Например, тени, наклонённые в разные стороны.

Сделать это с помощью box-shadow невозможно. Поэтому нужно использовать более сложный приём:

  • c помощью псевдоэлементов before и after создаём два блока с обычными тенями;
  • наклоняем эти блоки с помощью rotate;
  • задаём им отрицательный z-index.

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

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Двумерные трансформации» тренажёра «Продвинутые декоративные эффекты» можно после регистрации и оформления подписки.