CSS3 иконки с помощью transform.rotation

Предлагаю сегодня рассмотреть одну из новые возможностей CSS3, а именно 84 GUI иконки для сайта, созданные с помощью свойства трансформации “transform.rotation“. Напомню, что это свойство может перемещать, вращать и изменять размеры блоков.

Я не буду рассказывать как это работает (об этом уже написано много раз), я расскажу про CSS3 файл с подготовленными классами, благодаря которым Вы сможете отображать иконки в любом месте своей страницы, например возле ссылки.сайт источник http://yapro.ru Thu Feb 03 2011 12:00:46 GMT+0300

Как это выглядит

Для начала давайте посмотрим, что у нас получится в результате.

Посмотреть примеры отдельно в новом окне »

Внимание: это не файлысайт источник http://yapro.ru Thu Feb 03 2011 12:00:50 GMT+0300 изображений, это все CSS3

Подключаем CSS-файл

<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/>

Как это работает

Изначально файл style.css сделан для применения в LI-элементах, например так:

<ul><li class="player">MP3 Player</li></ul>

или так:

<ul><li class="call-on call"><a title="Call in progress" href="#non">Call in progress</a></li></ul>

Как применять для других элементов

Например применим к элементу SPAN

<span class="player lebnikICO">MP3 Player</span>

Чтобы это работало, я написал CSS-класс lebnikICO

<style>
.lebnikICO {
    position:relative;
    z-index:1;
    overflow:hidden;
    padding:0;
    margin:0 0 0.25em;
}
.lebnikICO:before, .lebnikICO:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}
</style>

Скачать CSS3 файл с подготовленными классами иконок »

CSS-классы для нас подготовил Nicolas Gallagher, давайте за столь прекрасные иконки скажем ему спасибо.