Кто знает как сделать вогнутые углы как на картинке на чистом CSS? Окончательный вид кода. Плоская тень с одной стороны
Вопрос: Фигура+сглаженные углы
Доброго времени суток уважаемые форумчане.Помогите в таком вопросе:на чистом css нужно создать следующую фигуру-шестигранник,но со сглаженными углами.
Буду благодарен любой помощи,особенно оперативной.
Ответ:
Сообщение от InTheDark
Spirt Tesla, Спасибо за отклик,но в построении самой фигуры проблематики не возникает,уже разобрался,а вот сгладить углы-это уже проблема.Подскажите плз - в Вашем коде какие параметры отвечают за эту характеристику фигуры?
Вообще за сглаживание отвечает border-radius
Вопрос: Прямые углы
Помогите сделать прямые углы,Вот код
/rs - обнуления счета;
где /rs у меня этот текст в округленной рамке а как сделать прямые углы у рамки?
Ответ:
Помогите сделать прямые углы
Думаю что даже если искать в гугле три дня, ничего не найдется. Попробуй поискать от обратного, ищи как сделать круглые углы, если получится, то научишься делать квадратные.
Вопрос: Как сделать такие углы у div
Добрый день!
Как сделать такие углы у div.
Пример:
Спасибо!
Ответ:
Псевдоэлементом с заданными размерами, например, но проще с тенями поиграться, если хотите все 4 угла так сделать.
box-shadow: X Y 0 -S #fff; - первые два параметра являются смещениями по х и у соответственно, третий блюр, он тут должен быть на нуле, а четвертый параметр отвечает за сжатие тени, когда с минусом (тобишь чтобы она маленькой стала). Последний - цвет тени.
Хотя, если у вас сам див прямоугольный, а тень квадратная, то тогда, видимо, имеет смысл сделать прозрачный псевдоэлемент с размерами, как у тени, и смещениями по Х и У его 4 тени раскидать по углам дива. В этом случае четвертый параметр у св-ва box-shadow тоже будет 0, меняете только первые два.
Вопрос: (JS) Узнать реальный угол поворота дива
Приветствую, форумчане.
Про matrix(bla-bla) синусы и косинусы знаю.
Постулат: Браузер "знает" количество оборотов элемента если угол больше 360 градусов - очевидно из опыта.
Вопрос: Возможно-ли извлечь этот реальный угол поворота?
Ответ:
Я задал конкретный вопрос:
как в процессе работы страницы, скриптом извлечь полное значение угла поворота дива.
Те же 390 градусов, заданных в css.
Вопрос: наложить одну картинку на другую под определенным углом
задание вроде того, что у фидле. нужно наложить одну картинку на другую, при том, что нижняя картинку наклонена. никак не удается ровно наложить.пробовал через перспективу в CSS, матрицу и другую трансформацию, но углы картинок всегда не сбегают. при этом может не совпадать только один угол. есть ли какие простые способы, или можно мой вариант поправить?
| HTML5 | ||
|
||
| CSS | ||
|
||
Ответ: раньше делал так как вы показали, а еще вижу, что это работает в фидле, но сколько ни пытаюсь на сайте ничего не срабатывает. верхние углы остаются на одном уровне, что то можете посоветовать?
Добавлено через 15 минут
спасибо, разобрался
img
{
position:absolute;
}
из за этого была проблема
Вопрос: Плагин Multiscroll, кнопка для вызова меню в левом верхнем углу имеет анимацию только в firefox?
сайт wsfox.ru
плагин Multiscroll
Почему почему кнопка для вызова меню в левом верхнем углу имеет анимацию только в firefox?
Ответ:
Сообщение от Mashka_mulashka
может еще подскажите, почему почему кнопка для вызова меню в левом верхнем углу имеет анимацию только в firefox?
Может и подскажу, но у меня и в хроме анимируется хорошо
Добавлено через 7 минут
А вообще вроде имя кейфреймов пишется впереди, а у Вас в конце, возможно поэтому не работает в IE, но точно не уверен
| Код CSS | ||
|
||
Вопрос: Определить угол по линиям канваса
Смотрим скриншот, требуется найти угол "C". Где def.X/defY-нынешнее положение дула пушки(ну черный отросток вверх) и nowX/nowY нынешнее положение курсора мыши. Не надо писать, что у меня по геометрии 2, у меня по ней 5. Проблема в другом, как на JS это правильно написать?
Ответ:
У тебя есть координаты мыши (это катеты прямоугольного треугольника)
осталось узнать как найти угол зная длину двух катетов
и для чего нужен тангенс в тригонометрии
| Сообщение от Vopub |
| Не надо писать, что у меня по геометрии 2, |
Есть мнение что ты глуп и неправильно решаешь стоящею перед тобой задачу. про вектор тебе уже сказали
Вопрос: Скругленные углы у родительского блока и позиционирование дочерних элементов
Доброго времени суток
Есть две проблемы.
1. На зеленом блоке не работает закругление углов. Хотя на блоке меню работает абсолютно такой же код
| CSS | ||
|
||
Почему такое может быть?
2. Бежевый блок находится на зеленом блоке, а они должны быть рядом и между ними должна быть граница. Вот код:
| CSS | ||
|
||
Ответ: Спасибо. Разобрался в своих ошибках
Добавлено через 25 минут
Действительно, ошибка была в том, что я задал скругление углов родительскому элементу. Но в итоге я решил от них отказаться.
Блоки отделять не стал, добавил новый класс.right для всей правой части с контентом и выделил его белым цветом. Поэтому визуально кажется что блока 2 и что они раздельны
| CSS | ||
|
||
Вопрос: Слайдер изображений на чистом JavaScript
Ребят, очень прошу помощи. Объясните мне пожалуйста на пальцах, логику слайдера на чистом JS. В интернете полно слайдеров, но все они на JQuery, либо очень сложные. Мне нужен простой слайдер, стрелка влево - появляется предыдущее изображение, вправо - следующее, без наворотов. Я совсем недавно изучаю JS, поэтому не совсем понимаю, как это можно реализовать, а в коде сложных слайдеров не могу разобраться за недостатком опыта. Буду очень благодарен за помощь.
Ответ: Deimon26 , посмотри тут, всё на чистом js, с коментами
Изогнутая
Тень
или Тень
симулирующая изогнутые вверх углы,
выглядит очень эффектно на сайте.При этом, объекты или изображения выделяются из обычного текста.
И такого трехмерного эффекта,
можно добиться используя только CSS3
и HTML
.
Для начала некоторые общие, но важные основы для создания выгнутой или вогнутой тени.
Блок с тенью
С помощью CSS3
может быть создана тень любого объекта HTML,
с любым направлением, размером и размытием. Для этого используется, CSS3
параметр “box-shadow: 2px 2px 2px 2px #000 inset”
. Важно знать, что тень адаптируется к размеру и форме объекта. Круглый угол объекта отбрасывает круглую тень.
Для одного объекта может быть одновременно указано несколько различных теней, разделенных запятой.
Смысл информации”box-shadow: 2px 2px 2px 2px #000 inset “:
- Первое значение смещение в горизонтальном направлении.
Чем больше значение, тем больше тень перемещается вправо, а отрицательное значение перемещает тень влево. - Второе значение представляет собой смещение в вертикальном направлении.
При положительных значениях тень движется вниз и при отрицательных значениях – вверх. - Третье значение определяет степень размытия тени.
Чем больше значение, тем больше размытость. - Четвертый дополнительный параметр определяет радиус тени.
Чем больше значение, тем больше тень. - Затем следует цвет тени.
Эти данные также влияют на восприятие размытия. - “inset “: Это необязательная информация является внутренней тенью
Данное обозначение цвета “# 000”, можно заменить на “RGBA” (красный, зеленый, синий, альфа-канал), например, “box-shadow: 4px 4px 4px rgba(0, 0, 0, .6)”, что делает тень объекта полупрозрачной и, таким образом, она выглядит на текстурированном фоне более естественно.
Арочные и изогнутые тени
Основная разметка HTML неизменна во всех следующих примерах. Поэтому добавляться будет только то, что нужно в CSS3 . Вместо изображения также может быть интегрирован второй “Div -контейнер” для текста, но это, в конечном счете, то же самое.
Для определения положения тени, контейнер “DIV ” должен иметь параметр “position: relative” и с помощью “z-index:1” переместиться на передний план. Таким образом, этот контейнер служит в качестве точки отсчета для абсолютно расположенного тени.
#schatten { position: relative; height: 34.4em; width: 50em; margin: -2.5em auto 1.8em; left: -5px; z-index: 1; }
Теперь определяются свойства либо второго контейнера “DIV
” или свойства изображения.
Размер как в ширину так и в высоту 100% от родительского контейнера “#schatten”,
а также получает белую рамку “border”
в 5 пикселей.
Что бы белая рамка отличалась от фонового изображения, будет добавлена ещё одна тень. Это приводит к дополнительному отделению объекта от фона, тем самым усиливая 3D-эффект
.
#schatten img { position: relative; width: 100%; height: 100%; border: 5px solid #fff; box-shadow: 0 -3px 5px -2px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 0, 0, .1) inset; }
Благодаря псевдо-элементам “:before” и “:after” изогнутая тень определяется и добавляется к контейнеру “DIV “.class=”notranslate”> Элементы “:before” и “:after” , как правило, интерпретируется как встроенные объекты и размещаются на HTML элемент, другими словами, размещается до или после элемента.Благодаря “position: absolute “, тень является независимой от реального объекта и может позиционироваться индивидуально.
Сначала определяется размер тени, и полученные, таким образом, с помощью двух псевдо-элементов два прямоугольника с шириной 50% и высотой 30% родительского контейнера “#schatten
“. Два прямоугольников затем сдвигаем на 2 пикселя и получаем тень на расстоянии 15 пикселей и размытием 10 пикселей.
Псевдо-элемент “:before”
предназначен для представления тени в нижней левой части и, следовательно, получает вращение 3 ° против часовой стрелки. За правую часть отвечает элемент “:after”
.
#schatten:before, #schatten:after { position: absolute; content: ""; width: 50%; height: 30%; bottom: 2px; left: 10px; box-shadow: 0 15px 10px rgba(0, 0, 0, .7); transform: rotate(-3deg); z-index: -2; } #schatten:after { right: 0; left: auto; transform: rotate(3deg); }
Теперь рассмотрим другие примеры арочных и изогнутых теней.
И, как уже было описано выше, вставим дополнительный контейнер “DIV
” вместо изображения.
Основной код CSS3 для всех последующих примеров:
Box { position: relative; height: 12em; width: 31em; margin: 0 auto; z-index: 1; } .schatten { position: relative; color: #777; width: 80%; height: 80%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; } .schatten:before { position: absolute; content: ""; z-index: -2; box-shadow: 0 0 15px rgba(0, 0, 0, .6); border-radius: 100px / 20px; }
Горизонтально изогнутая тень
.schatten1:before { top: 0; bottom: 0; left: 10px; right: 10px; }Вертикально изогнутая тень
.schatten2:before { top: 10px; bottom: 10px; left: 0; right: 0; }Загнутые уголки
.schatten3:before, .schatten3:after { position: absolute; content: ""; width: 50%; height: 30%; bottom: 2px; left: 10px; box-shadow: 0 15px 10px rgba(0, 0, 0, .6); transform: rotate(-3deg); z-index: -1; } .schatten3:after { right: 0; left: auto; transform: rotate(3deg); }Тень в перспективе
.schatten4:before, .schatten4:after { position: absolute; content: ""; z-index: -2; bottom: 5px; width: 80%; height: 3.1em; } .schatten4:before { left: 50px; box-shadow: -80px 0 8px rgba(0, 0, 0, .4); transform: skew(45deg); } .schatten4:after { left: 40px; box-shadow: 80px 0 8px rgba(0, 0, 0, .4); transform: skew(-45deg); }Висящая тень
.schatten5 { position: relative; color: #777; width: 80%; height: 9.5em; top: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 -30px 40px rgba(0, 0, 0, .1) inset; transition: 1s ease-in-out; transform-style: preserve-3d; } .schatten5:after { content: ""; display: block; height: 80%; width: 75%; transform: rotateX(80deg) translate3d(0, 0, -44px); box-shadow: 50px 200px 25px 10px rgba(0, 0, 0, .3); transition: 1s ease-in-out; } .schatten5:hover { top: 35px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; } .schatten5:hover:after { transform: rotateX(94deg) translate3d(0, 0, -70px); box-shadow: 50px 200px 25px 10px rgba(0, 0, 0, .4); }Приподнятая тень
.schatten6:before { position: absolute; content: ""; z-index: -2; box-shadow: 0 0 15px rgba(0, 0, 0, .6); border-radius: 100px / 20px; } .schatten6 { top: 0; box-shadow: 0 25px 10px -10px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .3), 0 -30px 40px rgba(0, 0, 0, .1) inset; } .schatten6:hover { top: 15px; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; }Свойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.
Как сделать тень блока с помощью свойства box-shadow
Поддержка браузерами
IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-
1. Синтаксис свойства box-shadow
Каждая тень принимает от одного до пяти параметров: горизонтальное смещение, вертикальное смещение, радиус размытия (необязательное значение), радиус распространения (необязательное значение) и цвет тени. Тени не влияют на компоновку и могут перекрывать соседние элементы или их тени. Свойство не наследуется.
Рис. 1. Синтаксис свойства box-shadow
| Значения: | |
| x-offset | Обязательное значение. Смещение тени по горизонтали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вправо от блока, отрицательное – влево. |
| y-offset | Обязательное значение. Смещение тени по вертикали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вниз, отрицательное — вверх. |
| blur | Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень. Можно использовать только положительные значения. |
| растяжение | Необязательное значение, расширяет тень, утолщая ее сплошную часть между размытыми краями. Принимает как положительные, так и отрицательные значения, задаётся в единицах длины — px и т.д. |
| цвет | Необязательное значение. По умолчанию тень черного цвета. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB , rgb(red, green, blue) , rgba(red, green, blue, alpha) . Для Safari цвет тени указывать обязательно. |
| inset | Создаёт тень внутри блока. |
| none | Значение по умолчанию, означает отсутствие тени. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
2. Примеры тени для блока
2.1. Внутренняя тень
.example-shadow-1 { background: #e6e3df; text-align: center; } .example-shadow-1 span { margin: 50px; height: 100px; width: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1); }
2.2. Плоская тень с одной стороны
flat
flat
.example-shadow-2 { background: beige; text-align: center; } .example-shadow-2 a { display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; margin: 20px; color: white; background: #55acee; box-shadow: 0 5px 0 #3C93D5; } .example-shadow-2 a:hover { background: #6FC6FF; }В данном уроке мы создадим эффект загнутых уголков без использования изображений и дополнительной разметки. Он отлично работает во всех современных браузерах и хорошо подходит для дизайна сайта с простыми цветовыми решениями.
Данный эффект использовался в демонстрации к уроку "Множественные фоны и обводка с использованием CSS2 " . Кроме того, применение загнутых уголков в дизайне реального сайта можно посмотреть на примере Yiibu . Но сайт Yiibu использует изображения, а мы задействуем псевдо-элементы и CSS.
Начало
Ничего сложного. Подойдет любой элемент и не потребуется никакой дополнительной разметки. Все начинается с простого окрашенного прямоугольника. Браузеры, которые не поддерживают псевдо-элементы (IE6 и IE7), тоже будут выводить его.
Добавление свойства position:relative делает возможным абсолютное позиционирование псевдо-элементов.
Note { position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; }
Загнутый уголок создается с помощью псевдо-элемента, который позиционируется в верхнем углу прямоугольника. Псевдо-элемент не имеет ширины и высоты, но у него задана толстая обводка. Изменяя толщину обводки, мы будем изменять размер загнутого уголка.
В данном примере верхняя и правая части обводки имеют цвета, которые соответствуют цвету фона родительского прямоугольника. Левая и нижняя части обводки имеют более темный цвет или более светлый по сравнению с цветом фона прямоугольника.
Note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; }
Это все, что нужно для создания простого эффекта загнутого уголка, похожего на используемый на сайте Yiibu.
Firefox 3.0 не позволяет позиционировать псевдо-элементы. Вы можете использовать пару свойств для исправления положения в данном браузере.
Note:before { ... display:block; width:0; }
Добавляем легкую тень
Вид уголка может быть немного улучшен с помощью добавления свойства box-shadow (для тех браузеров, которые его поддерживают) к псевдо-элементу. Установка свойства overflow:hidden для класса элемента скрывает часть тени, которая нарушает эффект загнутого уголка.
Note:before { ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); }
Скругленные углы
Также относительно просто использовать данную технику вместе со скругленными углами. К сожалению, каждый современный браузер имеет какую-нибудь ошибку, связанную со свойством border-radius (включая те, кто использует свойство без префикса). Такое положение означает необходимость в проведении дополнительных работ.
Только браузеры Webkit могут делать скругленные углы для псевдо-элементов, если те имеют только 2 части обводки. Opera 11 и Firefox 3.6 создают неприятную для глаз кучу. Причем Opera 11 имеет максимальную ошибку в данном процессе.
Использование всех четырех сторон исключает проблемы в Opera 11 и Firefox 3.6. Но данный метод решения приводит к ошибке в Safari 5, что выражается в выводе диагональной линии с зубцами. Обойти данную проблему можно установив цвет для хотя бы одной части обводки как transparent .
Цвет фона будет виден сквозь прозрачную обводку. В идеальном случае такой подход будет формировать эффект и содержит минимум кода. Но Opera 11 показывает фоновый цвет сквозь прозрачную обводку только при условии, что установлено свойство border-radius .
Note-rounded:before { content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff transparent transparent; background:#658E15; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; display:block; width:0; }
CSS файл для демонстрационной страницы содержит комментарии, полезные для работы. Каждый браузер имеет свои особенности при использовании свойства border-radius или обводки элементов без ширины и высоты.
Окончательный вид кода
Ниже приводится весь код CSS, нужный для создания эффекта загнутых уголков с легкими тенями и использованием только одного элемента HTML.
Position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; } .note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Преодоление ограничений Firefox 3.0 */ } .note.rounded { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .note.rounded:before { border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; }
Заключение
На демонстрационной странице содержатся примеры с использованием различных цветов, чтобы убедиться в достаточной легкости использования эффекта.
Надо учитывать, что данная техника хуже работает при использовании изображения в качестве фона для элемента, чем при использовании простого цвета. Но такие ограничения имеются и у других методов организации загнутых уголков.
В этой статье как и в прошлой, эффект строится с помощью псевдоэлемента :after . Чтобы понять суть можете прочитать ту статью, там я схематично объяснял как это работает, тут повторятся не буду. В общем, все делается очень просто и настроить можно разные виды эффектов. В примере ниже, можно увидеть как я организовал 3 разных изгиба, внося минимальные изменения в код.
Начнем по порядку с первого, он самый базовый, а все остальные делаются исходя от него. Чтобы начать работу, Вам нужно определится какому блоку будет присвоен эффект, необычная тень. В нашем случаи, это будет блок - block_shadow .
Block_shadow{ position:relative; width:400px; height:150px; background:#f7f7f7; } .block_shadow:after{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50px; right:50px; -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-border-radius:200px / 50px; border-radius:200px / 50px; }
Я сейчас распишу, что именно создает такой вид. Сначала, блоку присвоили позиционирование relative , потом ширину, высоту, и обязательно фон, даже если он будет у Вас белый. Потом присваиваем псевдоэлемент :after . Для него же, установлены следующие параметры:
- position - присваиваем позиционирование - absolute .
- z-index - устанавливаем в минусе -1, чтобы спрятать за блоком.
- top:0;bottom:0; - отступ от верха и от низа - 0 пикселей, то есть тень видно. Если установить значение для - top -50%, то верхняя тень спрячется за блоком и получится вид, как в третьем блоке примера. Если для - bottom установить 50%, то исчезнет нижняя тень. 50% - это как пример, можете установить что-то свое и спрятать тень не полностью, если это нужно.
- left:50px;right:50px; - это отступ от краев. Мы отступили по 50 пикселей, чтобы тень по бокам скрыть. Забегу на перед, чтобы сделать второй вариант эффекта, когда тень по бокам, нужно просто поменять значения. Для сторон установить - 0, а для верха и низа 50 пикселей. Значение 50, можно конечно менять, так вы измените размер тени.
- box-shadow - это тень, тут все понятно. Устанавливаем цвет, прозрачность и размер размытия тени, сейчас - 25 пикселей.
- border-radius - это закругление тени, чтобы создать тот самый эффект изгиба. первое значение - 200 пикселей, радиус по горизонтали, это половина от нашей ширины основного блока - 400 пикселей. 50 - это радиус по вертикали. Для осуществления второго примера - тень по сторонам, нужно делать так, чтобы второе значение было больше первого. Все зависит от размеров блока. В нашем случаи у второго примера соотношение 10px / 50px.
Все параметры, настраиваете под себя, можете менять как угодно, главное не перестарайтесь, чтобы не потерять реалистичный вид.
Я в первом разъяснении, по сути все расписал, так что для второго блока в примере, я просто представлю готовые стили, чтобы Вы видели и было понятнее.
Block_shadow:after{ content:""; position:absolute; z-index:-1; top:25px; bottom:25px; left:0; right:0; -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-border-radius:10px / 50px; border-radius:10px / 50px; }
Для блока в третьем примере, я тоже описал, что нужно сделать и тоже просто приведу готовый код.
Block_shadow:after{ content:""; position:absolute; z-index:-1; top:50%; bottom:0; left:50px; right:50px; -webkit-box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-box-shadow:0 0 25px rgba(0,0,0,0.3); box-shadow:0 0 25px rgba(0,0,0,0.3); -moz-border-radius:200px / 50px; border-radius:200px / 50px; }
Изменяя стили, подгоняя их под себя, можно добиться разных результатов и абсолютно новых эффектов, не только тех, что я отобразил в примере. Указав значения в процентах, можно осуществить автоматического растягивания тени на всю высоту или ширину блока, если блок имеет не постоянный размер. Пробуйте и улучшайте и Ваш сайт будет иметь необычный вид.
На этом все, спасибо за внимание. 🙂
