Android Tablet PC на DHgate.com


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;
	}

Первый элемент не поворачивается, и имеет фиксированную ширину и высоту. Второй элемент поворачивается по часовой стрелке и третий элемент поворачивается против часовой стрелки на ту же величину, что и второй.

Этот трюк работает лучше, если применяется к изображениям (фоновые изображения), но любой контент может быть замаскирован.


Другие публикации:

Написать комментарий через:

 
               
  • Локальный блог
  •  
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

 
Возврат % от покупок
Статусы для соц.сетей на ArtKiev Design Studio