Недавно я хотел простой CSS- метод для добавления скошенного эффекта к изображениям. Достаточно легко создать ощущение глубины с нормальными границами смещения ( внизу слева ), но я хотел получить эффект, который фактически выглядел бы как часть изображения , как будто это было скос на самом изображении ( внизу справа ).
В конце концов я нашел четыре различных способа сделать это, каждый с разным уровнем поддержки: от самого чистого подхода, который работал только в одном браузере, до самого надежного, который работает во всем, вплоть до IE6 .
Все они работают на одном основном принципе; черные границы для тени и белые границы для выделения накладываются на верхнюю часть изображения, а затем смешиваются с некоторой непрозрачностью. В каждом случае браузеры без поддержки этой техники будут просто отображать изображение как обычно.
Техника 1: Использование сгенерированного контента на изображении ( демонстрация )
- Плюсы: сверхчистая техника не требует дополнительной разметки
- Минусы: работает только в опере
С помощью этой первой техники мы создаем псевдоэлемент, используя :afterидеально наложен поверх изображения. Затем мы добавляем границы к наложенному элементу и используем RGBA для определения каждого цвета границы: верхняя и левая границы имеют вид rgba(255,255,255,0.4), а нижняя и правая границы — rgba(0,0,0,0.4),
img.beveled{ position:relative;}img.beveled:after{ position:absolute; left:0; top:0; display:block; content:"0a0"; box-sizing:border-box; width:100%; height:100%; border:5px solid; border-color:rgba(255,255,255,0.4) rgba(0,0,0,0.4) rgba(0,0,0,0.4) rgba(255,255,255,0.4);}
<img class="beveled" src="stormtroopers.jpg" alt="A legion of Lego Stormtroopers, standing in formation." />
Этот метод работает только в Opera, потому что ни один другой браузер не поддерживает сгенерированный контент на заменяющих мультимедиа элементах, таких как <img><object> Но так как мы обращаемся только к Opera, у нас есть свобода использовать box-sizing100%contentчто-то или они не отображаются.)
Техника 2: Использование сгенерированного контента на элементе-обёртке ( демонстрация )
- Плюсы: более широкий спектр поддерживаемых браузеров
- Минусы: требуется дополнительная разметка и явные размеры
Второй метод по сути такой же, как и первый, но на этот раз мы создаем оверлейный элемент, используя сгенерированный контент в оболочке <span><img> Для этого метода нам также нужно начать определять явные измерения для элемента оболочки и сгенерированного контента (хотя мы могли бы использовать специфические для поставщика версии box-sizing
span.beveled{ position:relative; width:200px; height:200px; display:block;}span.beveled:after{ position:absolute; left:0; top:0; display:block; content:"0a0"; width:190px; height:190px; border:5px solid; border-color:rgba(255,255,255,0.4) rgba(0,0,0,0.4) rgba(0,0,0,0.4) rgba(255,255,255,0.4);}
<span class="beveled"> <img src="stormtroopers.jpg" alt="A legion of Lego Stormtroopers, standing in formation." /></span>
Техника 3: Использование теней вместо границ ( Демо )
- Плюсы: самая визуально привлекательная техника
- Минусы: работает только в Firefox 3.5 или более поздней версии.
Третий метод — это отклонение от второго, где вместо использования границ RGBA мы используем -moz-box-shadow:inset Так как эффекты тени блока имеют альфа- градиент (а не одинаковую непрозрачность во всех точках), общий эффект намного красивее и округленнее; и параметр расширенного радиуса может быть тонко использован, чтобы смешать резкость угла. Этот эффект поддерживается только в Firefox 3.5 или более поздней версии; хотя Safari реализует box-shadow (как -webkit-box-shadowinset
span.beveled{ position:relative; width:200px; height:200px; display:block;}span.beveled:after{ position:absolute; left:0; top:0; display:block; content:"0a0"; width:200px; height:200px; -moz-box-shadow:-5px -5px 2px rgba(0,0,0,0.4) inset, 5px 5px 2px rgba(255,255,255,0.4) inset;}
<span class="beveled"> <img src="stormtroopers.jpg" alt="A legion of Lego Stormtroopers, standing in formation." /></span>
Я полагаю, что в любом случае мы могли бы добавить версию -webkit
Техника 4: Все счастливы ( Демо )
- Плюсы: работает во всех современных браузерах
- Минусы: требуется больше дополнительной разметки и явных размеров
Четвертый и последний метод наиболее совместим с браузерами, но также требует большей модификации HTML . По сути, это то же самое, что и второй метод, но с двумя важными отличиями: во-первых, он использует второй физический <span> и во-вторых, он использует обычные цвета с шестигранной границей, а не RGBA , а затем смешивает весь элемент с непрозрачностью. Даже Internet Explorer может справиться с этим:
span.beveled{ position:relative; width:200px; height:200px; display:block;}span.beveled span{ position:absolute; left:0; top:0; display:block; width:190px; height:190px; border:5px solid; border-color:#fff #000 #000 #fff; filter:alpha(opacity=40); opacity:0.4;}
<span class="beveled"> <img src="stormtroopers.jpg" alt="A legion of Lego Stormtroopers, standing in formation." /> <span></span></span>
Дальнейшее развитие
Вы можете пойти дальше, используя цветные рамки для гелеобразного эффекта или даже несколько ступенчатых наложений для создания более тонких или запутанных эффектов. Но основная идея здесь, и я надеюсь, что вы найдете ее полезной. Конечно, было здорово играть!