Обратите внимание, что стили CSS для данной фигуры заносятся в файл один раз, а HTML-тег можно располагать на сайте неограниченное количество раз.
В результате выдачи получаем такой прямоугольник с рамкой .
Как сделать закругленные углы в CSS
Для закругления углов используется атрибут border-radius .
Мы могли бы добавить только этот атрибут. Он нормально отображает результат закругления в новых версиях браузеров, но у многих пользователей ещё остались старые версии, где этот атрибут работает некорректно. Поэтому для совместимости мы добавим ещё несколько описаний этого атрибута, привязанного непосредственно к определённым браузерам, в наш блок в файле Style.css, получив следующий код:
HTML-тег div выдаст нам прямоугольник в рамке с закругленным и углами :
а HTML-тег для выдачи текста будет выглядеть так:
|
pib9.ru
|
Получаем прямоугольник с закругленными углами
и текстом:
Если из кода убрать атрибуты описания размеров прямоугольника width и height , то можно получить такие формы с закругленными углами:
1. Без текста
В этом случае формы принимают размеры среды: длина соответствует ширине поля, а высота изменяется по мере наполнения формы содержимым.
Закругление выбранных углов
В описании стилей параметр 10px в атрибуте border-radius показывает радиус закругления, который можно изменять, подбирая нужный. Если задать 0, то закругление не произойдет. Этим свойством можно воспользоваться, когда необходимо сделать закругление выбранных углов.
Распишем значения радиуса закругления для каждого угла, указывая нули там, где отменяем закругление. Например, отменим закругление в третьем и четвертом углах. Наш код примет такой вид:
1. Левый верхний угол.
2. Правый верхний угол.
3. Правый нижний угол.
4. Левый нижний угол.
Таким получается прямоугольник с выбранными закруглениями только в верхних углах.
Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла:
2. Закругление углов с помощью HTML кода без записи в файл стилей
Рассмотрим второй способ получения прямоугольника с закругленными углами с помощью HTML кода без записи в файл стилей.
HTML закругленные углы
Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы . Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.
Вместо нашего блока CSS получаем HTML скрипт, который вставляем в то место, где должен выдаваться прямоугольник с закругленными углами:
Первый способ закругления углов можно применять, когда одна и та же форма, не меняя стили, используется больше одного раза. Второй способ применяется для форм, стили которых используются один раз.
3. Картинки с закругленными углами. Рамка вокруг картинки HTML
Ещё хочу подарить Вам полезную информацию. Часто, используя картинки для оформления сайта , очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: “Как закруглить углы картинки ?”.
Это делается очень просто, и сейчас мы этому научимся.
Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:
Закругляем углы картинки с добавлением рамки
Закругление углов картинок в CSS и HTML и добавление рамки можно выполнить одним из двух способов, описанных выше.
Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:
Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.
Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:
В результате работы кодов каждого из двух способов получаем один и тот же результат – картинку с закругленными углами:
Доброго всем утра, дня, вечера или ночи. С вами снова и опять Дмитрий Костин. Как-то я просматривал разные картинки и тут мне приглянулись некторые из них. А приглянулись он тем, что у них были закруглены края. Сразу как-то интереснее смотрится. Вы не находите? И поэтому в сегодняшнем уроке я хотел бы вам рассказать, как закруглить углы в фотошопе, чтобы фото смотрелось поинтереснее.
Вот чем я люблю фотошоп, так это тем, что во многих случаях одно и тоже дело можно сделать несколькими способами. Так и здесь. Давайте приступим к нашему фотошопству.
Сглаживание с использованием границ
Этот способ похож на предыдущий, но всё же сильно отличается. Проделывать всё будем с тем же самым изображением.
С помощью создания фигуры
Вот третий способ уже кардинально отличается от двух предыдущих. Так что передохните пару секунд и едем дальше. Изображение менять не буду и опять загружу эту машину в фотошоп.
Вы видите, что у вас в итоге получилось? Картинка стала с загругленными краями, а все из-за того, что она отображается только так, где стоит наш нарисованный закругленный прямоугольник. Но теперь вы можете обрезать лишний фо с помощтю инструмента"Рамка", либо же сразу сохранить картинку и у вас уже будет отдельное изображение с закругленными углами.
Попробуйте проделать все сами, а заодно и скажете, какой из представленных способов болле предпочтителен вам.
И кстати, если у вас есть пробелы в фотошопе или вы его просто хотите полностью изучить в кратчайшие сроки, то очень рекомендую вам посмотреть один замечательный курс по фотошопу для начинающих . Курс отлично сделан, рассказано и показано всё просто великолепно и каждый материал разбирается очень подробно.
Ну а на сегодня я свой урок заканчиваю. Не забудьте подписаться на новые статьи и поделитесь этим со своими друзьями. Рад был вам на моем блоге. Жду вас снова. Пока-пока.
С уважением, Дмитрий Костин
CTRL+N, или выбрать функцию «Создать» (Create) в выпадающем из меню «Файл» списка. Далее из того же списка выберите операцию «Импорт» или вызовите ее комбинацией клавиш CTRL+I. Далее, укажите в диалоговом окне путь к файлу изображения, и нажмите кнопку «Импорт» (Import). Ваше отобразится на данном .
На панели инструментов найдите свиток «Редактор узлов» (Node Editor), в нем выберите инструмент «Форма» (Shape). Также этот инструмент можно вызвать нажатием клавиши F10.
Справа от угла, который вам нужно закруглить, щелкните левой кнопкой мыши по границе изображения. Появится новый узел у изображения, дополнительно к четырем угловым. Далее, выберите опцию «Преобразовать в кривую» (Convert Line To Curve) на панели «Редактора узлов». Слева от вновь созданного узла появятся метки закругления.
На таком же расстоянии от угла добавьте новый узел на перпендикулярной стороне изображения. Не меняя инструмента «Форма», щелкните по основному угловому узлу дважды, он будет удален. Сразу станет заметным закругленный угол изображения. Метками направляющих прямых можно изменять радиус закругления угла.
Очень простым способом (с привлечением векторного объекта) можно все углы у прямоугольного изображения. Не прибегая к вышеописанному способу редактирования узлов, нарисуйте рядом с импортированным изображением прямоугольник такого же размера инструментом «Прямоугольник» (Rectangle Tool) или вызовите инструмент клавишей F6.
Уже знакомым вам инструментом «Форма» щелкните по прямоугольнику и потяните мышкой за любой из его узлов к прямоугольника. Углы будут закруглены. Радиус закругления можно откорректировать тем же инструментом.
Отметьте свое изображение стрелочкой инструмента «Указатель» (Pick Tool).
Далее в списке главного меню найдите свиток «Эффекты» (Effects) и выберите опцию «PowerClip»и из выпадающего списка функцию «Поместить в контейнер» (Place Inside Container). Широкой стрелкой укажите на нарисованный вами прямоугольник с закругленными углами. Он станет рамкой, в которой разместится ваше изображение.
Обратите внимание
Обратите внимание, что при импорте изображения в документ Corel Draw исходный файл изображения не изменяется, поэтому вы сможете использовать его в прежней форме, если результат с закругленными углами вас не устроит.
Используя функцию «PowerClip», можно помещать изображения в разнообразные рамки самых причудливых форм.
Источники:
- Официальное руководство по работе с Corel Draw, М.Мэтьюз, К.Мэтьюз, 1997
- Как сгладить острые углы?
Вам понадобится
- - компьютер
- - программа Adobe Photoshop
- - фотография
Инструкция
Правой кнопкой мыши нажмите на слое Background, выберите пункт Duplicate Layer и нажмите ОК (либо сочетание Ctrl+J). Затем создайте новый слой (Ctrl+Shift+N), поместите его между задним фоном и его копией как это показано на скриншоте (можно залить его каким-нибудь цветом, например белым). Заблокированный слой отключите (нажмите на «глаз» слева) или удалите.
В палитре инструментов найдите кнопку с прямоугольником (Rectangle Tool) и зажмите ее на левой кнопкой мыши. Появится дополнительное меню, где нужно (Rounded Rectangle Tool). Настройки в верхней части выставите такие же, как на скриншоте, а поле Radius измените по вкусу (чем больше, тем более круглые будут углы, и тем больше изображения обрежется.
Затем на фотографии выделите фрагмент, который вы хотите использовать (например, в качестве аватарки). Если вы ошиблись, нажмите клавишу Esc и повторите выделение. После того, как нужный фрагмент будет выделен, нажмите в него правой кнопкой мыши и выберите пункт Make Selection… и нажмите ОК.
Готово, вы получили слой с фотографией с закругленными углами. Теперь слой Layer 2 (тот, что служит задним фоном) можно залить любым цветом, либо оставить прозрачным.
Видео по теме
Обратите внимание
Прозрачные png-файлы - отличный формат, однако далеко не все онлайн-сервисы (социальные сети, блоги и т.п.) поддерживают прозрачные png-файлы. Если эффекта скругленных углов не получается, есть другой выход.
Выберите для заднего фона (Layer 2) цвет, наиболее близкий к тому, что установлен на странице, куда вы размещаете фотографию. Затем сохраните файл в формате jpg.
Приветствую, Друзья. Данная статья посвящена довольно популярной теме среди начинающих вебмастеров — закругленные углы CSS . Вопросы, которые я попытаюсь, раскрыть будут касаться того, как сделать скругленные углы элементов сайта, используя только CSS не прибегая к использованию каких-либо изображений.
В данном способе есть, как плюсы, так и минусы. Плюсы, конечно же, заключаются в том, что нет необходимости создавать изображения, используя какой-либо графический редактор, загружать их на сервер, а потом расставлять с помощью CSS на необходимые места для создания нужного эффекта. При этом необходимо создавать дополнительные элементы в HTML-коде, а также прописывать отдельные свойства для каждого из них.
Что касается минусов, то здесь можно отметить одну проблему — это поддержка данного свойства не всеми веб-браузерами, особенно это касается устаревших версий различных браузеров.
Однако закругление углов с помощью CSS становится все популярнее и популярнее. Как Вы уже могли понять, в данной статье мы будем использовать свойство доступное в CSS 3.
Скругленные углы с помощью CSS.
Итак, для примера мы возьмем блочный элемент DIV и сделаем его углы скругленными. Для примера создадим блок, и прямо в HTML-коде будем назначать ему свойства, используя атрибут style. Сначала мы имеем блочный элемент залитый фоном любого цвета:
Кстати, если Вам необходимо узнать какой код цвета у Вас на сайте или на любом другом, Вам пригодится .
А вот так мы увидим его в веб-браузере:
Теперь, чтобы закруглить углы воспользуемся свойством «border-radius», которое можно перевести, как радиус границы. Да именно так, а не как многие могли подумать, что это радиус рамки или как там его еще называют (border). Данное свойство отвечает именно за радиус границ элемента, а не за его рамки или бордюры, которых может и не быть. Однако, свойство будет по-прежнему работать и без использования border у элемента. Надеюсь, вы поняли, что я хотел сказать. Значением для данного свойства являются любые числовые значения, которые применимы в CSS, такие как проценты, пикселы (px), пункты (pt) и так далее. Да, и следует учитывать, что данное свойство работает сразу на все четыре угла элемента, кроме того, можно указать разный радиус для каждого угла, но об этом чуть позже. Для начала зададим радиус углов нашего прямоугольника. Пусть он будет равен 5 пикселам:
Тогда элемент станет выглядеть так:
Теперь, предлагаю разобраться в том, как добавить свой радиус для каждого угла в отдельности. Для этого мы можем воспользоваться свойством, которое можно применить для каждого угла в отдельности. Если говорить о прошлом примере, то в полном виде свойства для элемента выглядели бы так:
Border-top-left-radius:5px; /* верхний левый угол */ border-top-right-radius:5px; /* верхний правый угол */ border-bottom-right-radius:5px; /* нижний правый угол */ border-bottom-left-radius:5px; /* нижний левый угол */
То есть, если мы хотим задать каждому углу свое значение, мы имеем такую возможность, и чтобы убедиться в этом возьмем следующий код:
И тогда мы получим такой результат:
Как мы можем видеть, для границы каждого угла задано свое значение радиуса.
Кроме того CSS позволяет нам задать значение для границы каждого угла в виде короткой записи, которая будет выглядеть так:
Где значения будут следовать в таком порядке:
Border-radius: 5px /* верхний левый угол */ 10px /* верхний правый угол */ 15px /* нижний правый угол */ 20px /* нижний левый угол */;
Соответственно, исходя из выше сказанного, становится понятно, что таким же образом мы можем задать границу радиуса только для трех (одного или двух) углов:
Так это выглядит в веб-браузере:
Если Вы еще не совсем запутались, то продолжим. Дело в том, что радиус для каждой границы угла может быть указан не в одном значении, как мы рассматривали выше, а в двух. То есть два значения для каждого угла. В таком случае первое значение установит радиус для угла по горизонтали, а второе по вертикали. Давайте начнем сначала с одного угла:
В данном примере мы воздействовали только на левый верхний угол элемента:
Если расставить значения наоборот, тогда элемент станет выглядеть так:
На этом вроде бы можно было бы, и закончить, но нет. Есть еще одна хитрость. В значении свойства мы можем использовать слеш (/) между значениями. Слеш может помочь нам совместить значения с другими значениями. В общем проще показать, чем рассказать. Начнем с простого. Предположим, что нам необходимо, чтобы по горизонтали радиус был равен 35 пикселам, а по вертикали 5. При этом, чтобы данные значения относились ко всем углам. Тогда мы можем написать так:
И получить вот такой результат:
Теперь рассмотрим пример посложнее:
В данном случае значение до знака слеша (/) будет иметь отношение к горизонтальному радиусу угла, а после знака к вертикальному. При этом значения будут относиться друг к другу таким образом:
Border-top-left-radius: 20px 15px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 40px 15px; border-bottom-left-radius: 10px 25px;
А результат будет таким:
И в завершении статьи поговорим о поддержке различными браузерами данного свойства.
Закругление углов в различных веб-браузерах.
Здесь стоит отметить, что данное свойство поддерживается не всеми версиями браузеров. Свойство поддерживается в IE9 +, Firefox 4 +, Chrome, Safari 5 +, и Опера.
Но для некоторых браузеров версии, которых не поддерживают данное свойство, существуют нестандартные свойства, которые добавляют, так называемый префикс или приставку к свойству.
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-bottom-left-radius.
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.
При этом нам придется продублировать свойство, используя данные префиксы. Например, если у нас задано свойство для границы левого верхнего угла значение, которого равно пяти пикселам:
Border-top-left-radius: 5px;
Тогда свойство с дублированием его с помощью префиксов будет выглядеть так:
Webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius: 5px;
Очень надеюсь, что смог понятно все объяснить и Вам теперь понятно, как сделать закругленные углы, используя только CSS.
Удачи, Вам!
В интернете много примеров и руководств по закруглению углов у блока или таблиц, но, как правило, данные руководства основаны на использовании изображений или на использовании дополнительных блоков.
В сегодняшнем руководстве я покажу, как можно закруглить углы таблицы, используя только CSS .
Непосредственно разметка (Вторая таблица отличается компоновкой ячеек в верхней строке):
| Nulla gravida. | Urna augue. | Nunc iaculis bibendum. | |
| Vestibulum tempor | Laoreet eros semper ut. | ||
| Vivamus quis nisi lacus. | Cras id felis eu purus tempor dictum in at lorem. | facilisis iaculis magna diam id quam. eleifend. | Pellentesque cursus, nunc ut facilisis hendrerit |
1. Закругляем углы непосредственно у таблицы (тег table).
BContentTables{ border:1px solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius: 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ overflow:hidden; margin:0.7em auto; }
2. Убираем любой фон у первой строки.
Tr.bCTable_Header {background: none;}
3. При помощи псевдокласса:first-child и комбинатора > выбираем первую ячейку в таблице. Закругляем у первой ячейки левый верхний угол. Фон первой строки складывается из фона ячеек данной строки.
Tr.bCTable_Header:first-child > td:first-child{ border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms-border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; } tr.bCTable_Header td{ color:white; font-size:110%; background-color:#00843C;}
4. При помощи псевдокласса:last-child и комбинатора > выбираем последнюю ячейку в первой строке. Для нее закругляем правый верхний угол.
Tr.bCTable_Header:first-child > td:last-child{ border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms-border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0; }
5. У последней строки закругляем нижние углы. Не забудьте удалить фон у последней строки; фон строки задается посредством фона ячеек последней строки.
BContentTables tr:last-child{ border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; background:none; }
6. Затем по аналогии с пунктами 3-4 в последней строке закругляем углы у первой и крайней ячейки.
BContentTables tr:last-child td{background-color:#F1F1F2;} .bContentTables tr:last-child td:first-child{ border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;} .bContentTables tr:last-child td:last-child {border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border-radius:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0; }
