Предлагаю сегодня рассмотреть одну из новые возможностей 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, давайте за столь прекрасные иконки скажем ему спасибо.
