Граватар на CSS

Граватар на CSS

Накопал в сети прикольный эффект, теперь вот делюсь им с тобой. Заключается он в растягивании/сжатии сторон элементов с помощью css. С чего все начинается?

</p>
<div class="trapecia"></div>
<style type="text/css">
.trapecia{
	background: #080;
	border: 1px #f80 solid;
	border-width: 20px 40px 100px 150px;
	width: 200px;
	height: 100px;
}
</style>
<p>

Получается прямоугольник в прямоугольнике. Добавим немного магии:

</p>
<style type="text/css">
.trapecia{
	border-left-color: transparent;
	border-right-color: transparent;
}
</style>
<p>

Видал, как его перекосило? А теперь попробуй занулить высоту. А теперь еще и ширину. Вооот. А если убрать верхнюю обводку и сделать прозрачный фон, получится вообще треугольник:

Поигравшись параметрами, можно получать различные трапеции, в том числе, и вертикальные. А теперь приступим к созданию подобия граватарки. Моя граватарка состоит из 16 квадратов, разбитых на 4 группы 2х2. Группы отличаются друг от друга только поворотом на 90 градусов. Посему:

</p>
<div class="ptn">
<div class="blk blk1">
<div class="elt elt1"></div>
<div class="elt elt2"></div>
<div class="elt elt3"></div>
<div class="elt elt4"></div>
</p></div>
<div class="blk blk2">
<div class="elt elt1"></div>
<div class="elt elt2"></div>
<div class="elt elt3"></div>
<div class="elt elt4"></div>
</p></div>
<div class="blk blk3">
<div class="elt elt1"></div>
<div class="elt elt2"></div>
<div class="elt elt3"></div>
<div class="elt elt4"></div>
</p></div>
<div class="blk blk4">
<div class="elt elt1"></div>
<div class="elt elt2"></div>
<div class="elt elt3"></div>
<div class="elt elt4"></div>
</p></div>
</div>
<p>

Задаю базовые стили:

<br />
.ptn{<br />
	height: 80px;<br />
	width: 80px;<br />
} /* размеры граватарки */</p>
<p>.ptn .blk{<br />
	display: inline-block;<br />
	float: left;<br />
	height: 50%;<br />
	width: 50%;<br />
}</p>
<p>.ptn .blk .elt{<br />
	background: #02b; /* цвет 1 */<br />
	border: 10px #fd4 solid; /* цвет 2. размеры = 1/8 от размеров граватарки */<br />
	display: inline-block;<br />
	float: left;<br />
	height: 0px;<br />
	width: 0px;<br />
}<br />

Затем – стили 4 маленьких блоков. Все произвольно и ограничивается только фантазией.

<br />
.ptn .blk .elt1{<br />
	border-right-color: transparent;<br />
	border-top-color: transparent;<br />
}</p>
<p>.ptn .blk .elt2{<br />
	border-bottom-color: transparent;<br />
	border-left-color: transparent;<br />
	border-top-color: transparent;<br />
}</p>
<p>.ptn .blk .elt3{<br />
	border-bottom-color: transparent;<br />
}</p>
<p>.ptn .blk .elt4{<br />
	border-left-color: transparent;<br />
	border-right-color: transparent;<br />
}<br />

Осталось только повернуть большие блоки:

<br />
.ptn .blk1{<br />
	-webkit-transform: rotate(0.1deg);<br />
	-moz-transform: rotate(0.1deg);<br />
	-o-transform: rotate(0.1deg);<br />
	-ms-transform: rotate(0.1deg);<br />
	transform: rotate(0.1deg);<br />
} /* webkit почему-то сглаживает линии про любом повороте. сгладим линии и первого блока */</p>
<p>.ptn .blk2{<br />
	-webkit-transform: rotate(90deg);<br />
	-moz-transform: rotate(90deg);<br />
	-o-transform: rotate(90deg);<br />
	-ms-transform: rotate(90deg);<br />
	transform: rotate(90deg);<br />
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);<br />
}</p>
<p>.ptn .blk3{<br />
	-webkit-transform: rotate(270deg);<br />
	-moz-transform: rotate(270deg);<br />
	-o-transform: rotate(270deg);<br />
	-ms-transform: rotate(270deg);<br />
	transform: rotate(270deg);<br />
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);<br />
} /* из-за float порядок следования блоков не совпадает с движением против часовой. ваш Кэп */</p>
<p>.ptn .blk4{<br />
	-webkit-transform: rotate(180deg);<br />
	-moz-transform: rotate(180deg);<br />
	-o-transform: rotate(180deg);<br />
	-ms-transform: rotate(180deg);<br />
	transform: rotate(180deg);<br />
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);<br />
}<br />

Вышло довольно симпатично.

При этом, результат виден даже в IE7. В принципе, если хочешь, можешь задублировать граватарку и сделать бОльшую по размерам из 4 таких, но это будешь делать сам. Удачи!

  1. Комментов пока нет

  1. Трэкбэков пока нет.

T_T O_O =| =D =/ =) =( ;) :twisted: :idea: :cool: :blush: :?: :!:
*