В този пример ще демонстрирам как с помощта на 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 документа.
Постове от същата категория:
[catlist=10]