Трехмерный эффект с загнутыми углами. Эффект загнутых уголков с использованием только CSS
Свойство 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; }В этой статье как и в прошлой, эффект строится с помощью псевдоэлемента :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; }
Изменяя стили, подгоняя их под себя, можно добиться разных результатов и абсолютно новых эффектов, не только тех, что я отобразил в примере. Указав значения в процентах, можно осуществить автоматического растягивания тени на всю высоту или ширину блока, если блок имеет не постоянный размер. Пробуйте и улучшайте и Ваш сайт будет иметь необычный вид.
На этом все, спасибо за внимание. 🙂
В данном уроке мы создадим эффект загнутых уголков без использования изображений и дополнительной разметки. Он отлично работает во всех современных браузерах и хорошо подходит для дизайна сайта с простыми цветовыми решениями.
Данный эффект использовался в демонстрации к уроку "Множественные фоны и обводка с использованием 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; }
Заключение
На демонстрационной странице содержатся примеры с использованием различных цветов, чтобы убедиться в достаточной легкости использования эффекта.
Надо учитывать, что данная техника хуже работает при использовании изображения в качестве фона для элемента, чем при использовании простого цвета. Но такие ограничения имеются и у других методов организации загнутых уголков.
Изогнутая
Тень
или Тень
симулирующая изогнутые вверх углы,
выглядит очень эффектно на сайте.При этом, объекты или изображения выделяются из обычного текста.
И такого трехмерного эффекта,
можно добиться используя только 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; }