CSS3 для начинающих. Часть 2. Бэкграунды (фоны) и границы

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

Содержание:

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

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-image1
или

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

border-image2

—>В начало

 

background-clip

Свойство background-clip отвечает за расположение изображения, будет оно накрываться рамкой или нет. Есть два значения этого свойства — border-box и padding-box. Когда используется border-box, то изображение будет находится под рамкой. Другой вариант padding-box — фоновое изображение не будет растягиваться до границ, а будет находиться как бы внутри рамки.
Более понятно станет, когда вы взгляните на схематичное изображение:

background-clip
background-clip
—>В начало

 

background-origin

Свойство background-origin определяет область позиционирования фонового рисунка. Оно может принимать 3 значения:

  • padding-box — фоновое изображение позиционируется относительно края элемента внутри границы
  • border-box — фоновое изображение позиционируется относительно края элемента, но граница может быть перекрывать изображение
  • content-box — фоновое изображение позиционируется относительно содержимого элемента

background-origin

—>В начало

 

Фон из нескольких картинок

CSS3 позволяет делать фон из нескольких изображений. Делается это с помощью обычного свойства background-image либо его сокращенным вариантом background.

Если вы хотите использовать для фона несколько изображений, возможно использование такого кода:

background:
  url(rose.png) no-repeat 150px -20px,
  url(driedrose.png) no-repeat,
  url(fieldsky.jpg) no-repeat;

multiple background
Перечисление изображений начинается с того, которое будет ближе к зрителю. Далее то, которое будет располагаться за первым и так далее.

Есть и другой вариант кода:

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;

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

—>В начало

 

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

box-shadow: 10px 10px 1px #000;
/* Значение параметра радиус размытия 1 */

box-shadow

box-shadow: 10px 10px 20px #FE2E2E;
border-radius: 20px;
/* Тень улучшена с использованием розового и закруглением краев при помощи border-radius */

box-shadow

box-shadow: 20px 20px 10px 10px;
/* Параметр растягивания установлен в 10, что существенно увеличило тень*/

box-shadow

box-shadow: -10px -10px 20px inset;
/* Использование параметра inset создает - внутреннюю тень */

box-shadow

—>В начало

 

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-radius

border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
/*закруглены только нижние углы*/

border-radius

border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/*нижние и верхние углы закруглены с разным радиусом*/

border-radius

border-radius: 120px 20px;
/*Сокращенный вариант: 120px - закругление для левого верхнего и правого нижнего углов
и 20px для левого нижнего и правого верхнего углов*/

border-radius

border-radius: 120px / 20px;
/*закругление углов по оси х на 120 px, по оси y на 20px*/

border-radius

background: url(image/japanese_tile.jpg);
border-radius: 30px;
/*закругление углов на 30px и с использованием фонового изображения*/

border-radius

—>В начало

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

Вам требуется многоканальный номер способный принимать неограниченное количество звонков одновременно? Тогда виртуальный номер Mango-Office это то, что вам нужно: номер не привязан к месту расположения оффиса, единый номер для нескольких офисов, многоканальность, большой выбор красивых виртуальных номеров и многое другое.



Запись опубликована в рубрике CSS3 с метками , , , . Добавьте в закладки постоянную ссылку.

5 комментариев: CSS3 для начинающих. Часть 2. Бэкграунды (фоны) и границы

  1. Уведомление: CSS3 для начинающих. Часть 2. Бэкграунды (фоны) и границы. | Grabr

  2. Уведомление: CSS3 для начинающих | RusDigi.org Блог Гилязетдинова Руслана

  3. Уведомление: Маленький редизайн блога. | RusDigi.org Блог Гилязетдинова Руслана

  4. Уведомление: Готовые приемы по работе со свойством border в CSS | RusDigi.org

  5. korvin222 говорит:

    классная статья! благодарю автора! 🙂 уже поставил кое что на свой сайт.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *