316 В этой статье мы вам покажем, как можно создать маску контента, расположенную под углом, используя только CSS.
Идея очень проста и заключается в использовании свойства CSS transform (rotate (поворот) более точно). Конечно же, эффект будет только в тех браузерах, которые поддерживают этой свойство.
Идея, как уже упоминалось, довольно проста. У нас есть 3 вложенных элемента. На верхнем уровне контейнер определенного размера, как основа. Второй элемент будет повернут на X градусов (по часовой стрелке) и третий элемент будет повернут на -X градусов (против часовой стрелки). Посмотрите на изображение ниже, чтобы лучше понять идею.
HTML верстка выглядит вот так:
|
1 2 3 4 5 6 7 8 9 |
<div class="box"> <div class="inner"> <div class="content"><img src="img.jpg" alt="my bike" /></div> </div> </div> |
Старый добрый CSS
Отметим наиболее важные моменты. Свойство overflow необходимо на всех 3 элементах (в прочем, вы можете не ставить его на 3 элементе). Первый элемент не поворачивается и у него фиксированные ширина и высота. Второй элемент поворачивается по часовой стрелке и третий против часовой стрелки на то же значение градусов.
Вам прийдется поиграть со свойством margin, чтобы все выглядело идеально. В примере показаны основы, не дизайн, так что вы можете оформить этот блок на свой вкус.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* angled box styles */ .box{ width:700px; height:300px; background:#ccc; overflow:hidden; margin:1em 0; } .box .inner{ -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); width:300px; height:450px; margin-top:-70px; margin-right:100px; overflow:hidden; background:#aaa; float:right; border:3px solid #fff; } .box .inner .content{ -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); width:500px; height:320px; margin-top:60px; margin-left:-80px; overflow:hidden; background:#f1f1f1; } |
Такой трюк очень хорошо работает на изображениях, но и текстовое содержание не запрещено.
Еще раз напомним, что прийдется поработать со свойством margin, чтобы получить наилучший результат. Также не забывайте про браузеры, которые не поддерживают повороты на CSS.
Было бы здорово, если бы все браузеры понимали такие фокусы. А иначе для остальных все равно придется придумывать другой способ реализации. И тогда вопрос, а зачем тогда писать 2 разных набора кода.
Чтобы обеспечить наилучший вид сайта в наибольшем количестве браузеров.
Наибольшее количество «браузера» — это IE (почти 80% пользователей на данный момент используют IE8) — а он это непоймет. Поэтому остается вариант изображений...
ИЕ8 О_о?!?! Пользователи Ие — это как болельщики Анжи: вроде их дохрена, но среди моих друзей таких идиотов нет. Кокой ие?! Максимум процентов 20 на нём сидит. Он мало того, что тормозной, так ещё и самый уязвимый. 80% — это Опера+Мозила+Хром.
В тему о браузеров. Откуда 80% От поисковиков, в которые заходят владельцы вновь установленной винды в поисках нормального браузера. То-биш 80% людей ищут первым делом в поисковике браузер получше, но ищут его из под IE. А так им пользуются разве что убогие