CSS3 box-shadow tricks — Заголовок журнала — LiveJournal
[Error: Irreparable invalid markup (‘<div […] bold;>’) in entry. Owner must fix manually. Raw contents below.]Без никаких картинок, чистый CSS.<br />
<br />
<h4>1.</h4><br />
<br />
Тень непрямоугольной формы:<br />
<br />
<div>
<div>
March, 2013
</div>
<divCalibri», «Tahoma», «Arial»; color: #444; font-weight: bold; text-align: center; line-height: 100%; padding: 0.3ex 1ex 0px 1ex; box-shadow: 0px 75px 50px -50px rgba(0, 0, 0, 0.75), inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)»>
29
<div>
Четвертый день Пейсаха
</div>
</div>
<div>
</div>
</div>
<br />
Ниже обычной боксовой тени подкладывается невидимый <span>div</span> со скругленными до безобразия углами (он сейчас находится прямо под этим текстом).
От него отбрасывается вверх «тень» белого цвета овальной формы. Чтобы сам блок не влиял на расположение элементов страницы, его размеры уничтожаются с помощью отрицательных значений <span>margin</span>.<br />
<br />
Код:<br />
<br />
<div>
<div />
<div><br />
March, 2013<br />
</div><br />
<divbackground: #ffc»>box-shadow: 0px 75px 50px -50px rgba(0, 0, 0, 0.75)</span>, inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)»><br />
29<br />
<div><br />
Четвертый день Пейсаха<br />
</div><br />
</div><br />
<divbackground: #ffc»>border-radius: 150px;</span> <span>box-shadow: 0px -62px 50px rgba(255, 255, 255, 1)</span>»><br />
&nbsp;<br />
</div><br />
</div>
</div>
<br />
<br />
<h4>2.
</h4><br />
<br />
Ну и, возвращаясь к <a href=»http://4px.livejournal.com/170014.html»>ранее опубликованным обоям</a>, мазки мягкой кистью:<br />
<br />
<br />
<div>
<div>
<div>
</div>
<div>
</div>
</div>
<div>
msft
</div>
<div>
</div>
</div>
<br />
<br />
Тут все еще проще 🙂 Два (!) блока со скруглениями <span>border-radius: 25% 100%</span> и <span>border-radius: 100% 25%</span> имитируют овалы, наклоненные под разными углами, и отбрасывают <em>каждый по две</em> цветных тени. Сами блоки невидимы, их размеры убраны из основного потока. А тени отбрасываются на разные расстояния влево и вверх, чтобы получить четыре пятна. За счет коэффициентов прозрачности и размытия получается симпатичный эффект смешанных красок.
К сожалению, эффект смешения <em>световых</em> пятен так не создать.<br />
<br />
Код:<br />
<div>
<div><br />
<div><br />
<divbackground: #ffc»>box-shadow: 325px 125px 50px rgba(<span>255, 212, 0</span>, 0.75), 200px 0px 50px rgba(<span>255, 0, 0</span>, 0.75)</span>»><br />
&nbsp;<br />
</div><br />
<divbackground: #ffc»>box-shadow: 200px -25px 50px rgba(<span>0, 128, 255</span>, 0.55), 325px -150px 50px rgba(<span>0, 192, 0</span>, 0.55)</span>»><br />
&nbsp;<br />
</div><br />
</div><br />
<div><br />
msft<br />
</div><br />
<div><br />
&nbsp;<br />
</div><br />
</div>
</div>
<br />
<br />
<br />
<lj-like />
<br />
<div> </div>
Свойство CSS: box-shadow: `inset` | Могу ли я использовать.
.. Таблицы поддержки для HTML5, CSS3 и т. д. Могу ли я использовать Поиск ?Свойство CSS: box-shadow: `inset`
Глобальное использование
95,31% + 0,44% «=» 95,75%
IE
- 6–8: не поддерживается
- 9–10: частичная поддержка
- 11: Частичная поддержка
Edge
- 12–113: Поддерживается
- 114: Поддерживается
Firefox
- 2–3: Не поддерживается
- 3.5–3.6: Поддерживается
- 4–114: Поддерживается
- 116–117: Поддерживается
01% — Supported»> 115: ПоддерживаетсяChrome
- 4–9: Поддерживается
- 10–113: Поддерживается
- 114: Поддерживается
- 115–117: Поддерживается
Safari
- 3.1 — 4: не поддерживается
- 5: поддерживается
- 5.1 — 16.4: поддерживается
- 16.5: поддерживается
- 16.6 — TP: поддерживается 900 25
- 10: не поддерживается
- 100: Поддерживается
- 3.2–4.1: Не поддерживается
- 4.2: Поддерживается
- 5–16.4: Поддерживается 9 0093 16.5: Поддерживается
- 16.6 — 17: Поддерживается
- все: Поддержка неизвестна
- 2.1–4.4.4: Поддержка неизвестна
- 114: Поддерживается
- 12 — 12.1: Не поддерживается
- 73: Поддерживается
- 113: поддерживается
- 13.4: поддержка неизвестна
- 4–20: поддерживается
- 21: поддерживается
- 13.1: поддержка неизвестна 90 025
- 13.18: поддержка неизвестна
- 2.5: Поддержка неизвестна
- 3: Поддержка неизвестна
- Поместите элемент
внутрь тега
. - Стилизуйте элемент
, используя свойства text-align, background, padding-top, color, width и height.
- Добавьте свойство box-shadow, следуя приведенному выше синтаксису.
Opera
08% — Supported»> 11,5–99: ПоддерживаетсяSafari на iOS
Opera Mini
Браузер Android
Chrome для Android
20% — Supported»> 114: поддерживаетсяFirefox для Android
UC Browser для Android 90 013
Samsung Internet
QQ Browser
Браузер Baidu
Браузер KaiOS
Как установить тень блока на одной стороне элемента
Чтобы установить тень блока на одной стороне элемента, используйте свойство box-shadow.
Это свойство имеет четыре параметра длины и цвет.
При использовании свойства box-shadow следуйте следующему синтаксису:
box-shadow: h-смещение v-смещение цвет размытия;
h-offset устанавливает тень по горизонтали. Положительное значение задает правую тень, а отрицательное значение задает левую.
v-shadow устанавливает тень вертикально. Положительное значение устанавливает тень под полем, а отрицательное значение устанавливает тень над полем.
blur — это необязательный атрибут, который размывает box-shadow.
распространение устанавливает размер тени.
цвет — необязательный атрибут, задающий цвет тени.
Начнем с создания тени с левой стороны элемента. Следуйте инструкциям ниже.
<голова>
Название документа
<тело>
Документы W3
Попробуй сам »
ч2 {
выравнивание текста: по центру;
фон: #c4c4c4;
отступы сверху: 50px;
цвет: #000000;
ширина: 400 пикселей;
высота: 120 пикселей;
box-shadow: -8px 0px 8px #000000;
} Вот полный код.
Пример добавления тени блока слева от элемента:
<голова>
Название документа
<стиль>
ч2 {
выравнивание текста: по центру;
фон: #c4c4c4;
отступы сверху: 50px;
цвет: #000000;
ширина: 400 пикселей;
высота: 120 пикселей;
box-shadow: -8px 0px 8px #000000;
}
<тело>
Документы W3
Попробуй сам »
Результат
W3Docs
Пример добавления тени в нижней части элемента:
<голова>
Название документа
<стиль>
ч2 {
выравнивание текста: по центру;
фон: #c4c4c4;
отступы сверху: 50px;
цвет: #000000;
ширина: 400 пикселей;
высота: 120 пикселей;
box-shadow: 0 10px 10px #000000;
}
<тело>
Документы W3
Попробуй сам »
При добавлении box-shadow только с одной стороны элемента фокус должен быть на последнем значении (радиус распространения).
Это уменьшает общий размер box-shadow как по горизонтали, так и по вертикали.
Теперь мы покажем еще один пример, в котором мы используем значение «inset» для создания тени внутри блока, поскольку по умолчанию тень размещается за пределами блока.
Пример добавления тени внутри элемента:
<голова>
Название документа
<стиль>
ч2 {
выравнивание текста: по центру;
фон: #c4c4c4;
отступы сверху: 50px;
цвет: #000000;
ширина: 400 пикселей;
высота: 120 пикселей;
box-shadow: 0px 10px 20px #000000 вставка;
}
<тело>
Документы W3
Попробуй сам »
В нашем последнем примере мы используем внешние и внутренние тени на одной стороне каждого представленного элемента.
Пример добавления внешних и внутренних теней:
<голова>Название документа <стиль> тело { фон: #ccc; отступ: 20 пикселей; } .
