В моих предыдущих постах мы узнали, как создавать речевые пузыри и ленты без дополнительных элементов HTML или изображений. Они были достигнуты с использованием CSS3-эффектов, примененных к псевдоэлементам: before и: after. В этом посте мы будем использовать похожую технику для создания эффекта скручивания бумаги в CSS3.
Бумажные завитки были популярны в течение нескольких лет. Зритель видит естественно выглядящую слегка изогнутую коробку, но на самом деле это оптическая иллюзия, создаваемая тенью в нижней части элемента:
До недавнего времени вам нужно было создавать тень как изображение в 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); }того, как.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.
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как Learn CSS3 .
Комментарии к этой статье закрыты. У вас есть вопрос о CSS3? Почему бы не спросить об этом на наших форумах ?