Как закруглить углы в CSS и HTML. Закругление углов картинок.
В данной статье описан способ закругления углов с помощью CSS и HTML кодов и делать красивые формы картинок для сайта.
Очень часто веб-дизайнеры в своих работах изменяют формы геометрических фигур, картинок, фотографий и т.п., получая закругленные углы. Это придаёт проекту законченность и приятный дизайн.
Существуют различные по сложности реализации способы преобразовать обычный прямоугольник в прямоугольник с закругленными углами. Мы познакомимся с двумя самыми простыми и быстрыми способами, а также научимся делать картинки и рамки вокруг картинок с закругленными углами для оформления сайта и веб-страниц:
1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css.
2. Закругление углов с помощью HTML кода без записи в файл стилей.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML.
1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей Style.css
Рассмотрим первый способ получения прямоугольника с закругленными углами с помощью CSS и HTML кода с записью в файл стилей Style.css.
Что такое CSS
CSS – это Каскадная Таблица стилей (Cascading Style Sheets – CSS), использующая специальный код. С его помощью можно изменять шрифты, формы и цвета элементов, на страницах веб-приложений позиционировать элементы,включать фоновые изображения. CSS3 последняя версия данной разработки CSS.
Блоки, состоящие из CSS скриптов, размещаются в файле шаблонов стилей, шрифтов и цветов – Style.css для дальнейшего подключения их с помощью HTML-файлов (файлы с раширением .php) в различных местах сайта (шапка, контент, комментарии, подвал и сайдбар).
Работать с CSS и HTML кодами и файлами легко и доступно. Главное всё делать очень внимательно и не спеша.
Делаем прямоугольник с рамкой в CSS
Чтобы изобразить на сайте обыкновенный геометрический прямоугольник, необходимо описать его параметры: длину, высоту, цвет фигуры, цвет фона блока и при необходимости стили рамки (толщина, цвет и т.п.). Для этого формируем следующий блок CSS, в котором описаны стили (параметры) прямоугольника:
#ugolkrug< width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ >
Заходим в административную панель WorPress, отмечаем слева пункты меню Дизайн=>Редактор, открываем файл Style.css и в конец файла добавляем этот блок. Не забывайте нажимать Save (сохранить).
Код цвета задаётся в шестнадцатеричной системе и может состоять из шести знаков (это его полный код) или из трёх знаков (сокращённый код). Сокращать код цвета можно в случае совпадения первой цифры со второй, третьей с четвертой и пятой с шестой. Например, код #BB00CC можно сокращённо записать так #b0c. Буквы A, B, C, D и F в коде цвета использовать только латинские.
Значение 3px в атрибуте border показывает ширину рамки.
После занесения стилей в файл Style.css мы можем показывать наш прямоугольник в любом месте сайта. Для этого размещаем тег HTML кода в том месте, где должен появиться наш прямоугольник. Тег имеет такой вид:
Обратите внимание, что стили CSS для данной фигуры заносятся в файл один раз, а HTML-тег можно располагать на сайте неограниченное количество раз.
В результате выдачи получаем такой прямоугольник с рамкой.
Как сделать закругленные углы в CSS
Для закругления углов используется атрибут border-radius.
Мы могли бы добавить только этот атрибут. Он нормально отображает результат закругления в новых версиях браузеров, но у многих пользователей ещё остались старые версии, где этот атрибут работает некорректно. Поэтому для совместимости мы добавим ещё несколько описаний этого атрибута, привязанного непосредственно к определённым браузерам, в наш блок в файле Style.css, получив следующий код:
#ugolkrug< width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */ -khtml-border-radius:10px; /*закругление для браузера Konquerer системы Linux */ border-radius: 10px; /* закругление углов для всех, кто понимает */ >
HTML-тег div выдаст нам прямоугольник в рамке с закругленными углами:
Как вставить в рамку текст
Для размещения в прямоугольнике текста необходимо в блок CSS добавить атрибут отступов текста от краёв padding, а HTML-тег будет содержать в себе нужный текст, например “pib9.ru”. Таким образом блок CSS имеет такой вид:
#ugolkrug< width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */ -khtml-border-radius:10px; /* закругление для браузера Konquerer системы Linux */ border-radius: 10px; /* закругление углов для всех, кто понимает */ padding: 5px; /* внутренние отступы */ >
а HTML-тег для выдачи текста будет выглядеть так:
pib9.ru
Получаем прямоугольник с закругленными углами и текстом:
Если из кода убрать атрибуты описания размеров прямоугольника width и height, то можно получить такие формы с закругленными углами:
1. Без текста
В этом случае формы принимают размеры среды: длина соответствует ширине поля, а высота изменяется по мере наполнения формы содержимым.
Закругление выбранных углов
В описании стилей параметр 10px в атрибуте border-radius показывает радиус закругления, который можно изменять, подбирая нужный. Если задать 0, то закругление не произойдет. Этим свойством можно воспользоваться, когда необходимо сделать закругление выбранных углов.
Распишем значения радиуса закругления для каждого угла, указывая нули там, где отменяем закругление. Например, отменим закругление в третьем и четвертом углах. Наш код примет такой вид:
#ugolkrug< width:200px; /* Длина фигуры */ height:100px; /* Высота фигуры */ color: #0000; /* цвет текста */ background:#FF7F00; /* фон блока */ border: 3px #CCCCCC solid; /* стили рамки */ -moz-border-radius: 10px 10px 0 0; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px 10px 0 0; /* закругление для старых Chrome и Safari */ -khtml-border-radius: 10px 10px 0 0; /* закругление для браузера Konquerer ОС Linux */ border-radius: 10px 10px 0 0; /* закругление углов для всех, кто понимает */ padding: 5px; /* внутренние отступы */ >
1. Левый верхний угол.
2. Правый верхний угол.
3. Правый нижний угол.
4. Левый нижний угол.
Таким получается прямоугольник с выбранными закруглениями только в верхних углах.
Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла:
2. Закругление углов с помощью HTML кода без записи в файл стилей
Рассмотрим второй способ получения прямоугольника с закругленными углами с помощью HTML кода без записи в файл стилей.
HTML закругленные углы
Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы. Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.
Вместо нашего блока CSS получаем HTML скрипт, который вставляем в то место, где должен выдаваться прямоугольник с закругленными углами:
Закругленные углы с помощью HTML без использования файла Style.css
Первый способ закругления углов можно применять, когда одна и та же форма, не меняя стили, используется больше одного раза. Второй способ применяется для форм, стили которых используются один раз.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML
Ещё хочу подарить Вам полезную информацию. Часто, используя картинки для оформления сайта, очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: “Как закруглить углы картинки?”.
Это делается очень просто, и сейчас мы этому научимся.
Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:
В атрибуте url(‘ ‘) вставляете ссылку на свою картинку.
Закругляем углы картинки с добавлением рамки
Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.
Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:
#img-radius
Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.
Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:
В результате работы кодов каждого из двух способов получаем один и тот же результат – картинку с закругленными углами:
Скругление углов картинки CSS
Чтобы задать скругление углов изображению с помощью CSS можно использовать свойство border-radius, можно поставить любое значение, если на сайте такая задумка. Вы так же можете добавить к картинке рамку и тень, это придаст объем и картинка будет смотреться еще интереснее. Можно воспользоваться генератором скругления углов CSS и скопировать уже готовый код.
Как скруглить картинку в css
Я раньше писал про политику конфиденциальности и это как бы была теория. А сегодня у нас практическое занятие — мы рассмотрим как можно сделать у себя на сайте круглые изображения не прибегая к фотошопу или аналогичным программам.
Я давно уже знал как используя CSS3, сделать изображения круглыми и что это выглядит очень впечатляюще. Единственным недостатком является то, что само изображение должно быть в качестве фонового. Вы действительно не можете повлиять на использование тегов изображения, выведенного на экран. Это означает, что действительно никто не сможет выделить и скопировать изображение к себе на компьютер и это нормально.
Первым делом немного HTML:
Не много, не правда ли? А теперь сам CSS:
Вышел полный круг, и для этого вам нужно сделать границы радиуса половиной высоты / ширины. И сложив это все вместе, ваше изображение выглядит одинаково во всех современных браузерах: Мозила, Сафари и Хром…
К изображению вы можете добавить border (границу) и shadow(тень). Получится вот так:
Я добавил к картинке темную тень с небольшой прозрачностью в 75%. И теперь CSS выглядит во так:
Есть другое практическое решение и оно будет очень хорошим для тех, кто хочет сохранить рисунок себе на компьютер, но этот метод требует немного больше HTML и CSS.
Использую вышеперечисленный метод вы позволяете пользователям вашего сайта скачать вашу картинку себе на компюьтер.
Вы также можете уменьшить радиус кривизны 175 пикселей, чтобы сделать закругленные углы с помощью CSS меньше или больше.
И еще один совет: если хотите чтобы круг получился абсолютно ровный и чтобы не высчитывать пиксели вашего изображения используйте следующий атрибут — border-radius: 50%;. Ниже пример использования:
Получилась не большая статейка, но очень полезная. Может кто-то захочет сделать свои картинки на сайте круглыми и вот вам решение))).
Скругление углов. Обзор методов.
Сейчас прямо-таки эпоха скругленных уголков.
Где дизайнеры только их не используют: скругляют блоки
Бесспорно дизайны стали симпатичней. Да и усилий вроде не так много нужно: несколько секунд работы дизайнера и пара минут чтобы сверстать эти углы.
Но все ли так просто и безоблачно? Посмотрим на такой вот дизайн:
нужно скруглить фото расположенном на фоне с более, чем одним цветом (другая фото или градиент). Да еще учесть что блок может «плавать» по этому фону. Т.е. вырезать четыре картинки и разместить их по углам уже не получится.
В таких случаях имеем несколько секунд работы дизайнера и полный ступор с головной болью у верстальщика.
Столкнувшись очередной раз с такой задачей, нашей командой было решено выделить наконец время на детальное изучение этой проблемы и поиск решения. Тема эта довольно избита. Инет кишит готовыми решениями и советами. Но т.к. мы взяли курс на разработку высокоскоростных, нагруженных сайтов с большим количеством анимаций, решение должно было попадать под требования:
- быть простым в использовании
- быть универсальным
- минимум дополнительных тегов в коде (чтобы облегчить DOM и сохранить семантику)
- минимум внешних файлов: картинок, javascript (сократить запросы к серверу)
Рассмотрим интересные на мой взгляд решения, которые удалось найти, и попробуем разобрать их сильные и слабые стороны.
Почти идеальное решение — CSS3 border-radius
В 2002 W3C начало рекомендовать разработчикам браузеров свойство border-radius, которое решало одним махом все проблемы со скруглениями.
Преимущества
- нет необходимости во внешних файлах (картинках, js)
- HTML код предельно чист и семантичен
- рендеринг страницы максимально быстрый
- скругляется что угодно (картинки, блоки с любым фоном, на любом фоне)
- скругляется как угодно (задается угол скругления, какие именно углы скруглять, можно задать скругленную рамку заданным цветом и толщиной)
Недостатки
- на дворе весна 2010-го, а border-radius понимает только Opera 10.5 (подпольные браузеры в счет не беру). В чистом виде идеальное решение при всем оптимизме нам светит через 2-3 года. Частично проблему кроссбраузерности исправляют свойства -moz-border-radius (для mozilla) и -webkit-border-radius (для webkit-браузеров), но в сумме это не покрывает и половины пользователей.
- браузеры на движке webkit вроде как делают скругление без сглаживания
update 30.09.2010 С появлением плагина CSS3 PIE ситуация изменилась: CSS3, расширения браузеров и этот плагин, теперь можно охватить около 90% пользователей. Для большинства проектов этого достаточно, тем более, что число старых браузеров с каждым месяцем становится ощутимо меньше, плюс скругления не являются критически важным элементом дизайна (сайта): пользователи всех браузеров информацию сайта увидят. Вот как это выглядит в CSS коде:
Заметки
- таким способом скруглить картинку зачастую проще, если ее поместить в бэкграунд (background);
- если картинка размещена в контейнере, который имеет скругленные углы, чтобы картинка не выходила за рамку родителя, следет ему (родителю) добавить overflow: hidden;
- update 25.01.11 by Денис Кораблев Если применить скругление углов к таблице, ИЕ всех версий подвисает. Причем может проявиться только при обновлении страницы или переходе на другую. Решение — обернуть таблицу в дополнительный и уже к нему применять скругление; .
Скругленные углы с помощью картинок
Метод предельно прост — каждый уголок будет картинкой, которую абсолютным позиционированием размещаем внутри блока по углам блока-родителя. Например, имеем по дизайну вот такой заголовок:
При этом он должен тянуться вертикально и горизонтально. Наши действия: вырезаем углы и склеиваем их в одну картинку чтобы минимизировать число отдельных файлов (изображение увеличено для наглядности)
Далее городим страшную конструкцию в HTML, а стилями расставляем углы по местам:
Преимущества
- простота реализации
- минимальное к-во внешних файлов
Недостатки
- наличие внешнего файла(ов)
- избыточность HTML кода, его не семантичность
- при изменении цвета блока или радиуса скругления придется перерезать картинки заново, править стили
- сложно, а иногда и невозможно сделать таким способом скругления (например, скруглить фото на неоднородном фоне — см. пример в начале)
Метод отлично рассмотрен на техногрете Сергеем Чикуенком.
Скругленные углы с помощью jQuery.corner
Плагин для jQuery, который позволяет сделать уголки разнообразной формы. На странице плагина можно оценить большое разнообразие доступных углов. Тут же доступна последняя версия плагина.
Преимущества
- программисты работают с чистым кодом
- поисковики видят семантический код
- всего два внешних файла при любом количестве углов (jQuery используется в большинстве наших проектов, поэтому можно считать, что только один дополнительный файл)
- легко менять цвет блоков и радиус скругления
Недостатки
- нет возможности сделать углы изображениям (в описании скрипта сказано, что применим только к блочным элементам)
- не работает кроссбраузерно на неоднородном фоне
- косяки, если скругляемый элемент имеет неоднородный фон
- возможны косяки с расположением углов в IE6
- углы реализуются с помощью миллиона динамически вставленных элементов в DOM (что-то мне подсказывает, что это не лучшим образом скажется на скорости анимаций на страницах)
Эти косяки вылезли за 10 минут тестирования. На самом деле думаю косяков больше — в топку такой плагин.
rocon — js библиотека для создания скругленных углов
Кто делает
Что делает
Скругляет углы у элементов с однородным фоном на любом фоне. Плюс есть возможность добавления скругленного бордюра. Примеры.
Как делает
Для mozilla и браузерах на движках webkit используются специфические CSS правила -moz-border-radius, -webkit-border-radius. Для Opera используется canvas, для IE VML. Детали в статье автора «rocon — подробности».
Где взять
Преимущества
- быстро работает
- довольно прост в применении
- небольшой вес библиотеки
- продумана возможность резиновости блоков
- продумано динамическое добавление блоков со скруглениями
- один внешний файл при любом числе углов
Недостатки
- пока не реализованы скругления для блока с неоднородным фоном (например с градиентом)
- не применимо для изображений (
)
- местами еще сыровата библиотека
Верим, что Сергей найдет время доработать скрипт. Ждем этого дня не меньше, чем Нового года.
DD_roundies — еще одна библиотека для скругления углов
Кто делает
Как делает
Принцип несколько схож с библиотекой rocon — для mozilla и webkit используются CSS правила -moz-border-radius и -webkit-border-radius. Для IE используется VML, для Opera SVG. Главное отличие от rocon — скгругленный блок отрисовывается целиком, что делает резиновость блока довольно трудной (ресурсоемкой). В rocon каждый угол — это отдельный элемент.
Где взять
Скачать библиотеку, посмотреть примеры, прочитать о синтаксисе можно на странице скрипта.
Преимущества
- прост в применении
- работает на неоднородном фоне
- есть возможность задания разных радиусов для разных углов
Недостатки
- слабая кроссбраузерность (как минимум есть проблемы в IE8, Opera версии меньше 10)
- с багами работает скругление блоков с неоднородным фоном
- не применимо к картинкам
- медленная работа в IE при изменении размеров блока из-за постоянного пересчета размера блока и перерисовки фигуры
Вывод
В реальных сайтах малоприменимо.
Скругление картинок на стороне сервера. Библиотека ImageMagick.
Что делает
Дает возможность преобразовывать изображения на стороне сервера: изменять размеры, поворачивать и еще многое чего. Меня же сейчас интересует возможность создания изображения со скругленными углами. Т.е. уже с сервера приходит картинка нужной формы и версткой с ней ничего делать не нужно.
Где почитать
Преимущества
- не нужно подключать дополнительные внешние файлы для скругления (скрипты, картинки)
- кроссбраузерность
- есть возможность создания обводки (бордюра) для изображения
Недостатки
- применимо только к изображениям (img)
- если изображение на веб странице должно быть расположено на неоднородном фоне, тогда придется картинки выдавать в формате png-24, что ощутимо может повлиять на вес изображения
Зачем этот способ знать верстальщику
Чтобы вовремя подсказать программисту(заказчику, руководителю проекта) о такой возможности для получения лучшего конечного результата командной работы.
CSS3 + вендорные префиксы + PIE
update 10.09.10: суть простая — используем CSS3 свойство border-radius для Opera 10.5+ и новых браузеров, которые будут появляться дальше, для некоторых продвинутых браузеров используем специфические (вендорные) свойства, для IE6-8 плагин PIE:
- простота и скорость реализации;
- чистый HTML код;
- отсутствие картинок;
- только IE6-8 будут подгружать дополнительный файл PIE.htc.
- не все старые браузеры поддерживают вендорные префиксы (например, скругленные углы таким способом не увидят пользователи браузеров FF ниже версии 3.6, Opera версии ниже 10.5);
- браузеры поддерживающие CSS скругления, несколько по разному могут отобразить скругленные углы.
Подытожим
Идеального решения для скругления углов ныне нет. Поэтому в зависимости от поставленных задач и целей конкретного проекта ищем возможности реализации из доступных решений.
Делаем изображения круглыми в WordPress с помощью CSS
Круглые изображения, несмотря на то, что они не являются какой-то новинкой, вовсю используются в современном веб-дизайне. На многих сайтах можно видеть именно скругленные изображения. Итак, давайте посмотрим, как сделать изображения круглыми с помощью двух простых шагов.
Шаг 1. Добавляем код в CSS-файл.
Если вы хотите, чтобы некоторые из ваших изображений были круглыми (как это показано на изображении выше), вы можете легко это сделать. Вам понадобится всего лишь добавить пару строк кода в ваш CSS-файл, после чего связать его с теми изображениями, которые вы желаете сделать круглыми.
Естественно, лучше всего вносить изменения в CSS, воспользовавшись дочерними темами (либо работать со специальной областью CSS, которая присутствует в некоторых темах).
В вашем CSS-файле поместите следующий код:
Причина размещения такого количества строк со значением 150px – подгонка под разные браузеры. Некоторые дизайнеры говорят, что сегодня уже достаточно размещать только «border-radius: 150px;», однако лучше перестраховаться.
Шаг 2. Обертываем изображения в DIV
Как только стили заданы, идем вперед и загружаем свое изображение, которое помещаем в любую позицию – по центру, справа и т.д.
После того, как изображение будет стоять в нужной позиции, переключаемся на редактор Text и помещаем следующий код вокруг кода с изображением:
Иными словами, все это будет выглядеть следующим образом:
Заметьте, что атрибут class у div («circular-image») совпадает с идентификатором в вашем CSS-файле. Не важно, как вы их назовете – важно, чтобы они были одинаковыми. И естественно, надо будет выбрать такое название, чтобы оно не конфликтовало с остальными классами в CSS-коде. Оно должно быть уникальным.
Сохраняем запись, после чего наслаждаемся круглыми изображениями.
Важные примечания, а также альтернативный метод
Есть несколько важных вещей, которые необходимо пояснить в коде выше. Я сделал изображение, которые вы видели выше, идеальным кругом, задав параметры height и width в CSS – 300px и 300px. После чего я задал радиус границы в половину от 300px, т.е. 150px. Вы можете менять эти размеры так, как вам захочется, если вам потребуется что-то меньшее или большее. Просто сохраните пропорции такими же – если вы поставите размеры 400px и 400px, то тогда радиус должен быть 200px.
Некоторые из вас могут спросить: можно ли сделать изображение круглым, не задавая размер? Другими словами, нельзя ли сделать так, чтобы актуальный размер изображения сохранялся, но оно становилось круглым?
И да и нет… возможно.
Квадраты против прямоугольников
Все сводится к форме вашего исходного изображения. Является ли оно идеальным квадратом или пока еще представляет собой прямоугольник?
Мое исходное изображение было прямоугольным, поэтому если бы я не установил точную ширину и высоту, то оно вышло бы продолговатым – что также может выглядеть круто. Мы посмотрим на это далее.
Во-первых, давайте посмотрим на то, что я имею в виду. Вот мое исходное изображение без какого-либо CSS-кода, примененного к нему. Вы видите, что исходное изображение прямоугольное, а не квадратное.
Теперь я бы мог просто поставить радиус границы как 50% и позволить размеру исходного изображения устанавливать размер заключительного круглого изображения. Я могу поместить это в свой CSS-файл:
Как только я сделаю это, появится финальный результат. Заметьте, что изображение более овальное, продолговатое, чем прежнее, которое было идеальным кругом.
Вот два варианта рядом для сравнения:
Некоторым может понравиться такой вид. Некоторые могут сделать разные варианты представления для разных изображений. Если вам хочется поступить именно так, просто создайте два разных класса и задайте для них разные стили.
CSS-код для изображений можно сделать более сложным, чем описанный в статье, однако то, что представлено выше, отлично подойдет для людей, которым требуется быстрое и простое решение для создания привлекательных круглых изображений.
Безусловно, круглые изображения можно также сделать в любом графическом редакторе. Однако если вдруг вам понадобится в один прекрасный момент вернуться к стандартным прямоугольным картинкам, произвести это будет очень непросто. Поэтому в данном случае проще воспользоваться CSS-стилями.
Блок с закруглёнными углами CSS и DIV
1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей css.
2. Закругление углов с помощью HTML кода без записи в файл стилей.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML.
1. Закругление углов с помощью CSS и HTML кода с записью в файл стилей css
Сначала создадим элемент div
Пропишем стили:
Наш квадрат готов.
Теперь зададим свойства закругления. Для этого используем команду: border-radius
Немного подробнее о коде:
border-radius:6px — Свойство CSS3. Чем больше значение в пикселях, тем сильнее скруглённые углы;
-webkit-border-radius:6px — Хак для включения поддержки закругления в браузерах на основе webkit (Google Chrome и Safari).
Но стоит заметить, в последних версиях браузеров Chrome и Safari для поддержки border-radius не нужны никакие хаки.
-moz-border-radius:5px — Хак для включения поддержки закругления в браузере Firefox. Без него будет просто квадрат;
-khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux.
Так, что наш код можно записать так:
Закругления для выбранных углов
Если Вам нужно закруглить только выбранные углы. Для этого изменим наш код:
Немного подробнее о коде:
1. Верхний левый угол;
2. Верхний правый угол;
3. Нижний правый угол;
4. Нижний левый угол;
Освоив данную технику, вы сможете делать красивые сглаженные углы на своем сайте.
2. Закругление углов с помощью HTML кода без записи в файл стилей css.
HTML закругленные углы. В формировании HTML кода мы вписываем те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл style.css. Одним словом – заменяем полностью кодом HTML код CSS.
Вместо нашего блока CSS получаем HTML скрипт, который вставляем в то место, где должен выдаваться прямоугольник с закругленными углами:
Первый способ закругления углов можно применять, когда одна и та же форма, не меняя стили, используется больше одного раза. Второй способ применяется для форм, стили которых используются один раз.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML.
Часто, используя картинки для оформления сайта, очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: «Как закруглить углы картинки?».
В данном разделе статьи мы опишем как это сделать:
Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:
В атрибуте url (‘ ‘) вставляете ссылку на свою картинку.
Получаем:
Закругляем углы картинки с добавлением рамки
Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.
Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:
Создаем стиль: #img-radius
Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.
Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:
Закругление выбранных углов картинки
Создаем стиль: #img-radius2
Создаем стиль: #img-radius3
Создаем стиль: #img-radius4
Создаем стиль: #img-radius5
Создаем стиль: #img-radius6
Похожие публикации:
- Как сделать 3 колонки в html с css
- Как сделать адаптивное изображение css
- Как сделать блок на блоке в css
- Как сделать бургер меню html css
Как сделать закругленные углы css
Сегодня я расскажу и покажу как сделать закруглённые углы при помощи css. Ещё совсем недавно закруглённые углы на сайтах делались исключительно при помощи картинок, то есть нужно было заранее подготовить картинку в фотошопе или другой аналогичной программе, закруглить для неё углы так как вам нужно, а потом разместить её на сайте.
Навигация по статье:
- Как закруглить углы для блока?
- Как закруглить углы картинки при помощи CSS?
- Куда вставлять CSS код?
- Как ещё можно закруглить углы при помощи CSS?
Но к счастью эти времена остались позади и сегодня сделать закруглённые углы для любого блока, картинки, кнопки или таблицы можно при помощи одной строчки CSS кода.
Причём вы можете закруглить углы как все сразу, так и только некоторые, да ещё и регулировать для них радиус закругления.
Как, например, здесь:
Круто, не правда ли?!
Всё это стало возможным благодаря CSS свойству border-radius.
Как закруглить углы для блока?
Предположим у вас на сайте есть блок с классом round-corner.
Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.
.round-corner < height : 100px ; width : 200px ; background : #2F73B6 ;
А теперь для того чтобы закруглить все углы этого блока нам достаточно приписать ему всего одну строку в CSS файле или прямо в коде страницы при помощи специальных тегов или атрибутов:
border-radius: 20px;
где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)
Радиус закругления может задаваться как в пикселях, так и в процентах.
border-radius: 10%;
И вот что мы получим в итоге:
Сразу предупреждаю, что старые версии старые версии браузера Internet Explorer, а также некоторые мобильные браузеры не понимают этого CSS свойства и отображают углы незакруглёнными.
Как закруглить углы картинки при помощи CSS?
Такой же фокус можно проделать и для картинки, кнопки и практически любого элемента на вашем сайте. Для того чтобы закруглить углы в CSS нужно либо прописать для этого элемента класс, для которого задано свойство border-radius, либо вычислить класс блока, внутри которого расположен нужный элемент (в нашем случае это картинка), а затем прописать тег этого элемента, после чего в фигурных скобках прописать ему всё тоже CSS свойство border-radius.
Для картинки CSS код будет выглядеть так: