ZorNet.Ru — сайт для вебмастера » HTML и CSS » Закругление углов в CSS без изображений

Закругление углов в CSS без изображений

В статье разберем одну из актуальных тем, это как можно закруглить углы на элементе, где нет изображение с помощью HTML и CSS. Многие веб дизайнеры используют округленные угловые таблицы и divs для отображения информации на странице. Он не только выглядит гладким, но и привлекательным для глаз. Думаю многие согласятся, что некоторые элементы с закругленными углами намного оригинальнее и красивее смотрится визуально, но как все сделать вы не знаете. Хотя здесь все делается не сложно с помощью стилистике, где вы сами после самостоятельно можете закруглять элементы, которые вам показались, что с углами они не подходят под дизайн сайта.

Так как реально есть администраторы интернет ресурса, которые изначально убирают все углы, сразу под 3 или 5 пикселей выставляют, что стилистика полностью у сайта меняется. Проблема с кодированием таких DIV заключается в том, что нет стандартного способа округления углов, доступных в стилистике. Дизайнеры преодолевают эту проблему, используя угловые изображения для отображения вокруг DIV, чтобы он выглядел округленным. Но этот подход не всегда рекомендуется, так как он делает код утомительным. Хотя можно все считать утомительными, это смотря для кого, здесь все просто и понятно.

Добавьте следующие атрибуты в свой элемент, чтобы сделать его круг круглым.

Приступаем к установке:

Вашему вниманию 3 вариаций:

HTML

Код

<div id="first-rounding">
  DIV со всеми углами округлен
</div>

<div id="second-circle">
  DIV с верхним левым углом округлен
</div>

<div id="zakrugon-sarunlab">
  DIV с закругленным нижним правым углом
</div>

CSS

Код

div {
  width: 325px;
  height: 23px;
  background-color: #474386;
  border: 2px solid #f9fafd;
  padding: 9px;
  color: #f3eded;
  text-shadow: 0 1px 0 #353333;
  box-shadow: 3px 3px 17px 1px rgba(31, 29, 29, 0.62), 0px 10px 30px -15px rgba(31, 29, 29, 0.05);
}
#first-rounding {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}
#second-circle {
  -moz-border-radius-topleft: 8px;
  -webkit-border-top-left-radius: 8px;
}
#zakrugon-sarunlab {
  -moz-border-radius-bottomright: 9px;
  -webkit-border-bottom-right-radius: 9px;
}

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

Существует множество фрагментов кода для создания закругленных угловых DIV с использованием изображений. Но вот простая методика округления углов DIV с использованием некоторых атрибутов. Этот метод будет работать в Firefox, Safari, Chrome и любом другом браузере, совместимом с CSS3. Здесь нужно подметить, что этот метод не будет работать в Internet Explorer.

Демонстрация

Так изначально шло по умолчанию.

Как закруглить углы с помощью стиля CSS3

Что пришлось добавить немного стилистике и преобразить их визуально, чтоб как то смотрелись, где веб мастер под свой дизайн может выставить.

31 Июля 2018 Просмотров: 1324 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0