cssor.ru - Сайт о CSS и верстке сайтов, в помощь веб разаботчикам.

Закругленные углы у пунктов меню на CSS

Дата: 19.10.2008
Закругленные углы у пунктов меню на CSS

Опять коснемся темы меню, название статьи говорит само за себя о чем пойдет сегодня речь. Есть масса способов реализовать пункты меню с закругленными углами. Но в этой статье пойдет речь о том как это сделать без использования скриптов, но с использованием картинок (от них никуда не деться). Думаю следует в самом начале рассказать принцип, чтобы в дальнейшем было понятно что мы будем реализовывать. В данном примере будет рассмотрено горизонтальное меню при наведении на один из пунктов, которого будет появляться фон с закругленными краями. Вот пример. С первого взгляда кажется ничего сложно, просто подкладываем под пункт меню нужную картинку с помощью свойства background и все. В принципе да, но большинство верстальщиков впадают в ступор, когда количество символов в пунктах меню значительно отличаются. И как сделать так чтобы левый и правый отступы от краев подкладываемой картинки были одинаковы при различной длине. Сперва приходит мысль о том чтобы подкладывать под каждый пункт меню отдельную картинку, но это дополнительные картинки, дополнительный код и что очень печально совсем не динамическое решение. Решение есть и довольно простое. И что самое приятное, нам потребуется всего одна картинка. И так… Картинка должна иметь следующий вид:

Полезно-интересное применение overflow

Дата: 27.09.2008

Сегодня речь пойдет о интересном эффекте который можно сделать с помощью свойства overflow. Эффект галереи, увеличения, активности называйте его как хотите, применений у него можно найти много. Для начала давайте обратимся к самому свойству overflow и разберемся что оно делает.

Overflow - управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.


Выпадающее меню на css

Дата: 24.09.2008

В этой статье я расскажу вам как сделать выпадающее меню на CSS . Преимущества такого меню думаю очевидно. Самое главное из них – это то, что такое меню будет работать при выключенном Java Script в браузере. Будут рассмотрены 2 идентичных примера меню, первое – горизонтальное меню, второе – вертикальное меню. Принцип действия у них один и тот же.

Начнем с горизонтального меню, оно имеет следующий HTML код: