border-radius: блок с закруглёнными углами, эллипс, круг

Здравствуйте уважаемые начинающие веб мастера. Снова Оригинальные эффекты CSS.

Создавать и размещать блоки на странице, мы уже научились. Теперь давайте с помощью CSS придадим этим блокам оригинальную форму.

Закруглить углы изображений, или же сделать эллипс, и даже круг, и поместить в него какую нибудь фразу или картинку.

В этой статье рассмотрим, как претворить Ваше желание в жизнь.

Для примера возьмём любой, из известных нам, блок (p, div, li, h1 и так далее), и зададим ему следующee свойства:

border-radius — закругление углов

Для красоты я добавлю к закруглённым углам тень (box-shadow), но вы можете её не использовать.

В значении border-radius указывается радиус закругления каждого угла, которые ставятся по часовой стрелке, начиная с верхнего левого угла.

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

border-radius: 10px 0 10px 0;
box-shadow: 1px 1px 3px 1px #fff;

Пример.

Создадим блок h1, и зададим ему свойства радиус и тень.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Блок с закруглёнными углами</title>
<style>
#blok{
  background:#cc7722;
  margin:0 0 0 0;
  width: 200px;
  padding: 10px;
  text-align: center;
  border-radius:10px 0 10px 0;
  box-shadow: 5px 5px 3px 1px;
}
</style>
</head>
<body>
    <h1 id="blok">текст текст текст текст</h1>

</body>
</html>

Результат:

91

Только напоминаю, атрибут style, применяется для отладки изображения, после которой тегу нужно задать класс с любым названием, и все стили перенести в файл style.css.

<h1 style="border-radius: 10px 0; box-shadow: 5px 5px 3px 1px; width: 200px; background: #21cccc; text-align: center; margin-left: 100px;">текст текст</h1>

Сделаем то же самое для изображения

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Блок с закруглёнными углами</title>
<style>
#blok{
  background-image:url(images/makak.jpg);
  background-repeat: no-repeat;
  width: 224px;
  height: 150px;
  margin:0 0 0 0;
  border-radius:10px 10px 10px 10px;
  box-shadow: 5px 5px 3px 1px;
}
</style>
</head>
<body>
    <h1 id="blok"></h1>
</body>
</html>

 

 

 

 

Вариант для WordPress, который можно вставить для отладки, прямо в поле редактора, в режиме текст.

<img style="width: 224px; height: 150px; margin-left: 100px; border-radius: 10px 10px 10px 10px; box-shadow: 5px 5px 3px 1px;" title="makak" src="https://starper55plys.ru/wp-content/uploads/2013/10/makak.jpg" width="224" height="150"/>

Картинка вставляется через загрузчик изображений. Ширина и высота блока (width, height), задаются по размеру изображения.

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Блок с закруглёнными углами</title>
<style>
#blok{
  background: #21cccc;
  width: 200px;
  height: 50px;
  margin: 0 0 0 0;
  text-align: center;
  border-radius: 50px/20px;
  box-shadow: 5px 5px 3px 1px;
}
</style>
</head>
<body>
    <h1 id="blok">Текст</h1>
</body>
</html>

92

Вариант для WP:

<h1 stylebackground: #21cccc; width: 200px; height: 50px; margin-left: 100px; text-align: center; border-radius: 50px/20px; box-shadow: 5px 5px 3px 1px;«>Текст</h1>

И, напоследок, сделаем круг. Чтобы получился круг, нужно сначала сделать квадрат, то есть задать блоку одинаковые высоту и ширину, а затем задать значение border-radius, равное половине высоты блока.

И, для полноты ощущений, вставим в круг картинку.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Блок с закруглёнными углами</title>
<style>
#blok{
  background: #21cccc;
  width: 100px;
  height: 100px;
  margin: 0 0 0 0;
  border-radius: 50px;
  box-shadow: 5px 5px 3px 1px;
}
img{
  margin:30px auto;
}
</style>
</head>
<body>
  <h1 id="blok"><img src="images/i10.png"></h1>
</body>
</html>

Вариант для WordPress

<h1 style="background: #21cccc; width: 100px; height: 100px; margin-left: 100px; border-radius: 50px; box-shadow: 5px 5px 3px 1px;"><img style="margin: 30px; auto;" src="https://starper55plys.ru/wp-content/uploads/2013/10/i10.png" width="35" height="35" /></h1>

В следующей статье продолжим тему теней, и узнаем ещё несколько оригинальных эффектов появляющихся в результате их применения.

Неужели не осталось вопросов? Спросить


Перемена

Муж приходит домой и говорит жене:
— У меня серьезная проблема на работе.
Жена ласково:
— Дрогой, не волнуйся и никогда не говори «у меня проблема», говори «у нас проблема…»
— Хорошо. У нас проблема на работе. У нашей секретарши скоро будет ребенок от нас.

Есть люди у которых есть совесть и есть люди которые имеют совесть.

Как сделать блок с полосой прокрутки < < < В раздел > > > Как разбить страницу на отдельные блоки
 

Рекомендую: Готовые HTML шаблоны на русском

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

2 комментария на «border-radius: блок с закруглёнными углами, эллипс, круг»

  1. starik говорит:

    У меня стройка заканчивается, так что теперь будет время на сайт. В ближайшее время будет ещё кое что интересное.

  2. Людмила говорит:

    Спасибо! Я как раз искала такую информацию. Очень хорошо все описано. Буду сглаживать углы.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *