Верстка сайта. Как сделать блок со скругленными углами и тенью.

Владимир | | CSS, HTML.

Блоки используются практически на каждом сайте для выделения различных участков страницы (меню, заголовков и т.п.). В этой статье я покажу, как сделать блок со скругленными углами, градиентной заливкой и тенью.

В первую очередь напомню, как сделать обычный прямоугольный блок. Для этого достаточно использовать две CSS директивы: border и background-color. Первая устанавливает цвет, тип лини и толщину границы блока, а вторая – цвет фона. С помощью директив margin и padding можно изменять расстояния между границами блоков и между текстом внутри блока и его границами.

Тут все просто. Но мы хотим, чтобы граница нашего блока имела закругленные углы, сам блок отбрасывал тень, а верхняя и нижняя часть блока были выделены с помощью градиента. Такой дизайн накладывает некоторые ограничения. Во-первых, для создания границ с тенью, градиента и закругленных углов нам придется использовать рисунки. Во-вторых, размеры градиентов и тени определяются этими рисунками и их нельзя изменять (вообще-то, можно, но возникнут искажения).

Чтобы немного упростить задачу, будем считать, что ширина блока всегда остается постоянной, а высота может изменяться.
В первую очередь нарисуем макет блока.

Макет блока

Вы можете скачать файл с макетом, созданный в Photoshop (72 кБ).

Наш макет условно можно разбить на три части. Верхняя часть (в которой находится заголовок) имеет фон в виде градиента. Центральная часть – однотонный фон, но справа находится граница с тенью. Нижняя часть – тоже градиент и тень.

Таким образом, нам нужно вырезать из нашего макета и сохранить в виде отдельных рисунков три блока: верхний градиент, нижний градиент и правую границу с тенью. Причем рисунок с границей должен иметь высоту 1 пиксель. В дальнейшем, с помощью директивы background-repeat:repeat-y; мы продублируем его по всей высоте центральной части нашего блока. Ниже показаны рисунки, которые у меня получились.

Верхний градиент Правая граница и тень Нижний градиент

Примечание: вы можете посмотреть, как разрезан макет в программе ImageReady, или зайти в папку images, которая находится в архиве с примером. Если будете разрезать сами, не забудьте сделать невидимым слой с текстом заголовка.

Теперь посмотрите на html разметку нашего блока.

<div class="roundRectBlock"> <!--Начало roundRectBlock-->
<div class="topImage"> <!--Начало topImage-->
<p class="title">
Заголовок
</p>
</div> <!--Конец topImage-->
<p>
Текст блока. Может содержать разное количество строк с различным выравниванием. Например, по левому краю.
</p>
<div class="bottomImage"> <!--Начало bottomImage-->
</div> <!--Конец bottomImage-->
</div> <!-- Конец roundRectBlock-->

Т.к. CSS не позволяет присваивать несколько фоновых изображений для одного тега div, то мы используем два таких тега с классами topImage, bottomImage (строки 2 и 10) для верхнего и нижнего градиентов, а основной текст в центральной части будем форматировать как обычно, с помощью тегов <p>.

Для того, чтобы изменять положение всего блока целиком, мы поместим его в контейнер (тег <div class=”roundRectBlock”> строка 1).

С разметкой разобрались. Теперь посмотрим на таблицу стилей.

.roundRectBlock {
	left:100px;
	top:20px;
	width:315px;
	margin-top:20px;
	margin-bottom:20px;
	margin-left:20px;
}

.roundRectBlock .topImage {
	margin:0;
	padding:0;
	background-image: url(images/header.gif);
	height:41px;
	width:315px;
}

.roundRectBlock p.title { margin:0; padding:10px 10px 0px 30px; font-size:130%; color:#71775E; background-color:transparent; background-image: none; border-left: none; font-family: "Times New Roman", serif; } .roundRectBlock p { margin:0 0 0 0; padding:5px 20px 5px 20px; background-color:#DCCEDB; font-size:90%; color:#005825; background-image: url(images/shadow.gif); background-repeat:repeat-y; background-position:right; border-left:solid 2px #000000; font-family: "Arial", sans-serif; } .roundRectBlock .bottomImage { margin:0; padding:0; background-image: url(images/footer.gif); height:30px; width:315px; }

Здесь приведены только те стили, которые относятся к нашему блоку.
Стили для класса roundRectBlock (строки 1-8) задают положение блока на странице (в данном случае никакой роли не играют, я их устанавливал так, чтобы было удобно сделать скриншот).

Следующими идут стили тега с классом topImage, который обязательно должен быть внутри тега с классом roundRectBlock (строка 10). Здесь мы удаляем отступы (padding:0), устанавливаем высоту и ширину блока (точно по размеру картинки с верхним градиентом), и устанавливаем саму картинку background-image: url(images/header.gif).

После этого мы задаем стили для текста заголовка (строка 18). Здесь ничего сложного. Устанавливаем параметры шрифта, отступы от края блока и указываем, что фон должен быть прозрачным (чтобы увидеть картинку с градиентом).

Дальше мы задаем стили параграфа в средней части блока (строка 29). Здесь есть несколько интересных моментов. Во-первых, мы задаем левую границу (строка 38) так, чтобы она совпадала с границами верхней и нижней части блока. Во-вторых, в качестве фонового изображения мы указываем картинку с правой границей и тенью (строка 35), смещаем ее вправо (строка 37) и размножаем по вертикали (строка 36).

Последними идут стили для класса bottomImage (строки 42-48). Как вы, наверное, догадались, здесь мы только указываем фоновое изображение (нижний градиент), и задаем размеры блока.

Теперь посмотрим на результат.

Блок со скругленными углами

На скриншоте показано два блока разной высоты (высота определяется объемом текста в центральной части блока). Как видите, все фрагменты нашего блока точно согласуются друг с другом.

Вы можете скачать архив со всеми файлами проекта.

P.S. Тестирование проводилось с помощью Firefox 2, IE 6 и Opera 9.

Постовой

Инструктор по вождению научит вас уверенно чувствовать себя за рулем

  • Спасибо!
    Все понятно и симпатично!

  • Спасибо!
    Все понятно и симпатично!

  • Спасибо за пост. У меня вопрос. А можно ли сделать блок с вертикальным градиентом, т.е. так, чтобы фон блока плавно менялся сверху вниз, приэтом блок был «резиновым». С горизонтальным все просто — разрезаем рисунок на три части по горизонтали, среднюю вставляем в блок с повторением по X. А вот как быть с вертикальным градиентом?

    • Сделать можно либо с помощью JavaScript, либо с помощью CSS3 (на данный момент эта спецификация в разработке и браузерами полностью не поддерживается).

    • Максим

      8 вложенных дивов

      // в качестве фона верхний левый угол
      // верх - повторяющийся шириной в 1 пиксел рисунок
      // верхний правый угол
      // право
      // нижний правый
      // низ
      // нижний левый
      // лево
      текст

      как вариант, ели очень нужно
      или таблица 🙂

      • Максим

        белиберда вышла
        думал, хтмл показывается как есть…

        • Про белиберду не понял. У кого она вышла? у меня или у вас? И что не так?

        • Прошу прощения, я понял. WordPress порезал теги. Но идею я понял 🙂

  • Спасибо за пост. У меня вопрос. А можно ли сделать блок с вертикальным градиентом, т.е. так, чтобы фон блока плавно менялся сверху вниз, приэтом блок был «резиновым». С горизонтальным все просто — разрезаем рисунок на три части по горизонтали, среднюю вставляем в блок с повторением по X. А вот как быть с вертикальным градиентом?

    • Сделать можно либо с помощью JavaScript, либо с помощью CSS3 (на данный момент эта спецификация в разработке и браузерами полностью не поддерживается).

    • Максим

      8 вложенных дивов

      // в качестве фона верхний левый угол
      // верх - повторяющийся шириной в 1 пиксел рисунок
      // верхний правый угол
      // право
      // нижний правый
      // низ
      // нижний левый
      // лево
      текст

      как вариант, ели очень нужно
      или таблица 🙂

      • Максим

        белиберда вышла
        думал, хтмл показывается как есть…

        • Про белиберду не понял. У кого она вышла? у меня или у вас? И что не так?

        • Прошу прощения, я понял. WordPress порезал теги. Но идею я понял 🙂

  • Спасибо реализовал у себя раскрутка сайта

  • Спасибо реализовал у себя раскрутка сайта

  • Хороший урок, правда есть один минус, но не в самой методике, а в рисунке, он имеет формат gif, поэтому немного края не закруглены!

    • Согласен, правда урок был написан довольно давно 😉 Удобное решение — использовать прозрачные png, но тогда придется подключать JS скрипты, которые будут их правильно показывать в IE6.

  • Хороший урок, правда есть один минус, но не в самой методике, а в рисунке, он имеет формат gif, поэтому немного края не закруглены!

    • Согласен, правда урок был написан довольно давно 😉 Удобное решение — использовать прозрачные png, но тогда придется подключать JS скрипты, которые будут их правильно показывать в IE6.

  • Gek

    Здравствуйте. Помогите, пожалуйста, умучался уж. Я в этом деле совсем только начинающий. Поэтому никак не могу найти, КАК повторить картинку фона В ОБЕ СТОРОНЫ!?! Везде говорится, как ее повторить по X или по Y, а как одновременно по двум осям разложить (но не растянуть!), об этом молчат!?!
    Надеюсь на помощь.
    Зараннее благодарен!

    • Повтор фона по обоим направлениям выполняется по-умолчанию. Т.е. вам вообще не нужно указывать свойство
      background-repeat
      Картинка, которая указана в background-image будет дублироваться по вертикали и горизонтали. Количество повторов зависит от её размера.

      • Gek

        🙂 «А ларчик просто открывался!» 🙂
        ОГРОМНОЕ Вам спасибо! 😉

  • Gek

    Здравствуйте. Помогите, пожалуйста, умучался уж. Я в этом деле совсем только начинающий. Поэтому никак не могу найти, КАК повторить картинку фона В ОБЕ СТОРОНЫ!?! Везде говорится, как ее повторить по X или по Y, а как одновременно по двум осям разложить (но не растянуть!), об этом молчат!?!
    Надеюсь на помощь.
    Зараннее благодарен!

    • Повтор фона по обоим направлениям выполняется по-умолчанию. Т.е. вам вообще не нужно указывать свойство
      background-repeat
      Картинка, которая указана в background-image будет дублироваться по вертикали и горизонтали. Количество повторов зависит от её размера.

      • Gek

        🙂 «А ларчик просто открывался!» 🙂
        ОГРОМНОЕ Вам спасибо! 😉

  • Эта технология уже давно применяется в разработках сайтов от нашей студией.

  • Эта технология уже давно применяется в разработках сайтов от нашей студией.

  • .shadow3{
    box-shadow: -6px -6px 10px #561A0B;
    -webkit-box-shadow: -6px -6px 10px #561A0B;
    -moz-box-shadow: -6px -6px 10px #561A0B;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#561A0B, offX=-6, offY=-6, positive=true);
    }

    ____________________________________________________

    • Осталось дождаться поддержки CSS3 во всех браузерах 🙂

  • .shadow3{
    box-shadow: -6px -6px 10px #561A0B;
    -webkit-box-shadow: -6px -6px 10px #561A0B;
    -moz-box-shadow: -6px -6px 10px #561A0B;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#561A0B, offX=-6, offY=-6, positive=true);
    }

    ____________________________________________________

    • Осталось дождаться поддержки CSS3 во всех браузерах 🙂

  • куе

    Осталось ждать еще пару лет . . .

  • Galintinka

    Слушайте,вопрос?а как сделать чтобы тянулось не только вниз,но и по ширине?

    • 1) Вырезать четыре уголка.
      2) Вырезать для шапки и хвостовика полоски шириной 1px и высотой,
      равной высоте уголка.
      3) Использовать их в качестве фонового рисунка и установить
      background-repeat:repeat-x;

  • Юрий

    Спасибо, как раз данным вопросом интересовался

  • Чет, под ие 6 квадраты получаются

    • В каком формате вы сохранили рисунки для уголков?

  • Dirret

    Доброго времени суток!Кемерово беспокоит…
    Как гость хочу поинтересоваться, будет ли участвовать ваш сайт в Пробеге Памяти 2012 в июле месяце?
    Сайт пробега: http://ximar.ucoz.ru/
    Более конкретное предложение с вопросами отправил на общую почту.
    С уважением, vedun.

  • ss

    Многопользовательский юридический сайт http://www.urist-prudent.ru/