Мне нужно создать тень на некотором block
элементе, но только (например) на его правой стороне. То, как я это делаю, - это оборачиваю внутренний элемент box-shadow
во внешний, padding-right
и overflow:hidden;
поэтому три другие стороны тени не видны.
Есть ли лучший способ добиться этого? Как box-shadow-right
?
РЕДАКТИРОВАТЬ : я намерен создать только вертикальную часть тени. Точно так же, как то, что repeat-y
из правила background:url(shadow.png) 100% 0% repeat-y
будет делать.
css
shadow
box-shadow
tillda
источник
источник
Ответы:
Да, вы можете использовать свойство распространения тени правила box-shadow:
Четвертое свойство
-2px
- это распространение тени, вы можете использовать его, чтобы изменить распространение тени, создавая впечатление, что тень только на одной стороне.При этом также используются правила позиционирования тени, которые
10px
направляют его вправо (горизонтальное смещение) и0px
удерживают его под элементом (вертикальное смещение).5px
это радиус размытия :)Пример для вас здесь .
источник
box-shadow
правила были стандартизированы.Мое собственное решение, которое легко редактировать:
HTML:
CSS:
Демо:
http://jsfiddle.net/jDyQt/103
источник
Чтобы получить эффект обрезки на двух сторонах, вы можете использовать псевдоэлементы с градиентами фона.
добавит хороший теневой эффект слева и справа от элементов, которые обычно составляют документ.
источник
Просто используйте псевдоэлемент :: after или :: before, чтобы добавить тень. Сделайте это 1px и поместите его на любую сторону, которую вы хотите. Ниже приведен пример вершины.
источник
Вот мой пример:
источник
Вот небольшой взлом, который я сделал.
1. Создайте
<div class="one_side_shadow"></div>
справа под элементом, который я хочу, чтобы создать одностороннюю тень (в этом случае я хочу, чтобы односторонняя тень была вставленаid="element"
снизу)2. Затем я создал регулярную форму,
box-shadow
используя отрицательное вертикальное смещение, чтобы подтолкнуть тень вверх в одну сторону.источник
Это может быть простой способ
Назначьте это любому div
источник
Вот кодовый блок для демонстрации для каждой стороны или рабочий фрагмент:
источник
clip-path
в настоящее время (2020 г.) является одним из самых простых способов получения прямоугольных теней на определенных сторонах элементов, особенно когда требуемый эффект представляет собой «чистую резку» тени на определенных кромках (что, как я полагаю, было тем, что первоначально искал ОП), например это:... в отличие от ослабленной / уменьшенной / истончающейся тени, как это:
Просто примените следующий CSS к рассматриваемому элементу:
Куда:
Apx
устанавливает видимость тени для верхнего краяBpx
правильноCpx
дноDpx
оставилВведите значение 0 для любых ребер, где тень должна быть скрыта, и отрицательное значение (такое же, как у радиуса размытия в виде рамки -
Xpx
) для любых ребер, где должна отображаться тень.источник
Этот сайт помог мне: https://gist.github.com/ocean90/1268328 (Обратите внимание, что на этом сайте левая и правая перепутаны на дату этого сообщения ... но они работают, как ожидалось). Они исправлены в коде ниже.
источник
источник
Что я делаю, так это создаю вертикальный блок для тени и помещаю его рядом с тем, где должен быть мой элемент блока. Два блока затем оборачиваются в другой блок:
Пример jsFiddle здесь .
источник
Хорошо, вот еще одна попытка. Использование псевдоэлементов и применение над ними теневого блока.
HTML:
дерзость:
https://codepen.io/alex3o0/pen/PrMyNQ
источник