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

Автор: Aport Пятница, Январь 23rd, 2015 Нет комментариев

Рубрика: Разное

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

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

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

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

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

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

Внимание: это не файлысайт источник 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>MP3 Player</li></ul>

или так:

<ul><li><a title=»Call in progress» href=»#non»>Call in progress</a></li></ul>

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

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

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

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты