В този пример ще демонстрирам как с помощта на CSS и прозрачни PNG изображения, да се постигне ефект на избледняване в долната и горната част на уеб страницата или на даден блоков елемент от нея. За постигането на желания ефект се използват DIV елементи с фиксирана позиция (position: fixed;) спрямо рамката на браузъра или на елемента, в които са вложени . На фиксираните DIV-вове, като фон(background) се задават PNG файлове с градиент – в случая от бяло(#FFF) към празрачно(transparent).

Основен минус е факта, че ако има хипервръзки в текста и те са в зоната на елемента с фиксирана позиция, тогава линковете не са активни.

Оригиналният пример е взет от CSS-Tricks. При него проблем беше, че не работи под IE6. Причината е в неправилното изобразяване на position:fixed от страна на браузъра, а също и това, че не поддържа 24 каналната прозрачност на PNG формата. Решението на проблема е използването на допълнителни стилове само за IE6, които да са в отделен CSS файл или в самия HTML документ, като за прилагането им се използва проверка за версията и типа на браузъра.

За отстраняване на проблема с position: fixed; се използва position:absolute и на обграждащия елемент се задават стойности height:100%; и overflow: auto;.

За прозрачността на PNG изображението се прибягва до употребата на филтърът AlphaImageLoader, който е един от най-използваните за фиксиране на този бъг.

Настоящият пример е тестван и работи в следните версии на най-популярните уеб браузъри:

• Mozilla Firefox 2.0.0.12
• Internet Explorer 7
• Opera 9.23
• Safari 3.0.4 (Windows)
• Netscape Navigator 9.0
• Internet Explorer 6

Mоже да видите работещ пример тук, a също и примерния код в текстови файлове съответно за HTML документа и CSS документа.

Постове от същата категория:

• Колекции от икони за социални мрежи
• Уеб дизайн тенденциите за 2009 – част 5
• Уеб дизайн тенденциите за 2009 – част 4
• Уеб дизайн тенденциите за 2009 – част 3
• Уеб дизайн тенденциите за 2009 - част 1

bg.wikipedia.org/wiki/AJAX – BG
какво е Ajax и основните му приложения

developer.mozilla.org/en/docs/AJAX – EN
Ajax документацията на разработчиците от Mozilla Developer Center

www.ajaxdaddy.com – EN
колекция от примери за използването на Ajax в уеб програмирането

ajax.phpmagazine.net/php_and_ajax – EN
Ajax и PHP

www.phpclasses.org/browse/class/130.html – EN
Ajax класове в PHP програмирането

www.ajaxwith.com/PHP – EN
Ajax ресурси за PHP

www.asp.net/ajax – EN
официалната страница на Microsoft за Ajax в ASP.NET програмирането

dhtmlsite.com/ajax.php – EN
уроци и Ajax скриптове

www.w3schools.com/ajax – EN
информация за Ajax и примери за използването му в комбинация с XML

www.ajaxian.com – EN
всичко за Ajax на едно място

www.miniajax.com – EN
свободни за сваляне и използване Ajax скриптове (download free Ajax scripts)

www.dhtmlgoodies.com/index.html?page=ajax – EN
още един списък с безплатни Ajax скриптове

www.ajaxim.com – EN
чат клиент на базата на Ajax с много приятен интерфейс

www.ajax.org – EN
дeмонстрация на възможностите на Ajax

www.javascriptmall.com/learn/contents.htm – EN
основите на javascript в примери за начинаещи

www.comptechdoc.org/javamanual/ – EN
ръководство за писане на Javascript/ECMAScript

www.javascriptkit.com – EN
всичко за Javascript – уроци, примери, готови скриптове

www.devguru.com/technologies/JavaScript – EN
подробен Javascript справочник с пълно описание на възможностите на скриптовия език

www.dynamicdrive.com – EN
най-посещаваната галерия с Javascript-ове за сваляне(download), подредени по категории

javascript.about.com – EN
Javascript в примери; ежедневно добавяне на нови ресурси

www.w3schools.com/js – EN
кратки и разбираемо описани уроци и примери за използването на Javascript

Последните три линка са към препоръките на W3C за използването на javascript в HTML/XHTML документи:

Scripts in HTML documents , Client-side Scripting and HTML , JavaScript-Based Style Sheets(CSS).