.jpg)
Блоки используются практически на каждом сайте для выделения различных участков страницы (меню, заголовков и т. п.). В этой статье я покажу, как сделать блок со скругленными углами, градиентной заливкой и тенью. В первую очередь напомню, как сделать обычный прямоугольный блок. Для этого достаточно использовать две CSS директивы: border и background-color. Первая устанавливает цвет, тип лини и толщину границы блока, а вторая – цвет фона. С помощью директив margin и padding можно изменять расстояния между границами блоков и между текстом внутри блока и его границами. Тут все просто. Но мы хотим, чтобы граница нашего блока имела закругленные углы, сам блок отбрасывал тень, а верхняя и нижняя часть блока были выделены с помощью градиента.
Такой дизайн накладывает некоторые ограничения. Во-первых, для создания границ с тенью, градиента и закругленных углов нам придется использовать рисунки. Во-вторых, размеры градиентов и тени определяются этими рисунками и их нельзя изменять (вообще-то, можно, но возникнут искажения). Чтобы немного упростить задачу, будем считать, что ширина блока всегда остается постоянной, а высота может изменяться. В первую очередь нарисуем макет блока. Вы можете скачать файл с макетом, созданный в Photoshop (72 кБ). Наш макет условно можно разбить на три части. Верхняя часть (в которой находится заголовок) имеет фон в виде градиента. Центральная часть – однотонный фон, но справа находится граница с тенью. Нижняя часть – тоже градиент и тень. Таким образом, нам нужно вырезать из нашего макета и сохранить в виде отдельных рисунков три блока: верхний градиент, нижний градиент и правую границу с тенью. Причем рисунок с границей должен иметь высоту 1 пиксель. В дальнейшем, с помощью директивы background-repeat:repeat-y; мы продублируем его по всей высоте центральной части нашего блока. Ниже показаны рисунки, которые у меня получились. Примечание: вы можете посмотреть, как разрезан макет в программе ImageReady, или зайти в папку images, которая находится в архиве с примером. Если будете разрезать сами, не забудьте сделать невидимым слой с текстом заголовка. Теперь посмотрите на html разметку нашего блока.
