Сегодня хочу поведать такую вещь как создание иконок с помощью css 3 стилей. Может, кто наблюдал, что на некоторых сайтах при отключенных картинках иконки остаются на сайте и никуда не исчезают. Да, на самом деле это не изображения, а нарисованная с помощью css картинка-иконка. С появлением CSS 3 теперь возможно и такое. Давайте просмотрим пример создания иконки домик для перехода на главную страницу. Не буду много говорить, давайте смотреть пример;
Главная
Я думаю, для примера нормально. Цвет, конечно, можно менять в css. Посмотрим css код для создания иконок:
Код CSS
.home a:before {
left:1px;
border-style:solid;
border-color:transparent;
border-width:8px 7px;
border-bottom-color:#666;
margin-top:-16px;
background:transparent;
}
.home a:after {
left:3px;
width:2px;
height:4px;
border-style:solid;
border-color:#666 #666 transparent;
border-width:3px 4px 0;
margin-top:0;
background:transparent;
}
.home a:hover:before,
.home a:focus:before,
.home a:active:before {
border-bottom-color:#ссс;
background:transparent;
}
.home a:hover:after,
.home a:focus:after,
.home a:active:after {
border-color:#ссс #ссс transparent;
}
И сама ссылка с классом выглядит так:
Код HTML
<ul>
<li class="home">
<a class="menyu" href="/index.php" title="Главная страница">Главная</a>
</li>
</ul>
После этого обязательно необходимо прописать класс для тега li, если вы используите его, но можно применять к любому. Вот пример для вывода меню:
Код CSS
li {
position:relative;
z-index:1;
overflow:hidden;
list-style:none;
padding:0;
/*margin:-15 0 0.15em;*/
}
li a:link,
li a:visited {
display:block;
border:0;
padding-left:5px;
padding-right: 5px;
color:#ccc;
}
li a:hover,
li a:focus,
li a:active {
color:#ccc;
background:transparent;
}
li:before,
li:after,
li a:before,
li a:after {
content:"";
position:absolute;
top:50%;
left:0;
}
li a:before,
li a:after {
margin:-8px 0 0;
background:#c55500;
}
li a:hover:before,
li a:focus:before,
li a:active:before {
background:#730800;
}
Это, конечно, мой вариант, вы можете использовать все, что угодно, применять данный стиль к другим тегам html. Вот такой вот пример получился. Создали домик, давайте создадим иконку посложней. Например, иконку с фотоаппаратом. Смотрим пример иконки.
Фото
Для создания такой иконки неоходимо создать класс, например, одноименный photo, и с ним будем работать. Создаем класс в css документе, вставляем следующее.
Код CSS
/* ФОТО */
.photo a:before {
left:2px;
width:16px;
height:12px;
margin-top:-6px;
}
.photo a:after {
left:6px;
width:8px;
height:2px;
margin-top:-8px;
}
.photo:after {
left:6px;
width:8px;
height:8px;
margin-top:-4px;
background:#fff;
/* css3 */
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
.photo a:hover:after,
.photo a:focus:after,
.photo a:active:after {
background:#000;
}
Как вы заметили, все это происходит, благодаря использованию селектора after, before. И так можно создавать любые картинки-иконки методом css стилей.
Усложним еще нашу задачу и сделаем иконку зеленого цвета с галочкой. Смотрим пример использования:
Сохранить или подтвердить на ваш вкус
Как достичь такого эффекта? Да легко! Создадим класс, например, success-alt и пропишем в нем следующий код:
Код CSS
.success-alt {
color:#7F913C;
}
.success-alt:before {
left:6px;
width:5px;
height:12px;
border-width:0 5px 5px 0;
border-style:solid;
border-color:#7F913C;
margin-top:-11px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
Вот такой незамысловаты класс получился, можно скопировать код и опробовать или поставить к себе на сайт. Подключаем идентично первому, только меняем класс на необходимый. Давайте еще напоследок усложним задачу - создадим иконку треугольник с восклицательным знаком. Сам треугольник будет желтого цвета, а восклицательный знак черный. Давайте приступим и посмотрим, что получилось:
Иконка восклицательный знак в желтом треугольнике на css 3
Как прописать клас для такой иконки на css? Сейчас и пропишем. Создаем класс с названием, например, warning, и прописываем для него стили:
Код CSS
.warning:before {
content:"!";
z-index:2;
left:8px;
margin-top:-8px;
font-size:14px;
font-weight:bold;
color:#000;
}
.warning:after {
z-index:1;
border-width:0 11px 18px;
border-style:solid;
border-color:#F8D201 transparent;
margin-top:-10px;
background:transparent;
}
Пример использования css 3 для создания иконки email:
EMAIL
После просмотра в действии давайте просмотрим сам исходный код css стиля.
Код CSS
.email:before {
z-index:10;
left:6px;
width:12px;
height:12px;
border-width:0 1px 1px 0;
border-style:solid;
border-color:#fff;
margin-top:-13px;
background:transparent;
/* css3 */
-webkit-transform:rotate(39deg) skew(-12deg);
-moz-transform:rotate(39deg) skew(-12deg);
-ms-transform:rotate(39deg) skew(-12deg);
-o-transform:rotate(39deg) skew(-12deg);
transform:rotate(39deg) skew(-12deg);
}
.email a:before {
left:3px;
width:6px;
border-width:6px;
border-style:solid;
border-color:#ccc #ccc transparent;
margin-top:-7px;
background:transparent;
}
.email a:after {
left:4px;
border-width:0 8px 9px;
border-style:solid;
border-color:#ccc transparent; /* Вместо 5 */
margin-top:-3px;
background:transparent;
}
.email a:hover:before,
.email a:focus:before,
.email a:active:before {
border-color:#666 #666 transparent;
background:transparent;
}
.email a:hover:after,
.email a:focus:after,
.email a:active:after {
border-bottom-color:#666;
}
Код конечно сложнее чем мы просматривали примеры в предыдущей публикации на тему создания иконок на css Но согласитесь результат того стоит, пользователь отключил показ картинок в браузере, а картинки и дизайн не изменился эффективно и интересно. Этим можно ввести даже в заблуждение. что случилось когда показ отключен, а иконки на сайте не отключились. Хочу показать еще примеры использования некоторых иконок на селекторах css before и after. Следующим создадим иконку в виде мп3 плеера. Двайте просмотрим пример для начала что из этого может получиться и как выглядит иконка:
МП3 плеер
На первый взгляд ничего сложного нет, простая иконка мп3 плеер на css 3 создаем для этого класс так и назовем его playerи далее пропишим для него стили смотрим код css ниже:
Код CSS
/* MP3 PLAYER */
.player:before {
left:3px;
width:9px;
height:6px;
border-width:2px 2px 11px;
border-style:solid;
border-color:#555;
margin-top:-10px;
/* css3 */
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.player:after {
left:6px;
width:3px;
height:3px;
border:2px solid #fff;
/* css3 */
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
Напомню кто забыл как мы подключаем данный класс для отображения иконки например для тега html span:
<span class="player"> МП3 плеер</span>
Будьте внимательней при прописании стилей для span он должен выглядеть примерно так для правильного отображения смотрим пример:
Код CSS
span {
position:relative;
z-index:1;
overflow:hidden;
list-style:none;
padding:0;
margin:-15 0 0.15em;
}
span a:link,
span a:visited {
display:block;
border:0;
padding-left:5px;
padding-right: 5px;
color:#ccc;
}
/*Если иконка ссылка*/
span a:hover,
span a:focus,
span a:active {
color:#ccc;
background:transparent;
}
/*Если иконка ссылка*/
span:before,
span:after,
span a:before,
span a:after {
content:"";
position:absolute;
top:50%;
left:0;
}
span a:before,
span a:after {
margin:-8px 0 0;
background:#c55500;
}
span a:hover:before,
span a:focus:before,
span a:active:before {
background:#730800;
}
Можно прописать для классов иконки и другой тег html, еще раз напоминаю - это только примеры использования вы можете использовать все, что угодно. Можно даже например DD как у меня можно посмотреть в исходном коде, для примера показать вам как это работает и не поламать весь дизайн страници для просмотра я просто использовал данный тег. Прописал для него стили классы и вот как вы видите все работает ормально. Теперь создадим звездочку наверное последняя иконка на сегодня и так просотрим пример для наглядности.
Звезда методом css 3
Ну вот на примере как вы видите можно попробовать отключить изображения в браузере, иконка звездочка которая в большенстве случаев на сайте может значить рейтинг популярность и тому подобное. В чем преимущество. а преимущество очевидно, когда пользователь с отключенными изображениями зашел к вам на страницу сайта, он всеравно увидит например рейтинг того или иного материала на который вы поставите звездочку на css 3. Далее предлагаю взглянуть для наглядности на сам код который дает нам изображение звездочки.
Код CSS 3
.save:before,
.save a:before {
left:6px;
border-width:10px 0 10px 8px;
border-style:solid;
border-color:transparent #ccc;
margin-top:-9px;
background:transparent;
/* css3 */
-webkit-transform:rotate(22.5deg);
-moz-transform:rotate(22.5deg);
-ms-transform:rotate(22.5deg);
-o-transform:rotate(22.5deg);
transform:rotate(22.5deg);
}
.save a:before {
left:6px;
/* css3 */
-webkit-transform:rotate(157.5deg);
-moz-transform:rotate(157.5deg);
-ms-transform:rotate(157.5deg);
-o-transform:rotate(157.5deg);
transform:rotate(157.5deg);
}
.save a:after {
border-width:8px 10px 0;
border-style:solid;
border-color:#ccc transparent;
margin-top:-3px;
background:transparent;
}
.save:hover:before,
.save:focus:before,
.save:active:before,
.save a:hover:before,
.save a:focus:before,
.save a:active:before {
border-left-color:#666;
background:transparent;
}
.save a:hover:after,
.save a:focus:after,
.save a:active:after {
border-top-color:#666;
background:transparent;
}
Вот так вот можно реализовать. На этом я завершаю данную публикацию.