CSS: використанням “масок”

У цій статті розглянемо використання 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;
    }

Перший елемент не повертається і має фіксовану ширину та висоту. Другий елемент повертається за годинниковою стрілкою і третій елемент повертається проти годинникової стрілки на ту ж величину, що і другий.

Цей трюк працює краще, якщо застосовується до зображень (фонові зображення), але будь-який контент може бути замаскований.