Сайт о телевидении

Закругленные углы в CSS можно сделать многими способами, очень многими, причем некоторые из них можно считать уже устаревшими, так как в CSS 3 появились новые свойства, позволяющие закруглять углы у HTML-элементов. Однако, во-первых, старые браузеры не поддерживают эти свойства, а во-вторых, в креативном мозгу дизайнера порой рождаются такие идеи, что только старые способы и спасают. Поэтому здесь мы рассмотрим несколько различных вариантов позволяющих сверстать закругленные углы в CSS: от самых простых - до довольно сложных.

В данных примерах углы закругляются у изначально блочных элементов, также в некоторых примерах эти блоки задействуются в качестве вспомогательных элементов. Но помните, что вы с легкостью можете проделать то же самое и с элементами уровня строки, предварительно задав им со значением block или inline-block, если это необходимо.

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

В этом примере используются свойства из CSS 3, которые позволяют без проблем закруглять углы без помощи изображений.

Пример HTML и CSS: закругление углов с помощью CSS 3 без изображений

сайт - Закругляем углы на CSS 3 без использования изображений .block { color: #fff; /* цвет текста */ background: #39c; /* фон блока */ border: 3px #c33 solid; /* стили рамки */ -moz-border-radius: 10px; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px; /* закругление для старых Chrome и Safari */ border-radius: 10px; /* закругление углов для всех, кто понимает */ padding: 5px; /* внутренние отступы */ } Содержимое блока.

Описание примера

Для закругления углов используем свойство CSS 3 , которое понимают все современные браузеры.

Для старых браузеров Firefox, Chrome и Safari применяем специальные свойства с префиксами -moz- и -webkit- , которые появились у них еще до поддержки основного свойства. К сожалению, для старых Opera и IE нет подобных аналогов. Обратите внимание, что при создании сложных закруглений, свойства с приставками могут не совсем правильно работать. Именно поэтому в CSS-коде они были указаны выше, чем основное свойство, чтобы согласно приоритетов стилей , браузеры, которые уже понимают «чистый» , использовали именно его.

Свойства с префиксами отсутствуют в спецификации CSS, поэтому их использование приведет к невалидному коду.

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

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

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

Пример HTML и CSS: закругление углов без использования изображений

сайт - Закругляем углы в CSS без изображений body { background: #fff; /* фон страницы */ color: #000; /* цвет текста */ } .block { width: 300px; /* ширина основного блока */ } .b1, .b2, .b3 { background: #6f6; /* фон элементов, используемых для закругления */ font-size: 0; /* обнуление шрифта (для старых браузеров) */ overflow: hidden; /* обрезаем все, что выходит за границы (для старых браузеров) */ } .b1 { height: 2px; /* высота первого блока для закругления углов */ margin: 0 1px; /* боковые поля */ border-left: #c00 1px solid; /* левая граница рамки */ border-right: #c00 1px solid; /* правая граница рамки */ } .b2 { height: 1px; margin: 0 2px; border-left: #c00 2px solid; border-right: #c00 2px solid; } .b3 { height: 1px; margin: 0 4px; background: #c00; } .content_block { height: 50px; /* высота блока с контентом */ background: #6f6; /* фон */ border-left: #c00 1px solid; border-right: #c00 1px solid; padding: 0 15px; /* внутренние отступы */ } Содержимое блока.

Описание примера

Внутри блока с class= "block" указываем элемент для основного содержимого ("content_block" ) перед которым ставим блоки для имитации закругления углов ("b1" , "b2" , "b3" ). После него мы ставим их же, но в обратной последовательности.

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

В этом примере кроме закругления углов была еще добавлена и имитация рамки, если она вам не нужна, то просто уберите у элементов все «бордеры», а у блока "b3" уберите фоновый цвет.

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

Пример HTML и CSS: закругление углов с использованием одного изображения

сайт - Закругляем углы в CSS с помощью картинки body { background: #fff; /* цвет фона страницы */ } .block { width: 130px; /* ширина блока */ height: 22px; /* высота */ text-align: center; /* центровка текста */ font: bold 18px Arial, sans-serif; /* стили шрифта */ color: #fff; /* цвет текста */ background: #099 url("images/menu.png") no-repeat; /* фоновое изображение с закругленными углами */ padding: 5px; /* внутренние отступы */ } МЕНЮ

Описание примера

С помощью свойства CSS задаем блоку фоновое изображение, которому запрещаем размножение по вертикали и горизонтали (no-repeat), так как в данном случае это не требуется.

Чтобы текст внутри блока не прилегал к его краям, устанавливаем у него внутренние отступы (CSS ) по 5px с каждой стороны.

Далее необходимо задать блоку такие же размеры, как и у фона. Фоновая картинка у нас имеет размеры 140x32 пикселя, однако самому блоку указываем ширину (CSS ) и высоту (CSS ) с уменьшением на 10px. Уменьшить пришлось из-за тех самых внутренних отступов, которые тоже расширяют элемент на 5px в каждую сторону.

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

Такой прием очень часто используется для закругления однострочных элементов, таких как ссылки или названия разделов/меню.

Пример HTML и CSS: закругление углов с использованием боковых блоков

сайт - Закругляем углы в CSS с помощью боковых блоков .block { height: 22px; /* высота основного блока */ position: relative; /* относительное позиционирование */ text-align: center; /* текст по центру */ font: bold 18px Arial, sans-serif; /* стили шрифта */ background: #3cf url("images/center.png") 0 0 repeat-x; /* фон */ padding: 5px 15px; /* внутренние отступы */ } .left_bok, .right_bok { width: 14px; /* ширина боковушек */ height: 32px; /* высота */ font-size: 0; /* обнуление размера шрифта для старых браузеров */ overflow: hidden; /* тоже для старых браузеров */ position: absolute; /* абсолютное позиционирование */ top: 0; /* нулевое смещение сверху */ } .left_bok { background: url("images/left_bok.png") 0 0 no-repeat; /* фон левой боковушки */ left: 0; /* нулевое смещение слева */ } .right_bok { background: url("images/right_bok.png") 0 0 no-repeat; /* фон правой боковушки */ right: 0; /* нулевое смещение справа */ margin-left: 100%; /* для IE6 */ left: -14px; /* для IE6 */ } Основное содержимое.

Описание примера

Внутрь блока class= "block" помещаем два элемента - "left_bok" и "right_bok" , которым в качестве фона (CSS ) задаем изображения боковых частей и запрещаем им размножение (no-repeat). Самому основному блоку задаем фон из центральной части и разрешаем ему дублироваться только по горизонтали (repeat-x).

Указываем для боковых блоков ширину, соответствующую размеру фона, у нас это 14x32 пикселя. А вот основному блоку, как и в предыдущем примере, задаем высоту равную 22px, чтобы компенсировать вертикальные отступы.

Позиционировать наши боковушки будем относительно "block" , поэтому указываем у него :relative, а у самих боковушек - absolute. Ну а потом прижимаем их к соответствующим сторонам родителя с помощью свойств CSS , и .

Чтобы содержимое блока не скрывалось под боковыми картинками, устанавливаем у "block" боковые внутренние отступы (CSS ), которые могут быть равны или немного больше самих боковушек. Также задаем небольшие отступы сверху и снизу, чтобы текст «не прилипал» к краям.

В IE6 образуется небольшой баг с этим способом:

Если ширина или высота у "block" будет нечетной, то между внутренним краем блока и правой позиционированной боковушкой появится неприятный отступ в 1px, который будет портить всю картину. Этот баг можно исправить, использовав CSS хак с определенным expression, но я даже не буду здесь приводить такой пример, так как он часто «подвешивает» браузер и лучше его не применять.

Поступим по-другому. Зададим "right_bok" левое поле (CSS ) размером в 100%, чтобы он сместился за правую границу основного блока, а затем вернем его обратно, сместив влево на число пикселей равных его ширине. Со значениями этих свойств IE6 работает правильно, поэтому ему ничего не остается, как поставить блок там, где нам надо.

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

Пример HTML и CSS: закругление углов с использованием боковых псевдоэлементов

сайт - Закругляем углы в CSS с помощью боковых псевдоэлементов .block { height: 18px; position: relative; text-align: center; font: bold 16px Arial, sans-serif; background: #9cc url("images/center.png") 0 0 repeat-x; padding: 7px 26px; } .block:before, .block:after { width: 26px; height: 32px; font-size: 0; overflow: hidden; position: absolute; top: 0; } .block:before { content: url("images/left_bok.png"); /* изображение левого бока */ left: 0; } .block:after { content: url("images/right_bok.png"); /* изображение правого бока */ right: 0; } .block { z-index: expression(runtimeStyle.zIndex = 1, innerHTML = "" + innerHTML + ""); } Основное содержимое.

Описание примера

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

Ну а дальше мы проделываем все абсолютно то же самое, что и в предыдущем примере, только работаем уже с созданными псевдоэлементами.

Для IE6 и IE7 в этом примере были задействованы «костыли»:

Как вы знаете, IE6 и IE7 не понимают использованные здесь псевдоэлементы, поэтому делаем следующее. Применяем expression, который интегрирует внутрь основного элемента два тега , а уже им мы задаем такие же стили, что и в предыдущем примере. Обратите внимание, что внедряемый код, идущий после первого innerHTML , добавляется сразу после открывающего тега "block" , а после второго innerHTML - перед закрывающим тегом. Да, в нашем случае это значения не имеет, так как используется абсолютное позиционирование, но иногда об этом полезно знать.

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

Закругленные углы в CSS с помощью обертывания блоками

Суть этого способа заключается в том, что сначала у изображения вырезаются уголки. Затем внутрь основного блока помещается еще несколько блоков (по количеству уголков), которые вложены друг в друга. Каждому из них в качестве фона задается один уголок-изображение. Изображениям запрещают размножение и задают координаты, чтобы они заняли места по углам блоков. Таким образом и получается эффект закругленных углов.

Пример HTML и CSS: закругление углов с использованием обертывания блоками

сайт - Закругляем углы в CSS с помощью обертывания блоками body { background: #fff; /* фон страницы */ color: #000; /* цвет текста */ } .lt { background: #f93 url("images/corn_lt.png") 0 0 no-repeat; /* фон для верхнего левого угла */ } .rt { background: url("images/corn_rt.png") 100% 0 no-repeat; } .lb { background: url("images/corn_lb.png") 0 100% no-repeat; } .rb { background: url("images/corn_rb.png") 100% 100% no-repeat; padding:15px; /* внутренние отступы */ } Содержимое блока.

Описание примера

Внутрь основного блока помещаем еще четыре. Так как ни у одного из этих блоков не установлены поля или рамки, а отступы есть только у самого внутреннего, то по высоте и ширине все они оказываются равны.

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

Добавляем самому внешнему блоку с уголком нужный фоновый цвет. Все, готово.

Задать явно ширину блока можно, указав нужное свойство у class= "block" , однако для изменения высоты надо использовать самый внутренний элемент (у нас это "rb" ).

Закругленные углы в CSS с помощью позиционирования

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

Пример HTML и CSS: закругление углов с использованием позиционирования

сайт - Закругляем углы в CSS с помощью позиционирования body { background: #fff; color: #000; } .block { position: relative; /* относительное позиционирование */ background: #9cf; /* цвет фона */ padding: 15px; /* внутренние отступы */ zoom:1; /* для IE6, не проходит валидацию */ } .corn_lt, .corn_rt, .corn_lb, .corn_rb { width: 11px; /* ширина блоков с уголками */ height: 11px; /* высота */ position: absolute; /* абсолютное позиционирование */ font-size: 0; /* нулевой размер шрифта */ overflow: hidden; /* скрываем все, что может выйти за пределы блоков */ } .corn_lt { background: url("images/corn_lt.png") no-repeat; /* фон левого верхнего угла */ left: 0; /* слева */ top: 0; /* сверху */ } .corn_rt { background: url("images/corn_rt.png") no-repeat; right: 0; /* справа */ top: 0; /* сверху */ } .corn_lb { background: url("images/corn_lb.png") no-repeat; left: 0; /* слева */ bottom: 0; /* снизу */ } .corn_rb { background: url("images/corn_rb.png") no-repeat; right: 0; /* справа */ bottom: 0; /* снизу */ } .corn_rt, .corn_rb { margin-left: 100%; /* для IE6 */ left: -11px; /* для IE6 */ } Содержимое блока.

Описание примера

Внутри основного элемента (class= "block" ) размещаем четыре тега с классами "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , которые будут выступать в качестве блоков-углов.

С помощью свойства CSS подключаем к каждому блоку-уголку свое фоновое изображение и задаем им ширину и высоту равную по размеру этим фоновым картинкам. На всякий случай обнуляем размер шрифта (CSS ) и делаем обрезание лишнего (CSS ).

Указываем для основного элемента относительное позиционирование (CSS :relative), так как позиционировать блоки-уголки будем относительно него, а для самих уголков - абсолютное (absolute).

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

В IE6 есть пара проблем с этим способом:

Если у "block" не указать явно ширину, то уголки слева не встанут на место. Причиной этого является наличие внутренних отступов у блока. Самый простой способ исправить проблему - убрать отступы и заключить основное содержимое "block" (без уголков) в дополнительный блок-обертку, а уже у обертки указать нужные отступы. Но я здесь сделал по-другому, включив layout с помощью свойства zoom :1, которое говорит IE6 отображать элемент в натуральный размер. Это свойство невалидно, поэтому, если вы решите использовать именно его, то рекомендую вам сделать подключение через условные комментарии .

Тот самый однопиксельный баг, который рассматривался выше. Но здесь зазоры могут образоваться не только между правыми уголками и правой стороной блока, но и внизу. И если от зазоров справа мы избавились, то с нижними так не получится. Выход - указывать явно четную ширину и высоту основного элемента. Можно задать и нечетные значения, но тогда надо будет установить расстояния смещений вниз и вправо равные не нулю, а -1px.

По сути, технология этого способа закругления углов в CSS такая же, как и в предыдущем, поэтому подробные комментарии тут будут опущены. Единственное отличие - вместо отдельных фоновых изображений-уголков здесь используется одна общая картинка-спрайт. Благодаря этому ускоряется загрузка сайта, ведь одно изображение «весит» меньше, чем четыре и к хостингу идет одно обращение вместо четырех.

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

Пример HTML и CSS: закругление углов с использованием позиционирования и спрайтов

сайт - Закругляем углы в CSS с помощью спрайта и позиционирования body { background: #fff; color: #000; } .block { position: relative; color: #000; background: #9cf; padding: 15px; zoom:1; /* для IE6, не проходит валидацию */ } .corn_lt, .corn_rt, .corn_lb, .corn_rb { width: 11px; height: 11px; position: absolute; background: url("images/corn_sprite.png") no-repeat; /* подключаем фоновое изображение-спрайт */ font-size: 0; overflow: hidden; } .corn_lt { background-position: 0 0; /* фон начинается с левого верхнего угла, без смещения */ left: 0; top: 0; } .corn_rt { background-position: -11px 0; /* смещение фона влево на 11px */ right: 0; top: 0; } .corn_lb { background-position: 0 -11px; /* смещение вниз на 11px */ left: 0; bottom: 0; } .corn_rb { background-position: -11px -11px; /* влево и вниз на 11px */ right: 0; bottom: 0; } .corn_rt, .corn_rb { margin-left: 100%; /* для IE6 */ left: -11px; /* для IE6 */ } Содержимое блока.

Описание примера

С помощью свойства CSS подключаем к блокам-уголкам фоновую картинку-спрайт, которая имеет округлую форму с размерами 22x22 пикселя (11х11 пикселей каждая четвертинка-уголок).

Используя свойство CSS , указываем координаты смещения фона. Например, значение -11px 0 означает, что фон будет смещен влево на 11px по оси X, а по оси Y смещен не будет. Таким образом, левая половина спрайта уходит за границу элемента и остается только правая. Но и нее видно лишь наполовину, так как в высоту она равна 22px, а высота самого блока-уголка всего 11px. Вот и получается, что при данном значении фоном элемента станет правая верхняя четверть спрайта.

С IE6 здесь те же проблемы, что и в предыдущем примере.

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

Сами закругления мы сделаем, используя псевдоэлементы созданные у основного блока, но без применения к ним позиционирования.

И еще один момент. В предыдущих примерах уголки вырезались вместе с фоном внутри, а это не всегда нужно, особенно, если предполагается, что фон у блока с закругленными углами будет неоднородным. Поэтому фон внутри рамки здесь был сделан прозрачным (это позволяет формат PNG) и когда вырезали уголки - их внутренняя часть тоже оказалась прозрачной. Если нужно, то подобный подход вы тоже можете использовать в предыдущих примерах.

Пример HTML и CSS: закругление углов с использованием псевдоэлементов

сайт - Закругляем углы в CSS с помощью псевдоэлементов body { background: #fff; /* фон страницы */ color: #000; /* цвет текста */ } .block { background: #9f9; /* фон блока */ border: 2px #00f solid; /* стили рамки */ padding: 15px; /* внутренние отступы */ } .block:before, .block:after { display: block; /* преобразуем псевдоэлементы в блоки */ height:11px; /* высота псевдоэлементов */ font-size: 0; /* обнуление размера шрифта */ overflow: hidden;/* обрезаем лишнее */ } .block:before { content: url("images/corn_lt.png"); /* левый верхний закругленный угол */ background: url("images/corn_rt.png") 100% 0 no-repeat; /* правый верхний угол в виде фона */ margin: -17px -17px 0 -17px; /* отрицательные поля */ } .block:after { content: url("images/corn_lb.png"); /* левый нижний закругленный угол */ background: url("images/corn_rb.png") 100% 0 no-repeat; /* правый нижний угол в виде фона */ margin: 0 -17px -17px -17px; /* поля */ } .block { zoom: 1; z-index: expression(runtimeStyle.zIndex = 1, innerHTML = "" + innerHTML + ""); } Содержимое блока.

background , и с помощь него же позиционируем их в правую сторону и запрещаем «размножение». Все, уголки готовы.

Так как у "block" мы указали внутренние отступы (CSS ), то псевдоэлементы, а соответственно и уголки, не находятся по углам блока, а отступают от краев на 15px. Чтобы это исправить, с нужных сторон задаем псевдоэлементам отрицательные поля (CSS ) для расположения их поверх отступов. Но поля делаем равными не 15, а 17px, это необходимо, чтобы накрыть рамку (CSS ), ширина которой равна 2px (15+2=17). Вот теперь все.

Для IE6 и IE7 мы здесь применили уже знакомые вам «костыли» с внедрением HTML-кода, так как эти браузеры не понимают используемые здесь псевдоэлементы:

С помощью expression интегрирует внутрь основного элемента два тега , которые тоже преобразуем в блоки. Затем помещаем в них по одному тегу . А дальше у этих тегов указываются те же свойства, что и у псевдоэлементов. Единственно, что им дополнительно добавляем свойство CSS :relative, без которого рамка перекрывает уголки.

Минус этого способа в том, что блоку с закругленными углами нельзя явно задать высоту, ведь если она будет превышать размеры содержимого, то нижние уголки не прижмутся к краям. Этого можно избежать, если все-таки заключить основное содержимое в еще один блок и высоту задавать ему.

Еще один пример закругления углов с псевдоэлементами и без дополнительных блоков

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

Пример HTML и CSS: закругление углов, где можно изменять высоту блока

сайт - Закругляем углы в CSS с помощью псевдоэлементов, где у блока можно задавать высоту body { background: #fff; color: #000; } .block { background: #fc9; border: 2px #093 solid; padding: 15px; /* внутренние отступы основного блока */ position: relative; /* относительное позиционирование */ height: 200px; /* высота блока */ } .block:before, .block:after { height: 11px; position: absolute; /* абсолютное позиционирование */ font-size: 0; overflow: hidden; right: -2px; /* смещение вправо */ left: -2px; /* смещение влево */ } .block:before { content: url("images/corn_lt.png"); background: url("images/corn_rt.png") 100% 0 no-repeat; top: -2px; /* смещение вверх */ } .block:after { content: url("images/corn_lb.png"); background: url("images/corn_rb.png") 100% 0 no-repeat; bottom: -2px; /* смещение вниз */ } .block { zoom: 1; z-index: expression(runtimeStyle.zIndex = 1, innerHTML = "" + "" + "" + "" + innerHTML); } Содержимое блока.

И снова для IE6 и IE7 добавляем внутрь основного блока несколько дополнительных элементов с помощью expression, а код закрываем в условные комментарии. Вот только в этот раз мы даже не будем пытаться эмулировать псевдоэлементы, а поступим проще.

Добавляем внутрь "block" четыре тега и применяем к ним позиционирование. А потом просто указываем им уголки-изображения в качестве фона и расставляем по углам основного элемента. То есть поступаем в точности так, как в одном из рассмотреных выше способов.

Чтобы избавиться от однопиксельного бага (о котором выше говорилось не раз) добавляем к правым элементам-уголкам левое поле (CSS ) со стопроцентным значением и отрицательное смещение равное -9px. Вообще, если помните, это смещение должно быть равно ширине блока-уголка (у нас это 11px), но не забывайте о рамке в 2px, которая у нас здесь есть - нам ведь надо положить уголки поверх нее (11px-2px=9px).

К слову сказать, на самом деле проще было бы все-таки эмулировать псевдоэлементы, как мы это сделали в предыдущем примере - так добавочный код был бы меньше. Но только не в IE6, для этого браузера понадобилось бы еще несколько «костылей» и, как следствие, пришлось бы писать два отдельных условных комментария - для IE6 и IE7, а это только раздуло бы код...

В Firefox этот способ работает корректно с версии 3.6, а в Opera - с версии 10.0, костыли для них я придумывать не стал, так как это малоактуально.

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

Как закруглить углы: свойство CSS3 border-radius

Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:

BorderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; }

Стиль, описанный выше, даст следующий результат на элементе размером 200×200 пикселей:

Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления - большое поле для фантазии! Пример:

BorderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; } .borderElement1 { background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; }

Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:

BorderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; }

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

• border-top-left-radius - для верхнего левого угла;
• border-top-right-radius - для верхнего правого угла;
• border-bottom-left-radius - для нижнего левого угла;
• border-bottom-right-radius - для нижнего правого угла.

Принцип скругления углов

На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, - например, 20px , - это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса - 30px , а второе - длиной вертикальной полуоси - 20px:

Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

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

Вы можете воспользоваться теми же сервисами, какими мы пользовались для . Сервисы готовых открытокСоздать открытку 8 марта онлайн

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

Canva - известный многим функциональный фоторедактор. Здесь вы найдете множество шаблонов. Нужна регистрация.

Printclick Если у вас свой бизнес, то вы можете заказать партию открыток с логотипом и контактами своей компании. Воспользоваться же вы можете генератором открыток princlick. Отличная рекламная акция и недорого.

Crello - редактор, в котором нужна регистрация. Не пугайтесь английского языка, в настройках можно переключится на русский.

Онлайн-открытка - для тех, у кого хорошо развита фантазия, так как создавать открытку придется с чистого листа.

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

Я надеюсь, что воспользовавшись одним из этих генераторов, вы сможете достойно поздравить своих дам с 8 марта!

Автор: Иванова Наталья 2019-02-17

Содержание статьи:

Google Plus закрывается Платформа Google Plus не оправдала надежд разработчиков и будет удалена полностью уже 2 апреля 2019 года. Вместе с ней исчезнут связанные с ней альбомы в Google Фото, станут недоступными авторизации на сайтах с аккаунтом Google Plus. Уже с 4 февраля стала недоступной функция создания профилей Google Plus, каналов и страниц. Если на вашем аккаунте хранился ценный контент, то вы можете скачать резервную копию .
Больше всех изменения коснутся блогеров, ведущих свои блога на Blogspot. Станут недоступны некоторые виджеты G+, комментарии G+, а также профиль Google +. Об этом сказано в уведомлении в админке Blogger:
После объявления о прекращении работы API Google+, которое запланировано на март 2019 года, 4 февраля будет внесен ряд изменений в интеграцию Blogger с Google+.
Виджеты Google+. В дизайне блогов больше не будут поддерживаться виджеты "Кнопка +1", "Подписчики Google+" и "Значок Google+". Из вашего блога будут удалены все экземпляры этих виджетов.
Кнопки +1. Будут удалены кнопки +1 и G+, а также ссылки "Опубликовать в Google+" под записями в блоге и на панели навигации.
Обратите внимание, что, если вы используете пользовательский шаблон, в котором есть функции Google+, его может быть необходимо изменить. Обратитесь за рекомендациями к тому, кто предоставил вам этот шаблон.
Google+ Комментарии. Будет прекращена поддержка комментариев с использованием Google+, а для всех блогов, которые используют эту функцию, будут восстановлены стандартные комментарии Blogger. К сожалению, комментарии, размещенные через Google+, невозможно перенести в Blogger, поэтому они больше не будут отображаться в вашем блоге. Удаление комментариев Google Plus К сожалению, комментарии, которые были опубликованы в системе будут удалены безвозвратно. Вы лишь можете воспользоваться тем же инструментом https://takeout.google.com , чтобы сказать резервную копию комментариев от Google + на свой компьютер. Только загрузчика для него не предусмотрено и восстанавливать комментарии вам можно только вручную достаточно кривым способом. Хорошо, что я в свое время вовремя .Как заменить профиль гугл плюс профилем Блоггер Если вы ведете блог на Blogspot, то целесообразно сейчас вернуться с профиля Гугл Плюс на профиль Blogger (для тех, кто переключился на гугл плюс в своё время). Рекомендую сделать это прямо сейчас во избежании непредвиденных ситуаций, которые могут происходить при удалении аккаунтов Google Plus. Как вернуть профиль Blogger Сделать это просто в настройках админки Blogger:
Настройки –> Пользовательские настройки –> Профиль пользователя – здесь выберите Blogger

Сохраните изменения.

Подтвердите переход на и задайте свое имя или никнейм.

Не забудьте загрузить аватар в вашем профиле Blogger.

Как удалить профиль гугл плюс Если вы решили раз и навсегда избавиться от профиля Г+, то перейдите на свою страницу гугл плюс –> Настройки –> прокрутите страницу до конца вниз –> удалить аккаунт гугл плюс:

Автор: Иванова Наталья

Сегодня расскажу что такоеCSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека.
CSS – это стили, в которых прописываются свойства объекта. Значит, они есть во всех существующих движках, если вы их не можете найти, значит либо не там смотрите, либо их действительно нет (кривой сайт ). Где же они обычно найти? Обычно это корень сайта, название файла style.css, хотя, в принципе, название не так важно, как расширение.css, если файл с таким расширением – это файл стилей.
Смотрите также на моём блоге.

Где их искать? Путь к файлу приписывают в шаблоне между