Сегодня вторая часть курса CSS3 для начинающих. Речь сегодня пойдет об оформлении фонов и границ с помощью CSS3. Вы узнаете как создавать закругленные границы, закругленные границы с картинкой. На конкретных примерах вы сможете увидеть реализации данных свойств.
[adsense]
Содержание:
1. border-radius: Закругление границ
2. border-image: использование изображений для построения границ
3. background-clip
4. background-origin
5. Фон из нескольких картинок
6. background-attachment
7. box-shadow
8. border-radius
Border-radius: Закругление границ.
Свойство CSS3 border-radius
позволяет веб разработчикам с легкостью использовать закругленные края в дизайне. Вам больше не придется применять специальных изображений с закругленными краями, или создавать многоблочную структуру с использованием div
‘ов.
Впервые данное свойство было анонсировано в 2005 года. С того времени border-radius
стал активно поддерживаться браузерами и многие веб разработчики стали применять это свойство в своих дизайнах.
Приведем простой пример использования border-radius
:
#example1 {
border-radius: 15px;
}
Но к сожалению — это будет идеальный варинат использованияс свойства border-radius
. На практике придется добавить конструкцию -moz-
для поддержки свойства браузером Mozilla Firefox. Итоговый код будет выглядеть так:
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
Давайте разберемся как это работает.
Закругленные края можно задать отдельно используя четыре индивидуальных свойства border-*-radius
(border-bottom-left-radius, border-top-left-radius, и т.д.) или для всех краев одновременно используя короткий синтаксис border-radius
.
border-bottom-left-radius, border-bottom-right-radius
border-top-left-radius, border-top-right-radius
Синтаксис:
border-*-*-radius: [ length | < %> ] [ length | < %> ]
Примеры:
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
Свойство border-*-radius может принимать один или два аргумента. Это вертикальный и горизонтальный радиусы четверти эллипса. Когда же задано только одно значение оно используется для обоих параметров.
На следующей диаграмме приведены несколько вариантов закругленных углов:
Если значения обоих параметров нули, то угол будет прямоугольным.
border-radius
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;
В первом случае мы задаем 2 полных набора параметров. Первые четыре параметра задают горизонтальный радиус для всех углов. Следующие четыре параметра после слэша (/) задают вертикальный радиус для всех углов. Если имеется только один набор параметров, то он применяется для задания и горизонтального радиуса и вертикального радиуса для всех четырех углов.
Поддержка браузерами.
На данный момент border-radius поддерживается всеми современными браузерами без необходимости использования дополнительных конструкций (Firefox4, Opera 11, IE9, Google Chrome 8, Safari 5).
Версии IE6, 7, 8 — не имеют поодержки.
Mozilla Firefox ниже версии 3.6 — требует префикса -moz-.
Safari и Google Chrome ниже версии 5 — требуют префикса -webkit-.
Кроссбраузерные примеры:
#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;
}
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 организована в браузерах Safari, Google Chrome и Firefox 3.1+.
Пример использования:
border-image: url(border.png) 27 27 27 27 round round;
или
border-image: url(border.png) 27 27 27 27 stretch stretch;
background-clip
Свойство background-clip
отвечает за расположение изображения, будет оно накрываться рамкой или нет. Есть два значения этого свойства — border-box
и padding-box
. Когда используется border-box
, то изображение будет находится под рамкой. Другой вариант padding-box
— фоновое изображение не будет растягиваться до границ, а будет находиться как бы внутри рамки.
Более понятно станет, когда вы взгляните на схематичное изображение:
background-origin
Свойство background-origin
определяет область позиционирования фонового рисунка. Оно может принимать 3 значения:
- padding-box — фоновое изображение позиционируется относительно края элемента внутри границы
- border-box — фоновое изображение позиционируется относительно края элемента, но граница может быть перекрывать изображение
- content-box — фоновое изображение позиционируется относительно содержимого элемента
Фон из нескольких картинок
CSS3 позволяет делать фон из нескольких изображений. Делается это с помощью обычного свойства background-image
либо его сокращенным вариантом background
.
Если вы хотите использовать для фона несколько изображений, возможно использование такого кода:
background:
url(rose.png) no-repeat 150px -20px,
url(driedrose.png) no-repeat,
url(fieldsky.jpg) no-repeat;
Перечисление изображений начинается с того, которое будет ближе к зрителю. Далее то, которое будет располагаться за первым и так далее.
Есть и другой вариант кода:
background-image: url(left.png), url(right.png), url(main.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: left top, right top, left top;
Здесь свойства задаются отдельно, группами. Сначала мы задаем адреса для изображений, далее устанавливаем режим повторения и в конце определяем начальное положение.
Таким образом чаще всего эмитируют закладки.
background-attachment
Свойство background-attachment
устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Имеется три значения для этого свойства:
- fixed — делает фоновое изображение элемента неподвижным
- scroll — позволяет перемещаться фону вместе с содержимым
- inherit — наследует значение родителя
Посмотреть как работает данное свойство можно вот в этом демо http://people.opera.com/pepelsbey/experiments/bga/.
box-shadow
Свойство box-shadow
позволяет создавать тень у элементов.
Параметры:
- Первый параметр задает смещение тени относительно элемента по горизонтали. Если использовать отрицательное значение, то тень будет отбрасываться влево.
- Второй параметр — смещение относительно элемента по вертикали. Отрицательное значение дает тень сверху.
- Третий параметр задает радиус размытия тени. Чем он больше — тем тень более размыта.
Так же вы можете задать растяжение — растягивает тень, и цвет — задает цвет тени.
Возможно при задании цвета использовать RGBA.
Вот несколько примеров:
box-shadow: 10px 10px 20px #000;
box-shadow: 10px 10px 1px #000;
/* Значение параметра радиус размытия 1 */
box-shadow: 10px 10px 20px #FE2E2E;
border-radius: 20px;
/* Тень улучшена с использованием розового и закруглением краев при помощи border-radius */
box-shadow: 20px 20px 10px 10px;
/* Параметр растягивания установлен в 10, что существенно увеличило тень*/
box-shadow: -10px -10px 20px inset;
/* Использование параметра inset создает - внутреннюю тень */
border-radius
Теперь используя border-radius
мы можем создавать закругленные края для наших элементов. border-radius
— это сокращенный вариант свойства. Мы можем использовать четыре свойства для каждого угла:
- border-top-left-radius
- border-bottom-left-radius
- border-top-right-radius
- border-bottom-right-radius
Вот несколько примеров:
border-radius: 25px;
/*все 4-ре угла закруглены одинаково*/
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
/*закруглены только нижние углы*/
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/*нижние и верхние углы закруглены с разным радиусом*/
border-radius: 120px 20px;
/*Сокращенный вариант: 120px - закругление для левого верхнего и правого нижнего углов
и 20px для левого нижнего и правого верхнего углов*/
border-radius: 120px / 20px;
/*закругление углов по оси х на 120 px, по оси y на 20px*/
background: url(image/japanese_tile.jpg);
border-radius: 30px;
/*закругление углов на 30px и с использованием фонового изображения*/
На этом вторая часть нашего марафона по CSS3 подошла к концу. Надеюсь не сильно перегрузил вас информацией. В самое ближайшее время организую поддомен, на котором реализую все примеры для наглядности.
Вам требуется многоканальный номер способный принимать неограниченное количество звонков одновременно? Тогда виртуальный номер Mango-Office это то, что вам нужно: номер не привязан к месту расположения оффиса, единый номер для нескольких офисов, многоканальность, большой выбор красивых виртуальных номеров и многое другое.
классная статья! благодарю автора! 🙂 уже поставил кое что на свой сайт.