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

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

Оцени публикацию:
  • 15,66
Оценили человек: 15
Теги : css3, transform.rotation, GUI

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Еще больше иконок http://fontawesome.io/icons/
    26 января 2014, 13:23 коммент полезен : 0 # Гость
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » CSS »