Округлые уголки, CSS

Octane, 09.04.2009

В этой статье мы рассмотрим пример создания панелей веб-сайта с округлыми углами на заранее известном сплошном цвете фона, при этом панели будут как угодно изменять свои размеры.

I. Начнем работу с Adobe Photoshop:

  1. Создадим новое изображение (Ctrl+N) небольшого размера, например: 300х200 пикселей, на белом фоне;
  2. Воспользуемся инструментом Rounded Rectangle Tool (U). Поставим радиус округления углов Radius равным 10 пикселей, и управление размерностью добавляемого объекта Round Rectangle Options — Unconstrained

    Выберем какой-нибудь цвет для панели, например:  #74c44c 
    Используем данный инструмент на нашем холсте, затем нажмем правой кнопкой мыши в панели Слои (Layers) по названию появившегося слоя Shape 1 и выберем пункт Resterize Layer. В итоге должно получиться что-то похожее на изображение ниже:
  3. Увеличим масштаб изображения до максимального (Ctrl++) и используя инструмент Crop Tool (C) выделим левый верхний угол нашей фигуры (Rounded Rectangle) как показано на рисунке

    Т.е. захватим только область где идет скругление углов, все что залито сплошным не попадет в зону выреза. Далее нажмем правой кнопкой мыши внутри выделенного прямоугольника и выберем пункт Crop, получим:
  4. Сохраним полученное изображение в файл, для этого нажмем Ctrl+Shift+Alt+S или выберем пункт Save for Web (Сохранить для Веб) в меню File (Файл). В появившемся окне проделаем следующие настройки:
    1. GIF — формат в который будем сохранять изображение;
    2. Adaptive — режим коррекции цветом, в нашем случае является наилучшим;
    3. Параметры уменьшающие качество и четкость изображения (Dieter, Lossy, Web Snap) выключаем и ставим на минимум;
    4. Убираем галочку напротив Transparency (Прозрачность);
    5. Выберем количество цветов Colors так чтобы не было потери качества;
    6. Параметр Matte устанавливаем в значение none
    7. Далее нажимаем кнопку Save (Сохранить) и сохраняем изображение, например под именем: panel_top_left.gif
  5. Проделаем пункты 3-4 с тремя оставшимися углами, в итоге получим набор изображений:
    1. panel_top_left panel_top_left.gif — левый верхний угол;
    2. panel_top_right panel_top_right.gif — правый верхний угол;
    3. panel_bottom_left panel_bottom_left.gif — левый нижний угол;
    4. panel_bottom_right panel_bottom_right.gif — правый нижний угол.

На этом работа с Adobe Photoshop закончена.

II. Далее действия могут производится в любом текстовом редакторе, например Notepad (Блокнот). Рекомендуем воспользоваться специализированным решением, например Adobe Dreamweaver, ActiveState Komodo Edit, PSPad и др.

  1. Создадим html — документ (далее планируется что, читатель данной статьи обладает начальными знаниями HTML и CSS);
  2. Добавим 4 вложенных друг в друга тега <div>
    <div><div><div><div>Hello World !</div></div></div></div>
  3. Опишем для первого тега <div> класс и назовем его panel:
    .panel { background: #74c44c url(panel_top_left.gif) top left no-repeat; }

    Цвет фона следует задать только у первого (родителького) тега <div>;

  4. Далее относительно родительского тега <div> опишем стили для всех вложенных тегов <div>:
    .panel div {
    	background: url(panel_top_right.gif) top right no-repeat;
    }
    .panel div div {
    	background: url(panel_bottom_left.gif) bottom left no-repeat;
    }
    .panel div div div {
    	background: url(panel_bottom_right.gif) bottom right no-repeat;
    }

    Т.е. для каждого тега <div> задаем в виде неповторяющегося фона ранее созданные изображения. Для первого тега <div> фоном будет изображение panel_top_left.gif, которое с помощью комбинации параметров top left свойства background разместим в верхнем левом углу. Изображение panel_top_right.gif, являющееся фоном первого вложенного тега <div> в тег <div> с классом panel с помощью комбинации параметров top right свойства background разместим в верхнем правом углу и т.д.

  5. Опишем отступ текста от краев панели и применим некоторое оформление к тексту, который будет содержаться внутри панели:
    .panel div div div {
    	background: url(panel_bottom_right.gif) bottom right no-repeat;
    	padding: 15px;
    	color: #fff;
    	text-align: center;
    }
  6. Соберем теперь все это в один документ:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Округлые уголки (CSS: Урок № 1)</title>
    <style type="text/css">
    .panel {
    	background: #74c44c url(panel_top_left.gif) top left no-repeat;
    	width: 200px;
    }
    .panel div {
    	background: url(panel_top_right.gif) top right no-repeat;
    }
    .panel div div {
    	background: url(panel_bottom_left.gif) bottom left no-repeat;
    }
    .panel div div div {
    	background: url(panel_bottom_right.gif) bottom right no-repeat;
    	padding: 15px;
    	color: #fff;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    	<div class="panel">
    		<div>
    			<div>
    				<div>Hello World !</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

    и получим результат:

    Hello World !
    Наша панель может изменять свои размеры, как в высоту, так и в ширину, при этом качество округления уголков не теряется
    Создавайте сайты так,
    чтобы они радовали глаз!

Заключение: данный способ позволяет создать эффект округления уголков контейнеров, находящихся на заранее известном сплошном цвете фона (в нашем случае белый), как создать такой эффект в случае градиентного или текстурированного фона, рассмотрим в следующей статье.
Так же стоит отметить, что при наличии большого количества разноцветных панелей, сделанных таким способом, получается большое количество запросов на сервер, например, у нас есть 5 цветов панелей, по 4 файла на каждую, уже получается 20 изображений, в этом случае такой способ не рекомендуется использовать. О том как уменьшить количество запросов изображений на сервер, а так же почему лучше использовать фоновые изображения рассмотрим отдельно в ближайших статьях.

P.S.: Когда Все браузеры будут поддерживать CSS3, такой пример можно будет осуществить по средством одного тега <div> и одного CSS-класса к нему, т.к. будет существовать возможность задать сразу несколько фоновых рисунков для одного элемента.

Статья перенесена из нашего корпоративного блога ввиду полной переделки сайта. Подробнее можно узнать тут.

Компания Web++ — создание сайтов Волгоград.

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: CSS | Комментировать

Комментарии (15)

  1. CTAPbIu_MABP / 09.04.2009 в 17:35

    Ребята ну нормальные же статьи постили а тут детский сад развели….

  2. Octane / 09.04.2009 в 17:57

    CTAPbIu_MABP, эта статья была написана больше года назад для другого блога, сейчас перенесена с кодом 301 сюда, чтобы оставить рабочими внешние ссылки. Это отмечено в конце статьи.

  3. CTAPbIu_MABP / 09.04.2009 в 18:01

    Честно говоря я не (до)читал. А то что она перенесена я заметил чуть позже потому что в ридере идут сначала самый новые :) но было уже поздно

  4. Alex / 09.04.2009 в 19:09

    Тут показано как сделать то же самое только без картинок —
    http://blog.yosle.com/2007/09/20/css-round-corners

  5. CTAPbIu_MABP / 09.04.2009 в 19:12

    да этот способ использует гугл.

  6. Octane / 09.04.2009 в 19:23

    Alex, я бы не советовал так делать, это ужасный способ.

    Если итересует именно реализация округлых уголков без изображений, советую почитать следующую статью: «Закругленные углы без использования картинок».

    Описанный же мной способ, повторюсь, более года назад для другого блога, можно назвать «железным». Он будет работать во всех браузерх, при любом масштабе и размере шрифта. К тому же не нарушает семантику. Если заранее известна ширина или высота блока, количсетво изображений можно сократить.

  7. CTAPbIu_MABP / 09.04.2009 в 19:26

    если ты так отстаиваешь этот способ почему не сделать css-sprite?
    и ссылка у тебя неправильная

  8. Octane / 09.04.2009 в 19:30

    Можно и спрайты, а можно и вообще картинки в DataURI запихать прямо в CSS.

  9. jobgomel / 04.05.2009 в 18:56

    В css есть команда -moz-border-radius: 10px 10px 10px 10px;
    Но она поддерживается только в FireFox’е, в Опере и ИЕ неработает

  10. Mobik / 17.11.2009 в 00:06

    Еще короче -moz-border-radius: 10px;

  11. UFF / 19.03.2010 в 11:35

    при использовании «-moz-border-radius» код не пройдёт валидатор!!!

  12. Good / 21.04.2010 в 22:38

    У меня картинки не грузятся (отключены — интернет медленный) и всё прямоугольное.
    А -moz-border-radius работает !

  13. Антон / 08.04.2011 в 18:43

    $(function(){
    $(«krygliekraya»).corner(«15px»);
    });

    hello world!!!
    быстрее проще без фотожопа

  14. Avenger911 / 04.09.2011 в 07:22

    >> PS Когда Все браузеры будут поддерживать CSS3 … будет существовать возможность задать сразу несколько фоновых рисунков для одного элемента.

    Будет существовать свойство border-radius, позволяющее оформить уголки без рисунков вообще. Его даже IE в девятой версии осилил.

  15. Greece / 27.03.2012 в 22:31

    >> быстрее проще без фотожопа

    Да, но если JavaScript отключен, то будет весьма печально. Проще по методике автора сделать обычных картинок и показывать их в фоне

Оставить комментарий

480×60
480×60