Регистрация Войти
Вход на сайт
» » Блоки с закругленными углами

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

Просмотров: 3368
Комментариев: 0
Версия для печати

Рассмотрим простой способ создания блоков с закругленными углами. Подобные блоки используются web-дизайнерами достаточно широко, например, при создании меню, рекламы, объявлений, оформления колонок и т.д. В нашем примере создадим рекламный блок под названием «Специальное предложение».

Для этого нам понадобится немножко познаний в css и пара изображений.

Итак, в начале создаем два графических изображения с закругленными уголками и размерами 380px на 24px. Нарисовать их достаточно просто и быстро, например, используя программу Photoshop и его инструмент «Прямоугольник со скругленными углами (U)». В качестве настроек инструмента выбираем: радиус скругления углов 20 px, режим нормальный, непрозрачность 100%, сглаживание включено. В качестве цвета (заливка) выбираем синий (#23348e). Перенести нарисованный прямоугольник (фрагменты с закругленными углами) на новый файл с размерами 380х24 px и сделать необходимые операции (перетаскивание, перемещение, отражение по вертикали) не составит труда. В результате проделанной работы получаем две картинки. Верхняя картинка (файл) будет называться top.gif, а нижняя down.gif.

Создадим файл index.html. В нем между тегами body пишем следующее:

 


	<div class="block">
	<h3>Специальное предложение</h3>
	<p>В преддверии открытия зимнего автомобильного сезона Chevrolet представляет 
	  вниманию своих клиентов новое сезонное предложение. С 15 октября по 31 декабря
	  включительно владельцы постгарантийных автомобилей смогут сделать комплексную 
	  зимнюю диагностику своего Chevrolet по специальной цене у официальных дилеров.</p>
	</div>
	

Думаю здесь все просто и понятно.

В классе под названием "block" содержится непосредственно наш рекламный блок и все, что в нем находится. Заголовок блока «Специальное предложение» заключен в тегах h3. Теги ‹p›  ‹/p› определяют текстовый абзац (в нашем случае в них находится текст нашего рекламного блока. Теперь создадим файл под названием style.css следующего содержания:


	body {
	  font-family:Geneva, Arial, Helvetica, sans-serif; /* задаем шрифт на странице */
	  font-size:100%; /* ставим размер шрифта в процентах для страницы*/
	  background-color:fff; /* задаем цвет фона страницы (белый) */
	  }
	.block {
	    font-size:0.875em; /* размер шрифта в рекламном блоке */
	    color:#fff; /* цвет шрифта в блоке */
	    margin:0 auto; /* выравниваем рекламный блок по центру */
	    }
	.block {
	    width:380px; /* указываем ширину рекламного блока */
	    background:#23348e url(down.gif) no-repeat left bottom; /* задаем цвет фона и располагаем нижний фоновый рисунок */
	    }
	.block h3 {
	       background:url(top.gif) no-repeat left top; /* располагаем верхний фоновый рисунок */
	       }
	h3 {
	font-size:1.875em; /* размер шрифта заголовка */
	font-weight:normal; /* нормальное начертание шрифта */
	color:#ffcc33; /* цвет заголовка */
	margin:0; /* обнуляем внешние отступы */
	}
	.block h3 {
	       padding:10px 20px 0 20px; /* устанавливаем отступы от заголовка */
	       }
	.block p {
	      padding:0 20px 20px 20px; /* отступы от текста рекламы */
	     }
	

Не забываем подключить файл стиля style.css Для этого в файле index.html перед тегом </head> вставляем строчку: 

<LINK rel="stylesheet" href="style.css" type="text/css">

Все файлы (index.html, style.css, top.gif, down.gif) находятся в одной папке. Думаю, что по содержимому файла style.css вопросов возникнуть не должно, подсказки в комментариях я написал. Указание размера шрифта в процентах и em дает одинаковый размер шрифта во всех браузерах, позволяя пропорционально масштабировать текст (em - относительная единица измерения, равная значению свойства font-size заданного шрифта).

Плюсы этого решения:

  • Простота выполнения
  • Нет никаких таблиц и javascript
  • Кроссбраузерность: блок во всех браузерах выглядит одинаково
  • Произвольная высота блока
  • Используются всего две картинки
  • Минимум кода на странице index.html
  • Минимум кода для реализации стилей в style.css

Файлы, используемые в данном примере, можно скачать в архиве block.zip [2,44 Kb].


Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Оставить комментарий
Ваше имя: *
Ваш e-mail: *
Текст комментария:
Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите проверочный код (защита от спама):
код: ----