20 советов и секретов CSS

Даже опытные веб-разработчики долго не могут привыкнуть к тому, что с помощью CSS можно сделать практически что угодно — от разметки колонок до кнопок и всплывающих окон. Технология Cascading Style Sheets позволяет контролировать практически любые элементы дизайна — от размера шрифтов до цветовой гаммы отдельных блоков. Более того, CSS способна сделать гораздо больше.

Пит Фрайтаг в своем блоге, посвященном веб-программированию, опубликовал 20 советов и секретов по CSS, подобрав примеры не совсем стандартного использования этой технологии. Каждый пример включает не только демонстрацию оригинального эффекта, но и подробное описание способа его создания.
Закругленные углы - http://kalsey.com/2003/07/rounded_corners_in_css/.
Закругленные углы без использования изображений - http://pro.html.it/esempio/nifty/.
Создание "звездных" рейтингов - http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/.
Формы без использования таблиц - http://www.quirksmode.org/css/forms.html.
Стилизованные списки - http://css.maxdesign.com.au/listamatic/.
Техника разметки двух колонок - http://glish.com/css/9.asp.
Разметка трех колонок - http://glish.com/css/7.asp.
Три колонки по центру фиксированной ширины - http://glish.com/css/3.asp.
Печать средствами CSS - http://www.alistapart.com/articles/goingtoprint.
Добавление стиля CSS в RSS-поток - http://www.petefreitag.com/item/208.cfm.
"Прилипчивый подвал" (footer) - http://www.themaninblue.com/experiment/footerStickAlt/. Эта техника позволяет сделать такой "подвал", который будет располагаться либо внизу страницы, либо внизу контента, в зависимости от того, что визуально находится ниже.
Эффект "hover" - http://www.phoenity.com/newtedge/element_hover/. При наведении курсора элемент меняет свой внешний вид. Работает для текста, для ссылок, для графики и для любых других элементов.
Несколько альтернатив для тега горизонтальной разметки (hr) - http://www.sovavsiti.cz/css/hr.html.
Перемещение подвижных блоков (floats) - http://www.positioniseverything.net/easyclearing.html. Приводится несколько методов, а также способы решения проблем в разных браузерах.
Всплывающие окна средствами CSS - http://www.meyerweb.com/eric/css/edge/popups/demo2.html.
"Расталкивающие" блоки - http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html. Внедрение элементов с автоматическим изменением границ окружающих блоков.
Создание кнопок - http://usewisdom.com/home/webmaster/css_button.html.
Оранжевые кнопки RSS и XML средствами CSS - http://surf11.com/entry/85/css-xml-rss-button.
Десять дополнительных советов и секретов CSS - http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/.
Еще десять советов по CSS - http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml.

6.10.2005

http://webplanet.ru/news/internet/2005/10/4/css.html