CSS3 Анонсы borders

Border-color

Как создать цветные границы с CSS3.

W3C предложила новые варианты границ в CSS3, из которых, наряду с rounded borders, border-color тоже очень интересен. Mozila/Firefox реализовал эту функцию, которая позволяет создавать классные цветные границы. Пример:

Mozilla / Firefox пользователи должны увидеть красивое выцветание серой границы на этом поле ...

Код CSS для этого:

border: 8px solid #000; 
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
padding: 5px 5px 5px 15px;

 

И конечно, вы можете сделать цвет интересней:

Mozilla / Firefox пользователи должны увидеть красивое выцветание красной каймы на этом поле ...

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.

Остальные поддерживают полностью.

 

Border-image

Граничное оформление: с помощью изображений для границы.

Еще одной интересной новой функцией оформления границ в CSS3 является свойство border-image . С помощью этой функции вы можете определить изображение, которое будет использоваться вместо нормальной границы элемента. Эта функция фактически разделилась на пару свойств: border-image и border-corner-image. Эти два значения сокращения от:

border-image :
border-top-image
border-right-image
border-bottom-image
border-left-image


border-corner-image :
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

 Синтаксис следующий:

border-image: url(border.png) 27 27 27 27 round round;

 

Или:

border-image: url(border.png) 27 27 27 27 stretch stretch;

Браузеры

Firefox с версии 4.0 поддерживает свойство -moz-border-image.

Safari 5 и Chrome поддерживают свойство -webkit-border-image.

Opera с версии 10.5 поддерживает свойство -o-border-image.

 

Border-radius

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

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

Вот простой пример: этот блок должен иметь закругленные углы в Firefox, Safari / Chrome, Opera и IE9.

Код для этого примера, в теории, весьма прост:

#example1 { 
  border-radius: 15px; 
  }

Тем не менее, на данный момент, вы также должны использовать -moz- префикс для поддержки Firefox:

#example1 { 
  -moz-border-radius: 15px; 
  border-radius: 15px; 
  }

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

Мы будем иметь дело с синтаксисом для отдельных border-*-radius свойствами, не обращая внимания на то, как работает сокращенное свойство border-radius.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

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

Синтаксис:

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

Примеры:

border-top-left-radius: 10px 5px; 
 border-bottom-right-radius: 10% 5%; 
 border-top-right-radius: 10px;

Если используются два значения, то они используются для определения, по порядку, горизонтальных и вертикальных радиусов четверти эллипса, которая, в свою очередь, определяет кривизну угла внешнего края границы.

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

Следующая диаграмма дает несколько примеров того, как могут сказаться на углах данные различных радиусов:

Если какое-либо значение равно нулю, угол будет квадратным, а не круглым.

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

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Примеры:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; 
 border-radius: 5px; 
 border-radius: 5px 10px / 10px;

Первый набор (1-4) параметров определяет горизонтальные радиусы для всех четырех углов. Опциональный второй набор параметров, которым предшествует '/', определяет вертикальные радиусы для всех четырех углов. Если указывается только один набор значений, они используются для определения как вертикальных и горизонтальных радиусов в равной степени.

Для каждого набора значений для следующих условий:

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

Браузеры

В настоящее время Opera (версии 10.5 и далее), Safari (версии 5 и далее) и Chrome (версии 5 и далее) поддерживают отдельные border-*-radius свойства и сокращенное свойство border-radius, как изначально определенные в текущей спецификации W3C (хотя есть все еще не устраненные ошибки в таких вопросах, как стиль перехода границы, используя проценты длины и т.д.).

Mozilla Firefox (версии 1.0 и далее) поддерживает border-radius с -moz-префиксом, хотя есть некоторые расхождения между реализацией в Mozilla и текущей спецификацией W3C (см. ниже).

Обновление: Firefox последних, более поздних версий, поддерживает border-radius без -moz-префикса.

Safari и Chrome (и другие браузеры на базе WebKit) поддерживают border-radius с -WebKit-префиксом, начиная с версии 3 (-WebKit-префикс не нужен, начиная с версии 5 и далее), хотя опять же с некоторыми отклонениями от текущей спецификации.

Даже Microsoft пообещали, и продемонстрировали в своем недавнем выпуске предварительного просмотра, поддержку border-radius Internet Explorer 9 (без префикса).

-moz-префикс

Браузер Firefox от Mozilla поддерживает свойство border-radius с -moz-префиксом, начиная с версии 1.0. Однако, только начиная с версии 3.5, браузер позволил эллиптические углы, то есть принимать два значения для угла, чтобы определить горизонтальные и вертикальные радиусы отдельно. До версии 3.5, браузер принимал только по одному значению для угла, в результате чего с равными углами горизонтального и вертикального радиусов.

Синтаксис, начиная с Firefox 3.5, для основной части спецификации W3C, как описано в этой статье, следует добавлять префикс -moz-. Основное различие заключается в именовании отдельных border-*-radius свойств, с-moz-префиксом следующие свойства именуются несколько иначе:

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

Примеры кросс-браузерности

Вот несколько основных примеров, которые должны работать в текущих версиях Firefox, Safari / Chrome, Opera и даже IE9:

 

 #Example_A { 
  height: 65px; 
  width:160px; 
  -moz-border-radius-bottomright: 50px; 
  border-bottom-right-radius: 50px; 
  } 

 #Example_B { 
  height: 65px; 
  width:160px; 
  -moz-border-radius-bottomright: 50px 25px; 
  border-bottom-right-radius: 50px 25px; 
  } 

 #Example_C { 
  height: 65px; 
  width:160px; 
  -moz-border-radius-bottomright: 25px 50px; 
  border-bottom-right-radius: 25px 50px; 
  } 

 #Example_D { 
  height: 5em; 
  width: 12em; 
  -moz-border-radius: 1em 4em 1em 4em; 
  border-radius: 1em 4em 1em 4em; 
  } 

 #Example_E { 
  height: 65px; 
  width:160px; 
  -moz-border-radius: 25px 10px / 10px 25px; 
  border-radius: 25px 10px / 10px 25px; 
  } 

 #Example_F { 
  height: 70px; 
  width: 70px; 
  -moz-border-radius: 35px; 
  border-radius: 35px; 
  }

 

Box-shadow

box-shadow свойство позволяет разработчикам легко реализовать несколько теней (внешняя или внутренняя) на поле элементы с указанием значения для цвета, размера, размытия и смещения.

 Поддержка браузеров растет, за последнее время с Mozilla (Firefox), Webkit (Safari / Chrome / Konqueror), Opera и IE9 все предлагают достойную реализацию спецификаций, хотя Mozilla и Webkit по-прежнему требуют соответствующих -moz- и -webkit- префиксов (обратите внимание, Mozilla Firefox 4.0 + больше не требует -moz- префикс).

Вот простой пример:

#example1 {
 box-shadow: 10px 10px 5px #888;
 }

Но на данный момент, как и с многими другими «экспериментальными» CSS3 свойствами, вы должны будете использовать следующие префиксы для поддержки Mozilla и Webkit:

#example1 {
 -moz-box-shadow: 10px 10px 5px #888;
 -webkit-box-shadow: 10px 10px 5px #888;
 box-shadow: 10px 10px 5px #888;
 }

box-shadow может принимать через запятые список теней, каждая из которых определена на 2-4 значения длины (с указанием горизонтального смещения, смещения по вертикали, расстояние размытия и дополнительное расстояние распространения тени), дополнительное значение цвета и необязательный ‘inset‘ (чтобы создать внутреннюю тень, а не по умолчанию внешнюю).

Синтакс:

box-shadow: none | <shadow> [ , <shadow> ]*

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Пример:

box-shadow: 10px 10px;
 box-shadow: 10px 10px 5px #888;
 box-shadow: inset 2px 2px 2px 2px black;
 box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

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

Внешняя тень

#Example_A {
 -moz-box-shadow: -5px -5px #888;
 -webkit-box-shadow: -5px -5px #888;
 box-shadow: -5px -5px #888;
 } 



#Example_B {
 -moz-box-shadow: -5px -5px 5px #888;
 -webkit-box-shadow: -5px -5px 5px #888;
 box-shadow: -5px -5px 5px #888;
 } 



#Example_C {
 -moz-box-shadow: -5px -5px 0 5px #888;
 -webkit-box-shadow: -5px -5px 0 5px#888;
 box-shadow: -5px -5px 0 5px #888;
 } 



#Example_D {
 -moz-box-shadow: -5px -5px 5px 5px #888;
 -webkit-box-shadow: -5px -5px 5px 5px#888;
 box-shadow: -5px -5px 5px 5px #888;
 } 



#Example_E {
 -moz-box-shadow: 0 0 5px #888;
 -webkit-box-shadow: 0 0 5px#888;
 box-shadow: 0 0 5px #888;
 } 



#Example_F {
 -moz-box-shadow: 0 0 5px 5px #888;
 -webkit-box-shadow: 0 0 5px 5px#888;
 box-shadow: 0 0 5px 5px #888;
 }

 

Внутренняя тень

 

#Example_G {
 -moz-box-shadow: inset -5px -5px #888;
 -webkit-box-shadow: inset -5px -5px #888;
 box-shadow: inset -5px -5px #888;
 } 


#Example_H {
 -moz-box-shadow: inset -5px -5px 5px #888;
 -webkit-box-shadow: inset -5px -5px 5px #888;
 box-shadow: inset -5px -5px 5px #888;
 } 


#Example_I {
 -moz-box-shadow: inset -5px -5px 0 5px #888;
 -webkit-box-shadow: inset -5px -5px 0 5px#888;
 box-shadow: inset -5px -5px 0 5px #888;
 } 


#Example_J {
 -moz-box-shadow: inset -5px -5px 5px 5px #888;
 -webkit-box-shadow: inset -5px -5px 5px 5px#888;
 box-shadow: inset -5px -5px 5px 5px #888;
 } 


#Example_K {
 -moz-box-shadow: inset 0 0 5px #888;
 -webkit-box-shadow: inset 0 0 5px#888;
 box-shadow: inner 0 0 5px #888;
 } 


#Example_L {
 -moz-box-shadow: inset 0 0 5px 5px #888;
 -webkit-box-shadow: inset 0 0 5px 5px#888;
 box-shadow: inset 0 0 5px 5px #888;
 }

Наложения нескольких теней

 

#Example_M {
 -moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
 -webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
 box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
 }

Придать пикантность тени с RGBa цветом и границей радиуса

#Example_N {
 -moz-box-shadow: 5px 5px rgb(0,0,0);
 -webkit-box-shadow: 5px 5px rgb(0,0,0);
 box-shadow: 5px 5px rgb(0,0,0);
 } 


#Example_O {
 -moz-box-shadow: 5px 5px rgba(0,0,0,0.7);
 -webkit-box-shadow: 5px 5px rgba(0,0,0,0.7);
 box-shadow: 5px 5px rgba(0,0,0,0.7);
 } 


#Example_P {
 -moz-box-shadow: 5px 5px rgba(0,0,0,0.5);
 -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);
 box-shadow: 5px 5px rgba(0,0,0,0.5);
 }

Браузеры

Firefox до версии 4.0 поддерживает свойство -moz-box-shadow.

Safari и Chrome поддерживают свойство -webkit-box-shadow.

Internet Explorer до версии 9.0 не поддерживает свойство box-shadow, взамен можно использовать нестандартное свойство filter:
filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Здесь: offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Применение фильтра dropshadow дает четкую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow.
filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Здесь: direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.

 

test