Корисні CSS прийоми

Blog Image

CSS, без сумніву, одна з найважливіших мов розмітки, які ми використовуємо. І хоча HTML описує структуру документа, її поведінка може бути непередбачуваною, в залежності від версії браузера. CSS – це той інструмент, який дозволить нам виправити всі невідповідності у відображенні сторінки, а також оформити її зовнішній вигляд.

Стилізація посилань в залежності від формату файлу

Цей приклад спрямований на поліпшення користувальницького інтерфейсу. Найчастіше в інтернеті, ми переходимо по посиланнях, абсолютно не знаючи куди вони ведуть. Наступний фрагмент коду використовується для відображення невеликих іконок поруч з посиланнями. Такі картинки будуть підказувати користувачу, що це зовнішнє посилання, електронна адреса, pdf-файл, картинка і т.д.

/* зовнішнє посилання */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
 
/* електронна пошта */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
 
/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

CSS-прозорість

Прозорість – це властивість, яке різним браузерам, призначається по-різному. За допомогою наступного фрагмента коду, ви зможете призначити прозорість всім браузерам відразу.

.transparent {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Фіксований підвал

#footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
 
/* IE 6 */
* html #footer {
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Повернутися