Способы использования PNG, в том числе для отображения теней

Формы

Табы

Меню

Логотип

При оформлении графического логотипа, слогана и т.п. используется подмена текста изображением:

HTML:

<strong class="logo">

Logo Name

</strong>

CSS:

.logo {

display: block;

width: 100px;

height: 100px;

background: url(logo.gif);

text-indent: -3000px;

overflow: hidden;

}

Если логотип – PNG- изображение (работа с PNG подробнее рассмотрена в «Способы использования PNG для отображения теней») и в то же время ссылка, то надо для IE6 применить хитрость:

HTML:

<a href=”#” class="logo">

Logo Name

</a>

CSS:

a.logo {

display: block;

width: 100px;

height: 100px;

background: url(logo.png);

text-indent: -3000px;

overflow: hidden;

}

* html a.logo{

backgound-position: -100% -100%;

background-repeat: none;

filter: progid:dximagetransform.microsoft.
alphaimageloader(src='images/logo.png',
sizingmethod='crop');

}

Таким образом, в местах прозрачности курсор не будет «проваливаться» и переставать видеть ссылку. Это полезно, если логотип выглядит, как текст.

Меню оформляется с использованием ul / li:

HTML:

<ul>

<li>

<a href=”#”>List1</a>

</li>

<li>

<a href=”#”>List2</a>

</li>

<li>

<a href=”#”>List3</a>

</li>

</ul>

Подобным образом оформляются и вложенные меню:

HTML:

<ul>

<li><a href="#">List1</a>

<ul>

<li>

<a href="#">List1.1</a>

</li>

<li>

<a href="#">List1.2</a>

</li>

<li>

<a href="#">List1.3</a>

</li>

</ul>

</li>

<li><a href="#">List2</a>

<ul>

<li>

<a href="#">List2.1</a>

</li>

<li>

<a href="#">List2.2</a>

</li>

<li>

<a href="#">List2.3</a>

</li>

</ul>

</li>

<li><a href="#">List3</a>

<ul>

<li>

<a href="#">List3.1</a>

</li>

<li>

<a href="#">List3.2</a>

</li>

<li>

<a href="#">List3.3</a>

</li>

</ul>

</li>

</ul>

Для реализации выпадающего меню добавляем id для корневого ul, это нужно для IE. Для остальных браузеров хватит CSS:

HTML:

<ul id="nav">

<li><a href="#">List1</a>

<ul>

<li><a href="#">List1.1</a></li>

<li><a href="#">List1.2</a></li>

<li><a href="#">List1.3</a></li>

</ul>

</li>

<li><a href="#">List2</a>

<ul>

<li><a href="#">List2.1</a></li>

<li><a href="#">List2.2</a></li>

<li><a href="#">List2.3</a></li>

</ul>

</li>

<li><a href="#">List3</a>

<ul>

<li><a href="#">List3.1</a></li>

<li><a href="#">List3.2</a></li>

<li><a href="#">List3.3</a></li>

</ul>

</li>

</ul>

CSS:

#nav li {

border: 1px solid #000;

width:150px;

background:#fff;

list-style:none;

}

#nav li.hover,

#nav li:hover {

position: relative;

}

#nav li.hover ul,

#nav li:hover ul {

display: block;

}

#nav ul {

display: none;

position: absolute;

left: 50%;

top: 50%; /* left и top смещение относительно родительского элемента */

}

JS:

initNav = function() {

var lis = document.getElementById("main-navigation").getElementsByTagName("li");

for (var i=0; i<lis.length; i++)

{

lis[i].onmouseover = function()

{

this.className += " hover";

}

lis[i].onmouseout = function()

{

this.className = this.className.replace(" hover", "");

}

}

}

if (document.all &&!window.opera && (typeof document.body.style.maxHeight == 'undefined'))

attachEvent("onload", initNav);

HTML:

<div class="tabset">

<a href="#tab1" class="tab active">Tab1</a>

<a href="#tab2" class="tab">Tab2</a>

<a href="#tab3" class="tab">Tab3</a>

</div>

<div class="tab" id="tab1">Tab1 text</div>

<div class="tab" id="tab2">Tab2 text</div>

<div class="tab" id="tab3">Tab3 text</div>

CSS:

.tabset {float:left;}

a.tab {

border: 1px solid #000;

float: left;

margin: 0 0 -1px;

position: relative;

}

a.active{border-bottom-color: #fff;}

div.tab {

border:1px solid #000;

clear: both;

}

JS:

function initTabs()

{

var sets = document.getElementsByTagName("div");

for (var i = 0; i < sets.length; i++)

{

if (sets[i].className.indexOf("tabset")!= -1)

{

var tabs = [];

var links = sets[i].getElementsByTagName("a");

for (var j = 0; j < links.length; j++)

{

if (links[j].className.indexOf("tab")!= -1)

{

tabs.push(links[j]);

links[j].tabs = tabs;

var c = docu.getElementById(links[j].href.substr(links[j].href.indexOf("#") + 1));

if (c)

if (links[j].className.indexOf("active")!= -

c.style.display = "block";

else

c.style.display = "none";

links[j].onclick = function ()

{

var c = docu.getElementById(this.href.substr(this.href.indexOf("#") + 1));

if (c)

{

//reset all tabs

for (var i = 0; i < this.tabs.length;

{

document.getElementById(this.tabs[i].href.substr(this.tabs[i].href.indexOf("#") + 1)).style.display = e";

this.tabs[i].className =.tabs[i].className.replace("active", "");

}

this.className += " active";

c.style.display = "block";

return false;

}

}

}

}

}

}

}

if (window.addEventListener)

window.addEventListener("load", initTabs, false);

else if (window.attachEvent)

window.attachEvent("onload", initTabs);

Основняые тэги, используемые при верстке форм указаны в 6.1

При оформлении форм необходимо учитывать, что при прикручивании к движку на сервере тэг form может быть удален из тела документа (в ASP.NET тэг form должен быть один на весь документ). Т.е. делаем так:

HTML:

<form action="#">

<div class="form">

...

</div>

</form>

И теперь все оформление привязываем к div.form.

Привыкнув так оформлять формы, мы убиваем двух зайцев: избавляемся от возможных проблем с клиентским ASP и пишем валидный код под XHTML 1.0 Strict, где элементы форм относительно тэга <form> должны быть завернуты в блочный элемент.

При оформлении форм необходимо использовать определение полей label с привязкой к соответствующему полю ввода:

HTML:

<label for="first-name">First Name</label>

<input type="text" id="firstName"/>

<label for="country">Country</label>

<select id="country">

<option>Afghanistan</option>

<option>Albania</option>

...

</select>

Важно! Для обеспечения правильного отображения информации при отключенном CSS (а это одно из требований accessibility) необходимо располагать тэг label непосредственно перед соответствующим ему элементом формы.

Важно! Параметр name в элементах формы вводить не надо, это сделают программисты в соответствии со своими потребностями.

При идущих подряд полях ввода с одним описанием привязку делаем на первое поле:

HTML:

<label for="date">Date</label>

<select id="date">

<option>Year</option>

<option>1972</option>

<option>1973</option>

...

</select>

<select>

<option>Month</option>

<option>1</option>

<option>2</option>

...

</select>

<select>

<option>Month</option>

<option>January</option>

<option>February</option>

...

</select>

Поле ввода типа textarea должно содержать параметры col и row:

HTML:

<textarea cols="20" rows="5"></textarea>

Замечание в принципе col и row можно оставить пустым, но хорошим тоном считается оформить textarea так, что бы и без CSS вид был приличный.

При визуальном оформлении элементов форм можно пользоваться как чистым CSS, так и внешними скриптами, берущими на себя эту задачу (частично, как будет видно далее).

При оформлении средствами CSS надо учитывать, что:

• в IE у select нельзя штатными средствами поменять оформление border ’а;
• в Safari padding в полях ввода воспринимается как отступ внутри указанной ширины (подобное поведение для padding наблюдается в IE при DOCTYPE HTML 4.01 Transitional);
• центровка текста в полях типа text производится манипуляциями с верхним и нижним padding (FF и Opera) и line-height (IE)методом подбора значений (как правило, если получившееся значение height поставить в line-height, то в IE все становится на свои места);
• для IE7 надо персонально указывать высоту поля select.

Рассмотрим NiceForms (http://www.badboy.ro/articles/2007-01-30/niceforms/) на данный момент версии 1.0

Стандартный вид (в IE)

Вид с включенным NiceForms (в IE)

Скрипт занимается подстановкой изображений (края, уголки, чекбоксы, флаги и т.п.) к уже оформленным через CSS элементам форм.

Область действия определяется назначением класса niceform на тэг form, т.е. при порезке под ASP определить, какие блоки оформлять, а какие нет – нельзя: оформлены будут или все формы, или ни одна (хотя, конечно, можно отредактировать родной JS и поменять критерии поиска блока, в котором скрипт будет работать). Имена изображений можно менять в «родном» JS.

Ограничения для всех подобных решений – невозможно сделать оформление для полей типа text, textarea, button, file в Safari.

Есть способ оформить поле ввода типа file, но сделать его одинаково корректно работающим во всех браузерах невозможно, поэтому он рассматриваться не будет, и лучше этого не делать вообще.

При использовании PNG в качестве фонового рисунка надо учитывать, что IE версий ниже 7 (далее под IE понимается IE≤6) не понимает прозрачность в PNG. Для реализации в IE надо использовать фильтр:

CSS:

div{

background:url(image.png);

}

* html div{

background:none;

filter:progid:dximagetransform.microsoft.alphaimageloader(src='image.png', sizingmethod='crop');

}

Важно! Параметр src указывается относительно страницы, а не CSS, т.е. если css-файл лежит в папке CSS, a image.png в IMAGES, то код будет выглядеть так:

CSS:

div{

background:url(../images/image.png);

}

* html div{

background:none;

filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/image.png', sizingmethod='crop');

}

В то же время, если поместить в контейнер, например, ссылку, то в IE ссылка не будет рабочей, т.к. фильтр перекроет собой ссылку. У этой проблемы есть два варианта решения: либо вырезаем в PNG на месте ссылки дыру и тогда фильтр пропустит фокус на ссылку, либо назначаем ссылке свойство position:relative и ссылка, образно выражаясь, поднимется выше фильтра и станет активна. Второй вариант, как правило, наиболее приемлем им и будем пользоваться.

При использовании PNG в качестве тянущегося фона (тени):

в строке filter:progid… необходимо указывать параметр sizingmethod='scale', в этом случае изображение будет растянуто по размеру всего блока. И снова все дочерние блоки окажутся перекрыты фильтром и ссылки не будут активными. Указываем первому дочернему блоку position:relative и проблема решается.

HTML:

<div class="shadow">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis risus. Nam et <a href="#">ipsum ut justo</a> condimentum… </p>

<p>Nullam sit amet libero. Pellentesque… </p>

</div>

CSS:

.shadow{

width:410px;

background:url(shadow.png) repeat-y;

padding:5px 0 100px;

margin:0 auto;

}

* html.shadow{

background:none;

filter:progid:dximagetransform.microsoft.alphaimageloader(src='shadow.png', sizingmethod='scale');

}

.shadow p{

position:relative;

margin:0 20px 16px;

font:11px/16px solid tahoma,sans-serif;

}

Следующий момент надо запомнить, как догму и при использовании фильтра в IE всегда учитывать: так как фильтр в IE не является полноправным заменителем свойства background, то и ни один из параметров этого свойства на него не распространяется:

-repeat – номинально заменяется методом sizingmethod, но:

при значении scale изображение растягивается, а не повторяется,

при значении crop изображение обрезается, по размеру блока;

-position – не работает совсем, невозможно позиционировать изображение относительно блока;

-color – тоже никак не реализуется средствами непосредственно фильтра. Но если
вместо background:none указать background:red, то под изображением
затеплится красный фон.

Важно не забывать всегда обрабатывать готовые PNG-файлы программой pngout.exe (см. 3.4)

Дата добавления: 2014-12-16