Создание окружности
От пользователей сайта поступает много вопросов о том, как используя возможности CSS3, создать геометрические фигуры в виде круга или треугольника. Так как мы только что рассмотрели вопросы скругления углов и в одной из статей упоминали о создании окружностей и овалов, давайте продолжим начатую тему и нарисуем окружность и эллипс.
Создадим новый документ и укажем свойства окружности, которую мы хотим нарисовать. Для этого определим поле окружности с одинаковыми значениями width и height. Чтобы размер поля автоматически подстраивался под увеличивающиеся блоки текста, размер параметров зададим в единицах em а не пикселах. Укажем значение border-radius, вполовину меньшее значения width/height.
.circle {
margin:30px 20px;
width:10em;
height:10em;
border:#000000 solid 2px;
-moz-border-radius:5em;
-webkit-border-radius:5em;
border-radius:5em;
}
Придадим это свойство блоку div. Все, окружность нарисована. Осталось только разукрасить сам круг, придав свойству параметр background.
<div class="circle"></div>
Создание эллипса
Создание овала в виде эллипса мало чем отличается от создания окружности. Эллиптическая дуга, в отличие от дуги окружности, немного спрямлена. Для того чтобы задать скругление угла по эллиптической дуге, укажите два значения, разделив их косой чертой, примерно так: border-radius: 200px/100px. (В Safari 3 и 4 используется нестандартный синтаксис, без косой черты, и два значения разделяются простым пробелом.). Предыдущие значения описывают сглаженную эллиптическую кривую, вытянутую на 200 пикселов по горизонтали, но только на 100 пикселов по вертикали. Для всех углов можно указать разные значения.
.ellipse{
margin:30px 20px;
width:200px;
height:100px;
border:#000000 solid 2px;
-moz-border-radius: 200px/100px;
-webkit-border-radius: 200px/100px;
border-radius:200px/100px;
}
Теперь придадим блоку div созданное нами свойство. Эллипс готов, теперь его можно разукрасить.
<div class="ellipse"></div>
Полный код веб-страницы с рисунками окружности и эллипса
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Создание круга и эллипса</title>
<style type="text/css">
.circle {
margin:30px 20px;
width:10em;
height:10em;
border:#000000 solid 2px;
-moz-border-radius:5em;
-webkit-border-radius:5em;
border-radius:5em;
}
.ellipse{
margin:30px 20px;
width:200px;
height:100px;
border:#000000 solid 2px;
-moz-border-radius: 200px/100px;
-webkit-border-radius: 200px/100px;
border-radius:200px/100px;
}
h2{ margin:10px 10px}
</style>
</head>
<body>
<h2>Окружность радиусом 5em</h2>
<div class="circle"></div>
<h2>Эллипс </h2>
<div class="ellipse"></div>
</body>
</html>
Протестируем страницу. В окне веб-браузера это будет выглядеть так:
Если вы протестируете страницу в браузерах IE8 и ниже, то вместо окружности и овала увидите квадрат и прямоугольник. Чтобы это привести в соответствие, добавим к стилям фигур следующий код, который мы рассмотрели в статье Создание скругленных углов в браузерах IE не поддерживающих стандарты CSS3:
behavior: url(../../pie/pie.htc);
Фигуры на веб-странице примут соответствующий вид, т.е. окружности и эллипса.
Комментарии(0)
Для добавления комментариев надо войти в систему и авторизоватьсяКомментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться