В последнее время я пытался переосмыслить правила CSS, которые я принял в своей практике. Я написал огромное количество кода без реального понимания того, почему он работает именно так.
Я просто решал задачи определенным способом, основываясь на общепринятой практике. Но с недавних пор я задумался, могу ли я узнать хотя бы приблизительно причину, почему все работает так, а не иначе?
CSS круги на Rdio, Dribbble, и Codecademy
Такой трюк часто достигается использованием CSS свойства border-radius. Я решал эту задачу следующим образом - создавал квадрат и устанавливал border-radius в 50%. Я никогда не задавался вопросом, почему нужно делать именно так, я просто согласился с тем, что если установить радиус как половину высоты/ширины квадрата на всех углах, то я получу круг.
Рассмотрим пример. Пусть у нас есть квадрат размерами 150px на 150px, превратим его в круг, установив радиус для каждого угла в 50%. Согласно стандарту W3C в разделе о border-radius , процентные единицы для border-radius относятся к ширине и к высоте элемента. В моем примере, ширина/высота элемента составляет 150px, таким образом 50% вернет нам значение в 75px.
Преобразование квадрата в круг на CSS свойства border-radius (см. на CodePen)
Браузер также будет масштабировать все остальные углы, пока каждый угол не будет иметь радиус 50%, и мы не получим наш круг. Даже если вы укажете радиус в 150px для каждого угла, в действительности вы получите радиус в 75px, так как это максимальное значение которое позволяет установить браузер для каждого угла.
По крайней мере, это кажется довольно бессмысленным, если вы заранее знаете, что браузер в любом случае будет масштабировать радиусы до 50%. Использование 50% кажется верным решением.
А для меня время исправить расставленные мною случайные CSS свойства за последнею неделю…
Теги: css, border-radius
Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.
Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:
Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).
В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.
Подумайте, как при помощи CSS можно создать такую фигуру:
Значения границы - толщину, стиль и цвет - можно задать отдельно используя специальные свойства.
Рассмотрим каждое из значений по отдельности.
Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:
Примеры того, как они выглядят.
граница отсутствует (none)
сплошная граница (solid)
двойная граница (double)
граница из ряда точек (dotted)
пунктирная граница (dashed)
граница "бороздка" (groove)
граница "гребень" (ridge)
вдавленная граница (inset)
выдавленная граница (outset)
Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.
Блок div с рамкой чёрного цвета и стиля ridge.
Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.
При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.
Одно значение (solid) - стиль границы установлен для всех сторон блока.
Два значения (solid double) - первое значение установило стиль для верхней и нижней сторон, второе для боковой.
Три значения (solid double dotted) - первое значение для верхней стороны, второе для боковых, стретье для нижней.
Четыре значения (solid double dotted dashed) - каждое значение для одной стороны по часовой стрелке начиная с верхней.
Для установки толщины границы элемента используется свойство border-width . Толщину границы можно задать в любых абсолютных единицах измерения, например в пикселах.
Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.
Код примера:
Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:
Толщина границы: thin.
Толщина границы: medium.
Толщина границы: thick.
Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS ", а именно:
Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.
Одно значение (red).
Два значения (red black).
Три значения (red black yellow).
Четыре значения (red black yellow blue).
Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:
Вот код, который рисует такую фигуру, только побольше размером:
Выше упоминалось, что можно указать значения свойств границы только для одной стороны блока. Для этих целей есть свойства:
Напомню, для всех свойств указывается три значения (толщина, стиль и цвет) в любом порядке. Но существуют свойства, которые позволяют устанавливать толщину, цвет и стиль для каждой стороны отдельно. Написание этих свойст производно от вышеуказанных.
Параметры верхней границы (border-top ).
Параметры правой границы (border-right ).
Параметры нижней границы (border-bottom ).
Параметры левой границы (border-left ).
Пример использования этих свойств:
Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).
Значениями могут быть любые числа, используемые в CSS.
Свойство border-radius: 15px.
Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:
Свойство border-radius: 15px.
Существуют свойства для скругленя каждого отдельно угла элемента. В этом примере использованы они все:
Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;
Свойство border-radius: 15px.
Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.
Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.
Рисуем лимон средствами CSS.
Вот код такого блока:
Margin: 0 auto; /* Размещаем блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;
Мы уже рисовали фигуру:
Теперь оставим от неё треугольник:
Код треугольника такой:
Margin: 0 auto; /* Размещаем блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;
). Это делается с помощью свойства CSS border-radius . В этой статье мы рассмотрим все различные варианты.
Синтаксис CSS border-radius :
border-radius : [значение_скругления ];
Рассмотрим примеры скругления углов через CSS. Например
В этом случае все 4 края элемента будут скруглены по 30px.
Значение скругления означает то, какой радиус окружности должен быть в уголке.
Можно скруглять каждый угол с разными радиусами. Для этого нужно написать
border-radius : 10px 7px 0px 0px ;
Последовательность этих цифр следующая:
Например
Результат:
Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол
border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол
Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.
Задание второго радиуса нужно задавать через слэш "/" в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса
border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол
Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.
Например, с помощью этих свойств можно сделать эллипс:
Результат:
ПримечаниеЗначения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:
border-radius : 100px / 200px ;
Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.
Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :
border : [толщина ] [тип_линии ] [цвет ];
Например:
border : 1px solid #00ff00 ;
Приведем пример
Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.
Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow
box-shadow : 0px 0px 4px 2px #a0b ;
Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр - цвет (#a0b).
Например
Результат:
Мы приводили всегда в качестве примеров тег
Браузеры
Старые браузеры могут не поддерживать свойство border-radius
. Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :
-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;CSS свойства
CSS свойство border-radius позволяет определить форму границ элемента. Это свойство является короткой записью для следующих четырёх свойств:
Радиус скругления применяется ко всему заднему фону, либо фоновому изображению, заданными свойством background (даже если у элемента отсутствуют границы). Точное место отсечения определяется и задается значением свойства background-clip .
Свойство | Opera | IExplorer | Edge |
|||
---|---|---|---|---|---|---|
border-radius | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
CSS синтаксис:
border-radius: "1-4 length | 1-4 % | 1-4 length или 1-4 % / 1-4 length или 1-4 % | initial | inherit" ; /* Радиус применяется ко всем четырем углам (по типу дуги окружности) */ border-radius : 15px; /* 1-ое значение top-left и bottom-right, второе top-right и bottom-left */ border-radius : 15px 35%; /* 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */ border-radius : 14px 18px 50%; /* 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */ border-radius : 22% 11px 14px 15px; /JavaScript синтаксис:
Object.style.borderRadius = "5px"
Думаю, все знают, что сделать закругленные углы у блоков – большая проблема. Кросс-браузерного решения без применения JS костылей пока не существует. С релизом IE9 головной боли станет меньше, но если вы все еще кипятите верстаете под IE6/7, для вас это не станет спасением. Но даже если IE6/7 канут в лету, еще немало времени пройдет, пока мы забудем о 8-й версии этого браузера, который тоже не поддерживает параметр border-radius. Иными словами, сидеть на яваскриптовых стероидах наши сайты будут еще долго.
Статей на тему округлых форм написано немало, но все они (те, что я смог найти), умалчивают о тонкостях и нюансах применения фиксов для существующей проблемы. Я постараюсь перечислить все те трудности, с которыми мне пришлось столкнуться при использовании популярных решений.
Для начала, скажу пару слов о том, как изменяется ситуация с border-radius при выходе новых версий браузеров.
Во-первых, 4-я версия FireFox теперь не нуждается в своем собственном параметре -moz-border-radius. IE9, как я уже говорил, тоже реализует поддержку border-radius, во всяком случае, в RС версии она уже присутствует. В Opera все замечательно с версии 10.5.
Теперь решения для тех, кого Бог обделил.
И так, существует два наиболее известных и применяемых способа сделать border-radius кросс-браузерным . Первый из них – Curved-corner , использующий VML и behaviour . Второй – CSS3 PIE , который имеет две реализации. Одна также основана на VML и behaviour, вторая представляет из себя JavaScript библиотеку.
Рассмотрим оба решения.
Из плюсов я нашел только один – малый вес подключаемого border-radius.htc файла. Текущая версия реализации занимает всего 5кб. Против PIE, который весит 33 кб, безусловно, это значительное преимущество. Но на этом плюсы заканчиваются, во всяком случае для меня.
Минусов очень много. Например, не будет работать такая вот конструкция:
#selector { border: #c6c5c2 1px solid; border-top: none; border-radius: 0 0 6px 6px; background: #f0ecdf; behavior: url(border-radius.htc); }
Во-первых, нельзя убрать рамку с одной из сторон. То есть параметр border-top прибьет рамку вообще всего блока, хотя углы останутся закругленными. Забавно, но параметр border-bottom рамку оставит на месте, но эффекта никакого не даст, то есть бордер останется вокруг всего блока.
Во вторых, если вам необходимо обтесать всего два угла, как в примере, то вас ждет разочарование. Curved-corner такого не умеет. Он может закруглять только все углы блока и на равное значение радиуса. Углов с разным радиусом закругления добиться не получится. Правильные и рабочий вариант выглядит только так:
#selector { border: #c6c5c2 1px solid; border-radius: 6px; behavior: url(border-radius.htc); }
В-третьих, Curved-corner не работает для блоков, у которых в качестве фона задано изображение.
Ну последний неприятный момент – скорость работы. Углы закругляются далеко не сразу. С момента загрузки страницы и до того, как углы примут нужную форму, проходит около секунды. Визуально задержка очень заметна и хорошо бросается в глаза.
Были еще какие-то проблемы (читайте нюансы), но сейчас уже не припомню.
Резюмируя, можно сказать, что данный фикс подходит только для совсем простых задач. Хотя, как показывает практика, такие простые задачи попадаются редко.
Весит много, ничего не скажешь. Версия PIE 1.0 beta 4 занимает 33 кб, как в реализации.htc, так и js аналог. Но при этом CSS3 PIE лишен всех тех проблем с border-radius, которые есть у Curved-corner. Также мне значительно импонирует возможность использовать JS реализацию, которая не требует дополнительного кода в CSS и может цепляться на любой селектор (при использовании jQuery, например).
У CSS3 PIE задержка в отрисовке также присутствует (иногда нет), но значительно меньшая, чем в случае с Curved-corner. Она практически незаметна, что делает библиотеку весьма привлекательной и пригодной к использованию.
Ну и самое замечательное заключается в том, что CSS3 PIE исправляет проблему не только с border-radius , но и добавляет значительно количество свойств CSS3 в кривые майкрософтовские браузеры. Так, например, будут работать border-image и box-shadow, свойства работы с градиентами. Решается проблема прозрачности png и многое другое. Все это лихо компенсирует и объясняет размере CSS3 PIE.
Увы, но ни CSS3 PIE, ни Curved-corner не способны заткнуть собой все щели. Так, например, круглых углов вы не получите у тех элементов, которые изначально скрыты – имеют параметр display: none . Аналогично с параметром visible и его значением hidden . Могут возникнуть проблемы, если элемент позиционируется абсолютно. Увы, дать детальное описание ситуации не могу, так как не удалось повторить условия, при которых возникали проблемы, но помню, что проблемы определенно были.
Есть еще одна известная мне загвоздка. Для того, чтобы применить border-radius для элемента при наведении на него курсора мыши, например так:
A:hover { background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px }
Необходимо, чтобы этот элемент имел закругленные углы изначально, иначе эффекта не будет. То есть, в данном примере, должен быть селектор A, у которого также будет задан border-radius и border:
A { background: #fff; color: #000; border: #fff 1px solid; border-radius: 6px } a:hover { background: #ccc; color: #000; border: #ccc 1px solid; border-radius: 6px }
Лично для меня, безусловным фаворитом является CSS3 PIE. Действительно справляется со своей задачей и делает это достойно. Ко всему прочему, библиотека развивается. Это развитие сопровождается регулярным выходом новых версий, что весьма обнадеживает.