CSS3 box-shadow tricks
Без никаких картинок, чистый CSS.
1.
Тень непрямоугольной формы:
March, 2013
29
Четвертый день Пейсаха
Ниже обычной боксовой тени подкладывается невидимый div со скругленными до безобразия углами (он сейчас находится прямо под этим текстом). От него отбрасывается вверх «тень» белого цвета овальной формы. Чтобы сам блок не влиял на расположение элементов страницы, его размеры уничтожаются с помощью отрицательных значений margin.
Код:
March, 2013
box-shadow: 0px 75px 50px -50px rgba(0, 0, 0, 0.75), inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)">
29
Четвертый день Пейсаха
border-radius: 150px; box-shadow: 0px -62px 50px rgba(255, 255, 255, 1)">
2.
Ну и, возвращаясь к ранее опубликованным обоям, мазки мягкой кистью:
msft
Тут все еще проще :-) Два (!) блока со скруглениями border-radius: 25% 100% и border-radius: 100% 25% имитируют овалы, наклоненные под разными углами, и отбрасывают каждый по две цветных тени. Сами блоки невидимы, их размеры убраны из основного потока. А тени отбрасываются на разные расстояния влево и вверх, чтобы получить четыре пятна. За счет коэффициентов прозрачности и размытия получается симпатичный эффект смешанных красок. К сожалению, эффект смешения световых пятен так не создать.
Код:
box-shadow: 325px 125px 50px rgba(255, 212, 0, 0.75), 200px 0px 50px rgba(255, 0, 0, 0.75)">
box-shadow: 200px -25px 50px rgba(0, 128, 255, 0.55), 325px -150px 50px rgba(0, 192, 0, 0.55)">
msft
1.
Тень непрямоугольной формы:
March, 2013
29
Четвертый день Пейсаха
Ниже обычной боксовой тени подкладывается невидимый div со скругленными до безобразия углами (он сейчас находится прямо под этим текстом). От него отбрасывается вверх «тень» белого цвета овальной формы. Чтобы сам блок не влиял на расположение элементов страницы, его размеры уничтожаются с помощью отрицательных значений margin.
Код:
March, 2013
box-shadow: 0px 75px 50px -50px rgba(0, 0, 0, 0.75), inset 0px 0px 50px -10px rgba(0, 0, 0, 0.3)">
29
Четвертый день Пейсаха
border-radius: 150px; box-shadow: 0px -62px 50px rgba(255, 255, 255, 1)">
2.
Ну и, возвращаясь к ранее опубликованным обоям, мазки мягкой кистью:
msft
Тут все еще проще :-) Два (!) блока со скруглениями border-radius: 25% 100% и border-radius: 100% 25% имитируют овалы, наклоненные под разными углами, и отбрасывают каждый по две цветных тени. Сами блоки невидимы, их размеры убраны из основного потока. А тени отбрасываются на разные расстояния влево и вверх, чтобы получить четыре пятна. За счет коэффициентов прозрачности и размытия получается симпатичный эффект смешанных красок. К сожалению, эффект смешения световых пятен так не создать.
Код:
box-shadow: 325px 125px 50px rgba(255, 212, 0, 0.75), 200px 0px 50px rgba(255, 0, 0, 0.75)">
box-shadow: 200px -25px 50px rgba(0, 128, 255, 0.55), 325px -150px 50px rgba(0, 192, 0, 0.55)">
msft