megafon4u.ru

Недавно наткнулся на одном англоязычном блоге технику построения звездочек без использования изображений. Для этого нужно научится пользоваться CSS3. Суть его заключается в том, что звездочка состоит из нескольких элементов, каждый из которых поворачивается на определенный градус вокруг своей оси.
Как это выглядит на примере. Имеем:
HTML

<a href="#" class="starburst">
   <span><span><span>
      <br />Новая<br />CSS3<br />Звездочка!
   </span></span></span>
</a>

CSS

.starburst {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	rotation:-45deg;
	position:relative;
	top:2em;
	left:2em;
	text-align:center;
	text-decoration:none;
	color:#000;
	font-weight:bold;
	font-family:Arial, sans-serif;
}
.starburst span {
	display:block;
	width:6em;
	height:6em;
	background:#fe0;
	-webkit-transform:rotate(22.5deg);
	-moz-transform:rotate(22.5deg);
	rotation:22.5deg;
}

Что получилось:

Пойдем дальше и попробуем сделать анимированные звездочки.

Пример можно посмотреть тут.
Хочется отметить, что тут не используются ни хаки, ни изображения ни яваскрипт. Удачи!

-----
Много интересного для себя узнал в новом блоге о веб дизайне.