В этой статье рассмотрим использование CSS "Маски" для красивого скрытия содержимого. Контент может быть как текст так и изображение. Идея довольно проста и используется только CSS преобразования (вращение, чтобы быть более точным). Конечно, этот эффект будет полностью функциональным только в современных браузерах.
Посмотрите на изображение ниже, чтобы увидеть, что именно мы сделаем.
Идея, как уже упоминалось, довольно проста. У нас есть 3 вложенных элемента. Верхний уровень действует как контейнер определенного размера, который вписывается в дизайн. Второй элемент будет повернут X градусов (по часовой стрелке) и третий элемент поворачивается-X градусов (против часовой стрелки).
HTML код разметки:
<div class="box">
<div class="inner">
<div class="content"><img src="img.jpg" alt="Велосипед"></div>
</div>
</div>CSS код оформления:
.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;
}Первый элемент не поворачивается, и имеет фиксированную ширину и высоту. Второй элемент поворачивается по часовой стрелке и третий элемент поворачивается против часовой стрелки на ту же величину, что и второй.
Этот трюк работает лучше, если применяется к изображениям (фоновые изображения), но любой контент может быть замаскирован.
