✔Сделать загнутые уголки на CSS3 без картинок - «CSS3»
В моих предыдущих статьях мы изучили как делать словесные пузыри и ленты без дополнительных HTML-элементов или картинок. Это было достигнуто с использованием эффектов CSS3 применяемых к псевдоэлементам :before и :after. В этой статье мы задействуем похожий приём для создания эффекта загнутых уголков бумаги.
Загнутые уголки были популярны в течение нескольких лет. Пользователь видел естественно выглядящее слегка изогнутое поле, на деле же это оптическая иллюзия созданная тенью в нижней части элемента.
.;
Ещё недавно вам надо было делать тень в виде изображения в графической программе Photoshop, Gimp или другой. В идеале это будет 24-битный PNG с прозрачностью, который накладывается на любой фон, но это может вызвать проблемы в старых браузерах.
К счастью, CSS3 предоставляет хорошую альтернативу с некоторыми преимуществами.
- Эффект работает в современных браузерах, но не будет применяться в браузерах, которые его не поддерживают.
- Тени могут быть наложены на любой фон без дополнительных изображений.
- Эффект применяется к элементам любого размера.
- Используемый код занимает намного меньше байт, чем рисунок тени.
- Тень легко настраивается. Вы можете изменить цвет или глубину небольшой модификацией кода.
Для начала давайте создадим наш единственный HTML-элемент:
<div class="box">My box</div>
и добавим небольшую тень внутри и снаружи.
.box {
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
.;
Теперь нам нужен эффект загнутости на нижнем левом и правом краях. Это достигается путем создания двух псевдоэлементов :before и :after, которые:
- поворачиваются и наклоняются с помощью трансформации CSS3 (все последние версии браузеров поддерживают трансформацию с вендорными префиксами);
- позиционируются по нижнему краю;
- отбрасывают тень.
.;
.;
Теперь мы можем переместить элементы за основной блок с помощью z-index: -1. Получается, что становятся видны только края тени.
.;
CSS-код для псевдоэлементов.
.box:before, .box:after {
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 12px;
background: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
z-index: -1;
.box:after {
left: auto;
right: 12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);
В коде много свойств с вендорными префиксами для достижения эффекта, но они требуют меньшего количества байт и HTTP-запросов, чем графика.
Пожалуйста, ознакомьтесь с демонстрационной страницей для примера. Как и ожидалась, пример работает в IE9, Firefox, Chrome, Safari и Opera. IE6, IE7 и IE8 показывают изящную деградацию, в этих браузерах никаких эффектов тени нет. Весь код CSS содержится внутри HTML.