Css скруглить углы: CSS3 | Скругление углов и фон

Leave a Comment / Css / By /

Скругление углов CSS | Impuls-Web.ru

Категория: Сайтостроение, Опубликовано: 2017-12-25
Автор:

Приветствую вас, дорогие читатели!

Довольно часто, при верстке страниц, в зависимости от дизайна, появляется необходимость в скруглении углов блоков и изображений для придания странице более аккуратного вида. В сегодняшней статье я покажу вам, как это можно сделать с помощью CSS-свойств.

Навигация по статье:

  • Простое скругление углов CSS
  • Варианты скругления углов CSS
  • Необычное скругление углов CSS

Простое скругление углов CSS

Если у вас появилась такая необходимость вы можете воспользоваться стандартным CSS-свойством border-radius. Например:

.radius-block{ border-radius: 25px; }

.radius-block{

border-radius: 25px;

}

В данном случае для блока задается параметр для всех сторон.

Равномерное закругление

Варианты скругления углов CSS

Так же, можно задавать радиус для каждого отдельного угла. Например:

.radius-block2{ border-radius: 5px 15px 25px 35px; }

.radius-block2{

border-radius: 5px 15px 25px 35px;

}

Разное закругление

Как видите, принцип задания параметров скругления такой же, как и у других свойств, работающих для разных сторон блока (margin, padding и т.д.). Параметры задаются по часовой стрелке, начиная с левого верхнего. Таким образом, получается, что мы задали скругление для левого верхнего угла 5px, для правого верхнего – 15px, для нижнего правого — 25px, и для нижнего левого 35px.

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

.radius-block3{ border-radius: 5px 35px; }

.radius-block3{

border-radius: 5px 35px;

}

Симметричное закругление

В данном случае первый параметр работает для верхнего левого и правого нижнего, а второй – для верхнего правого, и нижнего левого.

Необычное скругление углов CSS

Еще у свойства border-radius есть одна интересная особенность. Вы можете задавать радиус скругления не только для какого-то конкретного угла, но и для вертикальной и горизонтальной половины угла.

Для этого нам нужно задать два параметра скругления через слеш. Например:

.radius-block4{ border-radius: 60px/25px; }

.radius-block4{

border-radius: 60px/25px;

}

Необычное закругление

Используя данный вариант можно даже элипс:

.radius-block5{ border-radius: 250px/75px; }

.radius-block5{

border-radius: 250px/75px;

}

Элипс

Благодаря использованию различных комбинаций скругления уголов CSS-стилями вы можете добиться очень интересных форм для блоков с контентом и кнопок для вашего сайта. Главное не перестараться:)

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

А на этом у меня сегодня все. Желаю вам успехов в экспериментах. До встречи в следующих статьях!

С уважением Юлия Гусарь

Скругление углов CSS, JavaScript

Кажется, на эту тему трудно написать что-то новое. Точнее, трудно изобрести новый метод скругления углов. А взглянуть на проблему под другим углом всегда можно. Мы попробуем доказать неизбежность и предопределённость единственно возможного способа скругления углов на HTML страницах.

Чем плохи картинки?

Сторонники скругления «CSS only» традиционно упоминают о «размере кода» и «скорости загрузки». В теории скругление с помощью картинок не уступает CSS-способу ни в том, ни в другом. На практике иногда CSS бывает оптимальнее. Но представьте себе 20 одинаковых кнопок: картинка для них будет загружена одна, а HTML кода понадобится ровно в 20 раз больше, и он наверняка превзойдёт по размеру правильно сделанную картинку.

Вот тут и появляются грабли. Как сделать «правильно сделанную картинку» для скругления угла? Ну, нарисуем идеальную кривую в векторе. Скажем… в Кореле. Потом проэкспортируем в gif. Вот как будут выглядеть правые верхние углы первых 4-х из двадцати наших кругленьких кнопок:

И какой из этих углов «правильный»? Какую кнопку будем брать за основу? Художник может, конечно, позволить себе такое разообразие. Этакий лёгкий произвол, навеянный вдохновением. Верстальщик – нет. У верстальщика все углы должны быть, как солдаты, – подстрижены под одну гребёнку.

Можно, конечно, открыть сразу Gimp и терпеливо нарисовать идеальный уголок попиксельно. Только вот мы не знаем заранее, какой нам понадобится в очередной кнопке радиус скругления. И придётся рисовать много-много уголков: разнообразие радиусов помноженное на разнообразие цветов и толщину линий.

Почему HTML-CSS не идеальной решение?

Векторная графика выводится на печать принципиально медленнее, чем растровая. Устройства вывода (и на принтер, и на экран…) не могут «печатать» формулы, – они могут отображать только точки, пикселы. То есть устройства вывода вообще не могут печатать векторную графику напрямую.

Браузер тоже выводит на экран точки; и картинку (уже состоящую из готового набора точек!) ему вывести проще. Графические элементы, созданные с помощью кода (HTML-CSS), браузер вообще не может вывести на экран непосредственно, – он всё равно сначала превращает все эти элементы (и даже шрифты!)

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

Поэтому мы должны чётко понимать, что «рисование» на HTML-CSS (да любое «рисование» вместо готового gif’а!) усложняет работу браузера, увеличивает количество вычислений. «Чистый» выигрыш в скорости тут можно получить лишь в случае большого объёма картинки (при замене его небольшим фрагментом HTML-кода) – за счёт времени загрузки.

И мы всё-таки отказываемся от картинок в пользу HTML-CSS, потому что так можно добиться большей «правильности» и однородности в скруглениях углов; потому что это технологичней – отображать всё разнообразие радиусов скругления и цветов фона с помощью формул (создаваемых по мере необходимости), а не хранить в виде кучи отдельных файлов.

Но как вы себе это представляете – выдавать браузеру коды нужных скруглений «по мере необходимости»? В момент осознания необходимости верстальщик должен будет плотно сесть за монитор, и скопировать и перелопатить код образца, заменив в нём цвета и добавив часть элементов «по аналогии» с существующими. То есть проделать кучу ручной работы. Верстальщик десять раз пожалеет, что не заготовил заранее набор картинок для уголков «на все случаи жизни»…

Не-ет, раз уж мы выбрали «формулы», давайте доводить их до совершенства, оптимизировать так, чтобы максимально исключить всю рутину.

HTML-код скруглений надо «считать» с помощью JavaScript

На самом деле, конечно, добросовестный разработчик должен здесь разделить вопрос на две части: «считать» и «на JavaScript». Потому что считать шаблоны (избавить верстальщика от рутины) можно ещё и на сервере. Но тогда возрастёт трафик между сервером и браузером (да и вычислительной нагрузки серверу добавится).

Нет, HTML с сервера должен идти максимально «чистый», простой (и, по возможности, короткий!) а всякие рюшечки и свистелочки типа уголков разумно передавать одной командой: «этому элементу добавить скругления номер 5». А команду выполнит JavaScript уже на клиенте. Или не выполнит, если JS отключён. И пользователь не увидит рюшечек. Это выбор пользователя.

Алгоритм и сущности

Скругление – это удаление части пикселов. Их можно удалять побольше или поменьше. Вот как это приблизительно выглядит:

Из рисунка видно, что для иллюзии округлости видимая часть каждого последующего вынимаемого слоя пикселов должна увеличиваться в длину на один пиксел. То есть размеры видимых частей в пикселах будут «1», «2», «3», «4»… Возьмём за основу алгоритма число – длину самой большой видимой части. Тогда общая глубина «выемки» будет равна сумме всех видимых частей (1 + 2 + 3 …) плюс количество слоёв.

Для средней фигуры рисунка это будет 1 + 2 + (2) = 5; для правой (самой большой) фигуры: 1 + 2 + 3 + (3) = 9. Для следующей по сложности фигуры: 1 + 2 + 3 + 4 + (4) = 14. Закономерность достаточно простая. Полученное число будет равно общей (видимой и невидимой) длине каждого слоя и общему количеству слоёв (выемка – квадрат).

Сущности, с которым мы будем работать – это стопка слоёв толщиной в 1 px (пиксел) и шириной в максимальную ширину слоя. А может, и не так. Ведь ширину видимой части можно воплощать по-разному. Попробуем сделать её равно ширине самого слоя. Тогда стопка слоёв для средней фигуры будет выглядеть примерно так:

<i></i> <i></i> <i></i> <i></i> <i></i>

То есть материал потребовал сделать наоборот: опираться на ширину «невидимой» части слоёв. В кавычках – потому что по-настоящему невидимой она всё-таки быть не может, если мы сделаем её реально прозрачной, из-под неё будет виден фон основной фигуры (углы которой мы скругляем). То есть цвет «невидимой» части слоёв мы будем задавать явно, и он должен быть равен цвету фона, на котором лежит основная (скругляемая) фигура.

С учётом этих условий, функция генерации массива слоёв (точнее, классов CSS для этих слоёв) для верхнего левого угла может выглядеть так:

function leVerhUgol(d) { var len = 0, i = d, count = 1; //количество слоёв for (i; i > 0; i —) len += i + 1 //ширины слоёв var list = [‘w’ + len], w = len, i = d; //до середины for (i; i > 0; i —) list.push(‘w’ + (w -= i)) //от середины до конца while (—w > 0) { i = ++count while (—i >= 0) list.push(‘w’ + w) } return list }

Для нижнего левого угла, очевидно, достаточно будет выполнить list.reverse(). Ну, а поменять левые углы на правые можно с помощью CSS.

Конечно, такое приближённое вычисление окружности работает только до входящего параметра d = 3. При значении 4 уже ясно видно, что скругление получается не в форме круга. Чтобы не возиться с формулами, можно использовать здесь готовые наборы параметров вида:

list = [‘w10’, ‘w7’, ‘w5’, ‘w4’, ‘w3’, ‘w2’, ‘w2’, ‘w1’, ‘w1’, ‘w1’]

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

Рисование

Функция addRound, добавляющая углы к заданному элементу, получилась у нас сейчас грубая и циничная, так как мы спешим. Она работает, да и ладно. Просто по очереди формируем из массива слоёв четыре угла и присоединяем, куда функция corners скажет (подробности в файле skrug.js).

Мы добавили там и вариант со сглаживанием. Он получился «неровный», но всё равно в общем-то работает.

Ближе к концу работы функция addRound формирует HTML-элемент, содержащий все 4 закругления (переменная container). Если кнопок (элементов, требующих скругления) много, нет необходимости запускать функцию addRound много раз, достаточно просто присоединить к каждой кнопке копию (cloneNode) элемента, на которй ссылается container. Нечто вроде небольшого кэширования.

Для полного счастья

В предлагаемом варианте осталось недоработанным вот что: для формирования контуров кнопок (а не просто скруглений фона) серверный скрипт должен знать некоторые условности. Они не то чтобы сложные (должно быть два элемента div, вложенных друг в друга, с classname «dark1» и «dark2»), но важен сам принцип – что в создании скруглений участвует сервер. А он не должен участвовать.

В идеале надо отправлять с сервера один признак (тот же classname), а уже JavaScript сам должен при необходимости оборачивать «кнопку» в два элемента «dark1» и «dark2».

Пример для работы

http://ir2.ru/static/scrug_css_js.htm (+skrug.js, skrug.css)

D.M., admin

Закругленные углы | HTML Dog

Закругленные углы использовались для сужения сплошных фоновых изображений или, для гибких блоков, многочисленных фоновых изображений, по одному на угол, наложенных на несколько вложенных элементов div . Аргх, некрасиво. Ну, не больше. Теперь, с помощью простого CSS, вы можете добавить в дизайн больше изгибов, чем Мэрилин Монро.

Радиус границы?

Ага. Радиус границы. Однако не бойтесь — вам не обязательно иметь границы. 9Свойство 0005 border-radius можно использовать для добавления угла к каждому углу блока.

#мэрилин {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 20 пикселей; 
}

Вот и все. Закругленные углы, видите? Ну, да, если у вас толковый браузер (см. примечание ниже).

Углы обрезаются вокруг соответствующих четвертей окружности (или эллипса) заданного радиуса.

Конечно, если вы хотите рамку…

#ok_a_border_then {
    граница: 5px сплошная #8b2;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 5px; 
}

Упс.

Новый раздел примеров! Посмотрите весь этот код в действии и поэкспериментируйте с ним.

Несколько значений

border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius также можно использовать для нацеливания на определенные углы.

Еще немного менее ужасно многословный, вы также можете определить все радиусы углов (какое замечательное слово) индивидуально с помощью списка значений, разделенных пробелами, работая по часовой стрелке от верхнего левого угла, как и другие сокращенные свойства:

#монро {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 6px 12px 18px 24px; 
}
Радиус границы с несколькими значениями.

Пышные.

Используя два значения вместо четырех, вы нацеливаете верхний левый и нижний правый с первой длиной (или процентом) и верхний правый + нижний левый со вторым. Три значения? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Сокрушительный.

Гах! Просто должны были быть проблемы с браузером, не так ли? Черт бы вас побрал, браузеры.

Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо обойтись дизайном в тех браузерах, которые не имеют закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.

Вы также можете наткнуться на аналогичные проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для старых, малоиспользуемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.

Эллипсы

Круги для вас слишком квадратные? Вы можете указать разные горизонтальные и вертикальные радиусыiii, разделив значения знаком «/».

#нано {
        фон: #fff;
        ширина: 100 пикселей;
        высота: 150 пикселей;
          радиус границы: 50px/100px; 
        радиус нижнего левого края: 50 пикселей;
        граница-нижний-правый-радиус: 50px;
}
Нану.

CSS Закругленные углы и теневые блоки CSS

Многие веб-разработчики в прошлом размещали изображения вместо закругленных углов , потому что по умолчанию внешний вид рамок заостренных прямоугольных углов. Но теперь свойство CSS3 border-radius позволяет веб-дизайнерам рисовать закругленные углы.

радиус границы: 25 пикселей;

Сокращенное свойство border-radius может использоваться для одновременного определения всех четырех углов. Если какое-либо значение установлено равным нулю, этот угол будет квадратным.


Источник

Сокращенное свойство border-radius можно использовать для определения всех четырех углов одновременно, радиус границы: 25px;.

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

дел { граница: 5px сплошная #4FFFA1; отступ: 30 пикселей; фон:#F6FFA1; ширина: 250 пикселей; граница-верхний-левый-радиус: 0px; граница-верхний-правый-радиус: 15px; граница-нижний-левый-радиус: 25px; граница-нижний-правый-радиус: 45px; }
вывод

CSS закругленные углы во всех браузерах

В Firefox вам нужно использовать префикс -moz-, который работает так же, как и стандартная версия CSS.

радиус границы: 20 пикселей; -moz-border-radius: 20px

Чтобы установить разные радиусы для каждого отдельного угла вашей коробки, используйте следующее:

-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft

Чтобы установить свойства закругленных углов во всех браузерах, вы можете реализовать следующее:


.бокс-углы { радиус границы: 30px; -moz-граница-радиус: 30px; //Fire Fox -webkit-border-radius: 30px; // Хром/Сафари -khtml-граница-радиус: 30px; // Браузеры Konquerer }

Как нарисовать круг с помощью CSS?

Скопируйте и вставьте следующий исходный код на свою html-страницу, он нарисует кружок на вашей html-странице.

Круг

output

Как нарисовать затененный прямоугольник?

CSS-свойство box-shadow можно использовать для определения эффектов тени в элементе блока.

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

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