Цвет тени элемента

box-shadow-color
sm
md
lg
xl

В SIMAI Framework с помощью модифкаторов можно задать цвет тени.

Классы

Класс Значение
shadow-transparent --sf-shadow-color:
var(--sf-transparent);
shadow-current --sf-shadow-color: currentColor;
shadow-white --sf-shadow-color:
rgba(var(--sf-white-r),
var(--sf-white-g),
var(--sf-white-b),
var(--sf-border--alfa));
shadow-black --sf-shadow-color:
rgba(var(--sf-black-r),
var(--sf-black-g),
var(--sf-black-b),
var(--sf-border--alfa));
shadow-gray --sf-shadow-color:
rgba(var(--sf-gray-r),
var(--sf-gray-g),
var(--sf-gray-b),
var(--sf-border--alfa));
shadow-gray-1 --sf-shadow-color:
rgba(var(--sf-gray-1-r),
var(--sf-gray-1-g),
var(--sf-gray-1-b),
var(--sf-border--alfa));
shadow-gray-2 --sf-shadow-color:
rgba(var(--sf-gray-2-r),
var(--sf-gray-2-g),
var(--sf-gray-2-b),
var(--sf-border--alfa));
shadow-gray-3 --sf-shadow-color:
rgba(var(--sf-gray-3-r),
var(--sf-gray-3-g),
var(--sf-gray-3-b),
var(--sf-border--alfa));
shadow-gray-4 --sf-shadow-color:
rgba(var(--sf-gray-4-r),
var(--sf-gray-4-g),
var(--sf-gray-4-b),
var(--sf-border--alfa));
shadow-gray-5 --sf-shadow-color:
rgba(var(--sf-gray-5-r),
var(--sf-gray-5-g),
var(--sf-gray-5-b),
var(--sf-border--alfa));
shadow-gray-6 --sf-shadow-color:
rgba(var(--sf-gray-6-r),
var(--sf-gray-6-g),
var(--sf-gray-6-b),
var(--sf-border--alfa));
shadow-gray-7 --sf-shadow-color:
rgba(var(--sf-gray-7-r),
var(--sf-gray-7-g),
var(--sf-gray-7-b),
var(--sf-border--alfa));
shadow-gray-8 --sf-shadow-color:
rgba(var(--sf-gray-8-r),
var(--sf-gray-8-g),
var(--sf-gray-8-b),
var(--sf-border--alfa));
shadow-gray-9 --sf-shadow-color:
rgba(var(--sf-gray-9-r),
var(--sf-gray-9-g),
var(--sf-gray-9-b),
var(--sf-border--alfa));
shadow-red --sf-shadow-color:
rgba(var(--sf-red-r),
var(--sf-red-g),
var(--sf-red-b),
var(--sf-border--alfa));
shadow-red-1 --sf-shadow-color:
rgba(var(--sf-red-1-r),
var(--sf-red-1-g),
var(--sf-red-1-b),
var(--sf-border--alfa));
shadow-red-2 --sf-shadow-color:
rgba(var(--sf-red-2-r),
var(--sf-red-2-g),
var(--sf-red-2-b),
var(--sf-border--alfa));
shadow-red-3 --sf-shadow-color:
rgba(var(--sf-red-3-r),
var(--sf-red-3-g),
var(--sf-red-3-b),
var(--sf-border--alfa));
shadow-red-4 --sf-shadow-color:
rgba(var(--sf-red-4-r),
var(--sf-red-4-g),
var(--sf-red-4-b),
var(--sf-border--alfa));
shadow-red-5 --sf-shadow-color:
rgba(var(--sf-red-5-r),
var(--sf-red-5-g),
var(--sf-red-5-b),
var(--sf-border--alfa));
shadow-red-6 --sf-shadow-color:
rgba(var(--sf-red-6-r),
var(--sf-red-6-g),
var(--sf-red-6-b),
var(--sf-border--alfa));
shadow-red-7 --sf-shadow-color:
rgba(var(--sf-red-7-r),
var(--sf-red-7-g),
var(--sf-red-7-b),
var(--sf-border--alfa));
shadow-red-8 --sf-shadow-color:
rgba(var(--sf-red-8-r),
var(--sf-red-8-g),
var(--sf-red-8-b),
var(--sf-border--alfa));
shadow-red-9 --sf-shadow-color:
rgba(var(--sf-red-9-r),
var(--sf-red-9-g),
var(--sf-red-9-b),
var(--sf-border--alfa));
shadow-orange --sf-shadow-color:
rgba(var(--sf-orange-r),
var(--sf-orange-g),
var(--sf-orange-b),
var(--sf-border--alfa));
shadow-orange-1 --sf-shadow-color:
rgba(var(--sf-orange-1-r),
var(--sf-orange-1-g),
var(--sf-orange-1-b),
var(--sf-border--alfa));
shadow-orange-2 --sf-shadow-color:
rgba(var(--sf-orange-2-r),
var(--sf-orange-2-g),
var(--sf-orange-2-b),
var(--sf-border--alfa));
shadow-orange-3 --sf-shadow-color:
rgba(var(--sf-orange-3-r),
var(--sf-orange-3-g),
var(--sf-orange-3-b),
var(--sf-border--alfa));
shadow-orange-4 --sf-shadow-color:
rgba(var(--sf-orange-4-r),
var(--sf-orange-4-g),
var(--sf-orange-4-b),
var(--sf-border--alfa));
shadow-orange-5 --sf-shadow-color:
rgba(var(--sf-orange-5-r),
var(--sf-orange-5-g),
var(--sf-orange-5-b),
var(--sf-border--alfa));
shadow-orange-6 --sf-shadow-color:
rgba(var(--sf-orange-6-r),
var(--sf-orange-6-g),
var(--sf-orange-6-b),
var(--sf-border--alfa));
shadow-orange-7 --sf-shadow-color:
rgba(var(--sf-orange-7-r),
var(--sf-orange-7-g),
var(--sf-orange-7-b),
var(--sf-border--alfa));
shadow-orange-8 --sf-shadow-color:
rgba(var(--sf-orange-8-r),
var(--sf-orange-8-g),
var(--sf-orange-8-b),
var(--sf-border--alfa));
shadow-orange-9 --sf-shadow-color:
rgba(var(--sf-orange-9-r),
var(--sf-orange-9-g),
var(--sf-orange-9-b),
var(--sf-border--alfa));
shadow-yellow --sf-shadow-color:
rgba(var(--sf-yellow-r),
var(--sf-yellow-g),
var(--sf-yellow-b),
var(--sf-border--alfa));
shadow-yellow-1 --sf-shadow-color:
rgba(var(--sf-yellow-1-r),
var(--sf-yellow-1-g),
var(--sf-yellow-1-b),
var(--sf-border--alfa));
shadow-yellow-2 --sf-shadow-color:
rgba(var(--sf-yellow-2-r),
var(--sf-yellow-2-g),
var(--sf-yellow-2-b),
var(--sf-border--alfa));
shadow-yellow-3 --sf-shadow-color:
rgba(var(--sf-yellow-3-r),
var(--sf-yellow-3-g),
var(--sf-yellow-3-b),
var(--sf-border--alfa));
shadow-yellow-4 --sf-shadow-color:
rgba(var(--sf-yellow-4-r),
var(--sf-yellow-4-g),
var(--sf-yellow-4-b),
var(--sf-border--alfa));
shadow-yellow-5 --sf-shadow-color:
rgba(var(--sf-yellow-5-r),
var(--sf-yellow-5-g),
var(--sf-yellow-5-b),
var(--sf-border--alfa));
shadow-yellow-6 --sf-shadow-color:
rgba(var(--sf-yellow-6-r),
var(--sf-yellow-6-g),
var(--sf-yellow-6-b),
var(--sf-border--alfa));
shadow-yellow-7 --sf-shadow-color:
rgba(var(--sf-yellow-7-r),
var(--sf-yellow-7-g),
var(--sf-yellow-7-b),
var(--sf-border--alfa));
shadow-yellow-8 --sf-shadow-color:
rgba(var(--sf-yellow-8-r),
var(--sf-yellow-8-g),
var(--sf-yellow-8-b),
var(--sf-border--alfa));
shadow-yellow-9 --sf-shadow-color:
rgba(var(--sf-yellow-9-r),
var(--sf-yellow-9-g),
var(--sf-yellow-9-b),
var(--sf-border--alfa));
shadow-green --sf-shadow-color:
rgba(var(--sf-green-r),
var(--sf-green-g),
var(--sf-green-b),
var(--sf-border--alfa));
shadow-green-1 --sf-shadow-color:
rgba(var(--sf-green-1-r),
var(--sf-green-1-g),
var(--sf-green-1-b),
var(--sf-border--alfa));
shadow-green-2 --sf-shadow-color:
rgba(var(--sf-green-2-r),
var(--sf-green-2-g),
var(--sf-green-2-b),
var(--sf-border--alfa));
shadow-green-3 --sf-shadow-color:
rgba(var(--sf-green-3-r),
var(--sf-green-3-g),
var(--sf-green-3-b),
var(--sf-border--alfa));
shadow-green-4 --sf-shadow-color:
rgba(var(--sf-green-4-r),
var(--sf-green-4-g),
var(--sf-green-4-b),
var(--sf-border--alfa));
shadow-green-5 --sf-shadow-color:
rgba(var(--sf-green-5-r),
var(--sf-green-5-g),
var(--sf-green-5-b),
var(--sf-border--alfa));
shadow-green-6 --sf-shadow-color:
rgba(var(--sf-green-6-r),
var(--sf-green-6-g),
var(--sf-green-6-b),
var(--sf-border--alfa));
shadow-green-7 --sf-shadow-color:
rgba(var(--sf-green-7-r),
var(--sf-green-7-g),
var(--sf-green-7-b),
var(--sf-border--alfa));
shadow-green-8 --sf-shadow-color:
rgba(var(--sf-green-8-r),
var(--sf-green-8-g),
var(--sf-green-8-b),
var(--sf-border--alfa));
shadow-green-9 --sf-shadow-color:
rgba(var(--sf-green-9-r),
var(--sf-green-9-g),
var(--sf-green-9-b),
var(--sf-border--alfa));
shadow-blue --sf-shadow-color:
rgba(var(--sf-blue-r),
var(--sf-blue-g),
var(--sf-blue-b),
var(--sf-border--alfa));
shadow-blue-1 --sf-shadow-color:
rgba(var(--sf-blue-1-r),
var(--sf-blue-1-g),
var(--sf-blue-1-b),
var(--sf-border--alfa));
shadow-blue-2 --sf-shadow-color:
rgba(var(--sf-blue-2-r),
var(--sf-blue-2-g),
var(--sf-blue-2-b),
var(--sf-border--alfa));
shadow-blue-3 --sf-shadow-color:
rgba(var(--sf-blue-3-r),
var(--sf-blue-3-g),
var(--sf-blue-3-b),
var(--sf-border--alfa));
shadow-blue-4 --sf-shadow-color:
rgba(var(--sf-blue-4-r),
var(--sf-blue-4-g),
var(--sf-blue-4-b),
var(--sf-border--alfa));
shadow-blue-5 --sf-shadow-color:
rgba(var(--sf-blue-5-r),
var(--sf-blue-5-g),
var(--sf-blue-5-b),
var(--sf-border--alfa));
shadow-blue-6 --sf-shadow-color:
rgba(var(--sf-blue-6-r),
var(--sf-blue-6-g),
var(--sf-blue-6-b),
var(--sf-border--alfa));
shadow-blue-7 --sf-shadow-color:
rgba(var(--sf-blue-7-r),
var(--sf-blue-7-g),
var(--sf-blue-7-b),
var(--sf-border--alfa));
shadow-blue-8 --sf-shadow-color:
rgba(var(--sf-blue-8-r),
var(--sf-blue-8-g),
var(--sf-blue-8-b),
var(--sf-border--alfa));
shadow-blue-9 --sf-shadow-color:
rgba(var(--sf-blue-9-r),
var(--sf-blue-9-g),
var(--sf-blue-9-b),
var(--sf-border--alfa));
shadow-purple --sf-shadow-color:
rgba(var(--sf-purple-r),
var(--sf-purple-g),
var(--sf-purple-b),
var(--sf-border--alfa));
shadow-purple-1 --sf-shadow-color:
rgba(var(--sf-purple-1-r),
var(--sf-purple-1-g),
var(--sf-purple-1-b),
var(--sf-border--alfa));
shadow-purple-2 --sf-shadow-color:
rgba(var(--sf-purple-2-r),
var(--sf-purple-2-g),
var(--sf-purple-2-b),
var(--sf-border--alfa));
shadow-purple-3 --sf-shadow-color:
rgba(var(--sf-purple-3-r),
var(--sf-purple-3-g),
var(--sf-purple-3-b),
var(--sf-border--alfa));
shadow-purple-4 --sf-shadow-color:
rgba(var(--sf-purple-4-r),
var(--sf-purple-4-g),
var(--sf-purple-4-b),
var(--sf-border--alfa));
shadow-purple-5 --sf-shadow-color:
rgba(var(--sf-purple-5-r),
var(--sf-purple-5-g),
var(--sf-purple-5-b),
var(--sf-border--alfa));
shadow-purple-6 --sf-shadow-color:
rgba(var(--sf-purple-6-r),
var(--sf-purple-6-g),
var(--sf-purple-6-b),
var(--sf-border--alfa));
shadow-purple-7 --sf-shadow-color:
rgba(var(--sf-purple-7-r),
var(--sf-purple-7-g),
var(--sf-purple-7-b),
var(--sf-border--alfa));
shadow-purple-8 --sf-shadow-color:
rgba(var(--sf-purple-8-r),
var(--sf-purple-8-g),
var(--sf-purple-8-b),
var(--sf-border--alfa));
shadow-purple-9 --sf-shadow-color:
rgba(var(--sf-purple-9-r),
var(--sf-purple-9-g),
var(--sf-purple-9-b),
var(--sf-border--alfa));
shadow-pink --sf-shadow-color:
rgba(var(--sf-pink-r),
var(--sf-pink-g),
var(--sf-pink-b),
var(--sf-border--alfa));
shadow-pink-1 --sf-shadow-color:
rgba(var(--sf-pink-1-r),
var(--sf-pink-1-g),
var(--sf-pink-1-b),
var(--sf-border--alfa));
shadow-pink-2 --sf-shadow-color:
rgba(var(--sf-pink-2-r),
var(--sf-pink-2-g),
var(--sf-pink-2-b),
var(--sf-border--alfa));
shadow-pink-3 --sf-shadow-color:
rgba(var(--sf-pink-3-r),
var(--sf-pink-3-g),
var(--sf-pink-3-b),
var(--sf-border--alfa));
shadow-pink-4 --sf-shadow-color:
rgba(var(--sf-pink-4-r),
var(--sf-pink-4-g),
var(--sf-pink-4-b),
var(--sf-border--alfa));
shadow-pink-5 --sf-shadow-color:
rgba(var(--sf-pink-5-r),
var(--sf-pink-5-g),
var(--sf-pink-5-b),
var(--sf-border--alfa));
shadow-pink-6 --sf-shadow-color:
rgba(var(--sf-pink-6-r),
var(--sf-pink-6-g),
var(--sf-pink-6-b),
var(--sf-border--alfa));
shadow-pink-7 --sf-shadow-color:
rgba(var(--sf-pink-7-r),
var(--sf-pink-7-g),
var(--sf-pink-7-b),
var(--sf-border--alfa));
shadow-pink-8 --sf-shadow-color:
rgba(var(--sf-pink-8-r),
var(--sf-pink-8-g),
var(--sf-pink-8-b),
var(--sf-border--alfa));
shadow-pink-9 --sf-shadow-color:
rgba(var(--sf-pink-9-r),
var(--sf-pink-9-g),
var(--sf-pink-9-b),
var(--sf-border--alfa));

Описание

Адаптивный модификатор. Задает цвет тени элемента в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • shadow-{color} - цвет падающей тени.

Пример

Используйте модификатор shadow-{color} чтобы задать цвет падающей тени..

shadow-red-4
shadow-green-4
shadow-blue-4 
<div class="bg-red-3 shadow-4 shadow-red-4 ...">
    shadow-red-4
</div>
<div class="bg-green-3 shadow-4 shadow-green-4 ...">
    shadow-green-4
</div>
<div class="bg-blue-3 shadow-4 shadow-blue-4 ...">
    shadow-blue-4
</div>

Цвет тени при наведении

Используйте модификатор hover:shadow-{color} для установки цвета тени при наведении.

<button class="hover:shadow-4 hover:shadow-red-3 ...">Hover Me</button>

Адаптивность

Для установки тени, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:shadow-red-2 для установки второго оттенка красного тени для экранов размером Medium и больше.

<div class="md:shadow-red-2 ..."></div>

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

Изменить статью