Скругленные углы используя CSS3 (multiple backgrounds и border-radius).
Posted on Декабрь 7, 2007
Filed Under border-radius, multiple backgrounds, css3, rounded corners, css |
Для экспериментов взял приведенный выше макетик. Тестировал в Safari для Windows так как этот браузер понимает multiple background и border-radius.
HTML разметка.
<div class="block">
текст
</div>
Эта разметка используеться для обоих примеров.
Multiple backgrounds для скругления углов.
Изображения, которые используем
- градиентный фон блока
- верхний правый угол
- нижний левый угол
Непосредственно css
.block{
background-color:#4ea5ff;
background-image: url(bg-b-l.gif), url(bg-t-r.gif), url(bg-gr.gif);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: bottom left, right top, bottom left;
padding:20px;
margin:20px;
color:#ffffff;
}
Нужно заметить, что в background-image изображение, которое прописано первым, будет в самом верхнем “слое”, остальные будут ложиться под него, в том порядке, в котором прописаны. Градиентный фон, мы прописали самым последним, т.к. он должен быть в самом нижнем “слое”.
Порядок значений в background-repeat и background-position соответствует порядку в background-image, т.е. для изображения url(bg-gr.gif) соответствует repeat-x и bottom left. Значения разделяются запятыми.
Border-radius для скругления углов.
Изображения, которые используем
Из изображений нам потребуется только градиентный фон из предыдущего примера.
Непосредственно css
.block{
background:#4ea5ff url(bg-gr.gif) repeat-x bottom left;
padding:20px;
margin:20px;
color:#ffffff;
border-top-right-radius:25px;
border-bottom-left-radius:25px;
}
Так как border-radius в том виде, в котором он написан выше, пока не поддерживаться, в реальном примере я заменил это свойство на -webkit-border-radius.
Comments
12 Responses to “Скругленные углы используя CSS3 (multiple backgrounds и border-radius).”
Leave a Reply
-
Поиск
-
Счетчики
-
-
На правах рекламы:
Закруглённые углы вещь конечно хорошая, но чтобы применять CSS3 ещё столько ждать…
Но тренироваться можно уже сейчас ))
Кстати, в первом примере, для третьего бэкграунда можно писать не bottom left, а просто bottom, когда стоит repeat-x то всё равно откуда начинается градиент слева или справа. ))
Мда… Сафари - это вещь, раз раньше других браузеров понимает CSS3.
В Опере 9.5 тоже ожидается, кажется, полная поддержка (сейчас в проверил в бете - не работает). Вот тогда можно будет уже и попрактиковаться со многими феньками CSS3.
согласен, хватит и одного bottom.)
2Dimox:
есть вещи, из CSS3, которые понимает пока только Opera 9.5 )
Значит Опера тоже рулит, напару с Сафари :)
ждемс тройки с нетерпением….
а долго еще ждать?!
а фиг его знает, когда релиз
Блин, дождаться не могу :)
а вы разве ждете чего-то сверхъестественного?
Поиск по w3c не помогает, куда они упрятали релизы?
По-моему, его ожидание совершенно оправданно :)
Ждем нашествия webkit и оперы. Потом и FF подтянется) А на IE-юзеров хак можно будет изобрести (например, онлайн-webkit-рендеринг плагином =)