Тема: Как создать иконки ксс (WAP/WEB мастеру/Помощь мастерам)

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

mcerebas (29 Apr 2014 в 15:19)
Теперь коды каскада.
.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 Apr 2014 в 15:21)
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 Apr 2014 в 15:27)
И так теперь создадим саму страницу с такими параметрами.
На пирер 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 Apr 2014 в 15:41)
[img]http://dcms-social.ru/obmen/Lichnye_fajly/6472.jpg[/img]
пример отображения иконок в каскаде,

Мр. Форум (25 May 2014 в 09:49)
[red]Тему переместил Админ форума WEBSTER из раздела Уроки мастеров в раздел Помощь мастерам[/red]

Источник: http://www.dcms-social.ru/forum/20/44/19743/