Оглавление

Создание блока с закругленными краями

Существует несколько методов создания закругленных краев для блока. Рассмотрим несколько из них:

 

Решение 1: CSS3-свойство border-radius
Существует свойство border-radius, с помощью которого можно задать степень закругленности рамки вокруг блочного элемента. Это свойство будет включено в спецификацию CSS3, когда процесс ее разработки будет завершен. В настоящее время почти все браузеры поддерживает свойство border-radius, (Firefox 4.0+, Chrome4.0+, Safari 5.0+, Opera 10.5+, IE9+).

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

 

-moz-border-radius: 25px;
-webkit-border-radius: 25px;

 

 

Данное решение будет работать  в  версиях Firefox 4.0+, Chrome4.0+, Safari 5.0+, Opera 10.5+, IE9+

Ниже приведен HTML- и CSS-код, а результат его обработки показан на рис. 9.21:

 

corners1.html

<!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" lang="en-US">
  <head>
    <title>Закругление углов</title>
    <meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="corners1.css" />
  </head>
  <body>
    <div class="curvebox">
      <p>Этот блок с закругленными углами радиусом 25 пикселов</p>
    </div>
  </body>
</html>

   
corners1.css

.curvebox {
  width: 250px;
  padding: 1em;
  background-color: #B0C4DE;
  color: #33527B;
  border-radius: 25px;
}

 

Блок с закругленными краями, созданными с помощью CSS

Рис. 9.21. Блок с закругленными краями, созданными с помощью CSS


В этом примере был создан блок с закругленными краями без единого изображения! Эти аккуратные уголки были созданы благодаря использованию следующего свойства:

  border-radius: 25px;

 

Если удалить это свойство из таблицы стилей, получим блок с обычными прямыми углами, как показано на рис. 9.22.

 

Точно так же блок будет отображен браузерами, не поддерживающими данное свойство.

 

Вид блока в броузерах, не поддерживающих свойство border-radius

Рис. 9.22. Вид блока в браузерах, не поддерживающих свойство border-radius

 

DEMO - если ваш браузер поддерживает свойство border-radius, вы увидите блок с закругленными углами.

 

Решение 2: использование изображений (с изменением разметки)

Желаемого результата можно добиться путем изменения HTML-кода документа и добавления нескольких изображений. При этом блок будет отображаться с закругленными краями в большинстве браузеров. Итак, прежде всего создадим изображения закругленных уголков в графической программе. Это проще всего сделать путем разделения круга на четверти, как показано на рис. 9.23. Каждый уголок будет представлен с помощью отдельного небольшого изображения.

 

                       
 

 

Рис. 9.23. Изображения закругленных уголков


Ниже представлена разметка документа, в которую уже включены изображения верхнего и нижнего левого уголков, вложенные в верхний и нижний элементы div:
corners2.html

<!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" lang="en-US">
  <head>
    <title>Закругление углов</title>
    <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="corners2.css" />
  </head>
  <body>
    <div class="rndbox">
      <div class="rndtop"><img src="img/topleft.gif" alt="" width="30"
          height="30" /></div>
      <p>У этого блока уголки закруглены при помощи изображений</p>
      <div class="rndbottom"><img src="img/bottomleft.gif" alt=""
          width="30" height="30" /></div>
    </div>
  </body>
</html>

 
Изображения правого нижнего и верхнего уголка используются в качестве фоновых для соответствующих элементов div класса rndtop и rndbottom путем добавления соответствующих правил в таблицу стилей:

 

corners2.css 

.rndbox {
  background: #C6D9EA;
  width: 280px;
  font: 0.8em Verdana, Arial, Helvetica, sans-serif;
  color: #000033;
}
.rndtop {
  background: url(img/topright.gif) no-repeat right top;
}
.rndbottom {
  background: url(img/bottomright.gif) no-repeat right top;
}
.rndbottom img {
  display:block;
}
.rndbox p {
  margin: 0 0.4em 0 0.4em;
}


Такое сочетание HTML- и CSS-кода создает блок со сглаженными углами, показанный на рис. 9.24.

 

Блок с закругленными краями, созданный путем изменения HTML- разметки и добавления изображений

Рис. 9.24. Блок с закругленными краями, созданный путем изменения HTML-разметки и добавления изображений

 

Решение 3: использование JavaScript
Возможно, использование дополнительного кода и изображений – не самый лучший вариант, особенно если в вашем документе должно быть много блоков с закругленными краями. Для решения этой задачи многие разработчики выбрали для создания закругленных краев блока использование JavaScript. Это вполне выигрышный вариант, поскольку даже если пользователь отключит JavaScript, это никак не повлияет на возможность работы с сайтом – а просто отключит отображение дополнительных декоративных элементов.

 

Создать закругленные края блока с помощью JavaScript можно несколькими способами, однако мы рассмотрим лишь один из них – NiftyCube, – поскольку его можно быстро добавить в код документа, чтобы все заработало. Необходимый сценарий включен пример, однако его последнюю версию в виде zip-файла можно загрузить с сайта NiftyCube. После распаковывания архива вы увидите множество страниц, демонстрирующих результат использования данного метода, но для того чтобы самостоятельно применить его на практике, вам понадобятся только два файла – niftycube.js со сценарием на JavaScript и niftyCorners.css с кодом на CSS. Скопируйте эти файлы в директорию с вашим сайтом. За основу возьмем блок с прямоугольными краями, созданный с помощью следующей разметки:

 
corners3-start.html

<!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" lang="en-US">
  <head>
    <title>Закругление углов</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="corners3.css" />
  </head>
  <body>
    <div class="curvebox">
      <p>Это блок с прямоугольными краями</p>
    </div>
  </body>
</html>


Вы можете задать любой стиль оформления данного блока, придерживаясь всего лишь одного правила: внутренний отступ должен обязательно быть указан в пикселах. При использовании других единиц, например em, блок будет отображен некорректно в Internet Explorer. Результат проделанной работы показан на рис. 9.25.

 

corners3.css

.curvebox {
	width: 250px;
	padding: 20px;
	background-color: #B0C4DE;
	color: #33527B;
}

 

Блок с прямоугольными краями

Рис. 9.25. Блок с прямоугольными краями
Чтобы края блока стали закругленными, укажите ссылку на файл со сценарием на JavaScript внутри элемента head вашего документа, а затем добавьте простую функцию, передающую в сценарий информацию о том, что необходимо закруглить углы элементов класса curvebox:


corners3.html

<!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" lang="en-US">
  <head>
    <title>Закругление углов</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="corners3.css" />
    <script type="text/javascript" src="niftycube.js"></script>
    <script type="text/javascript">
      window.onload=function(){
        Nifty("div.curvebox");
      }
    </script>
  </head>
  <body>
    <div class="curvebox">
      <p>Возможно, использование дополнительного кода и изображений ...</p>   
    </div>
  </body>
</html>


В результате получим блок, изображенный на рис. 9.26.

 

Создание блока с закругленными углами без использования изображений или дополнительного HTML-кода

Рис. 9.26. Создание блока с закругленными углами без использования изображений или дополнительного HTML-кода (DEMO)

 

Обсуждение
Существует множество методов создания блоков с закругленными краями без использования JavaScript, однако все они подразумевают добавление дополнительной разметки или структурирования документа определенным образом.(1) Если ваш документ содержит лишь несколько блоков, края которых вам хотелось бы закруглить – например, основной контейнер или пару крупных блоков, – то использование дополнительных изображений и разметки не так уж критично. Однако если таких блоков много, то портить разметку многочисленными дополнительными элементами div и изображениями крайне нежелательно. Использование JavaScript позволяет сохранить ясность и четкость HTML-кода, но, как и все решения с использованием сценариев, оно будет работать только при условии, что пользователь не отключил их поддержку.

 

На мой взгляд, применение JavaScript в таких случаях – для компенсации недостаточной поддержки CSS-свойств – вполне оправдано. Если вашим сайтом удобно пользоваться и без закругленных углов, то пользователи, отключившие JavaScript, останутся на нем. Перед тем как принять окончательное решение об использовании сценариев в вашем проекте, обязательно протестируйте сайт в браузере с отключенным Java Script, чтобы убедиться в удобстве его использования при таких условиях.

 

DEMO     Скачать пример

Примечания:

  • Один из методов создания сглаженных углов с использованием семантически верной разметки без JavaScript называется Spanky Corners . Он был разработан Алексом Уолкером (Alex Walker) с сайта SitePoint.

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити