Как создать иконки ксс

29 Апр 2014
И так для начала в мире много разных иконок, и все они не подходят, так как в некорых нет одно типности, а те что нужны не легко найти, но это можно легко исправить с поможншью каскада стилей, не знаю как вам но мне нравится эта фашка, пример у меня на сайте, в конце написания скну скин в обменик.

Комментарии:

Cистема 25 Мая 2014
Тему переместил Админ форума WEBSTER из раздела Уроки мастеров в раздел Помощь мастерам

mcerebas 29 Апр 2014
Автор темы

пример отображения иконок в каскаде,

mcerebas 29 Апр 2014
Автор темы
И так теперь создадим саму страницу с такими параметрами.
На пирер icon.html

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<title>beta diz nekr</title>
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="icon.css"/>
</head>
<body>
<html>
<table class"">
<td class="nav">
<a href="#">
<img src="icon/1">
</a>
</td>
<td class="nav">
<a href="#">
<img src="icon/2">
</a>
</td>
</table>
</html>
как видите все просто, для табле можно задать фоновой стиль иконок. Лубой прописал его в кавычках.

mcerebas 29 Апр 2014
Автор темы
border: 2px solid #8bd6f0;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
рамочка на 2 пиксиля и ее цвет.
Остальные верх, низ, право, лево. Задают параметр в пиксилях симих краев.
text-align : center; текс
margin-top : 1px; повожене верха
margin-bottom : 1px; повожение низа
padding : 0px; ширана и высота рамки
допомнительные параметры таблици

mcerebas 29 Апр 2014
Автор темы
Теперь коды каскада.
.nav {
font-size : 12px;
font-family : tahoma;
color : #cdcdcd;
background-image : url(на пример/icon/3.);
background-repeat : repeat-x;
background-position : 50% top;
border: 2px solid #8bd6f0;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;text-align : center;
margin-top : 1px;
margin-bottom : 1px;
padding : 0px;
}
как видите в каскаде все просто и ясно.
font-size : 12px;
font-family : tahoma;
размер и тип шрифта.
color : #cdcdcd;
background-image : url(на пример/icon/3.);
background-repeat : repeat-x;
background-position : 50% top;
солор цвет текста, бацкгцроунд здесь задается картинка для фона, и сами параметры изображения.

mcerebas 29 Апр 2014
Автор темы
И так начнем для начала надо создать style.css у нас будет icon.css. За тем найти красивую картинку и все это бросить в корень, сами иконки лучше в папку для теста берем две с имена 1 2 эти имена надо написать в имене иконок. И грузим в пипку icon которая тоже создана в корне сайта. Для каскада лучше использывать красивую картинку по параметрам иконки у нас будет 16х16 у меня черны фон.