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:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

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

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