CSS3 - скругление углов и фон

Веб-программирование --- CSS3 --- Скругление углов и фон

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

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

Скругление углов

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

Прежде всего, этому свойству можно присвоить другое, единое значение радиуса границы. Радиус границы — это радиус обрамляющего круга. Конечно же, весь круг не рисуется, а только та его часть, необходимая для соединения вертикальной и горизонтальной границ рамки. Если установить большее значение border-radius, получится больший круг и более плавно скругленный угол. Как и в случае с большинством других измерений в CSS, радиус можно задавать в разных единицах, включая пикселы и проценты. Кроме этого, для каждого угла можно указать отдельное значение border-radius:

aside  {
    border-radius: 25px 50px 25px 85px;
}

Но это еще не все — также можно растянуть круг в эллипс, создавая кривую, более протяженную в одном из направлений. Для этого нужно обрабатывать каждый угол отдельно специальными свойствами (например, свойство border-top-left-radius обрабатывает левый верхний угол), которым присваиваются два значения: одно для горизонтального радиуса эллипса, а другое — для вертикального:

aside  {
    border-top-left-radius: 150px 30px;
    border-bottom-right-radius: 150px 30px;
}

Фон

Одним из быстрых способов создания привлекательных фонов и обрамлений будет использование изображения. Спецификация CSS3 определяет две новые возможности, которые можно использовать для этой цели. Первая возможность — это поддержка нескольких фонов, которая позволяет объединить два (или больше) изображения в один фон. Далее приведен пример кода для создания одного фона из двух изображений, чтобы украсить левый верхний и правый нижний углы рамки:

aside  {
    background: transparent;
    background-image: url('top-left.png'), url('bottom-right.png');
    background-position: left top, right bottom;
    background-repeat: no-repeat, no-repeat;
}

Первым шагом в реализации этой задачи надо предоставить список любого количества изображений в свойстве background-image. Полученные изображения можно потом расположить в соответствующих местах посредством свойства background-position и указать, повторять ли их, с помощью свойства background-repeat. При этом нужно следить за правильностью порядка, чтобы расположить первое изображение в позиции, указанной в первом значении свойства background-position, второе — во второй и т.д. Результаты применения правила показаны на рисунке:

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