Закругленные углы используя CSS

Posted on Сентябрь 6, 2007
Filed Under rounded corners, css |

Закругленные углы используя CSS

Сейчас чутли не на каждом сайте используются блоки с закруглёнными углами. Я хочу рассмотреть пример создания такого эффекта для блока с заголовком и каким либо текстом.

В данном приёме используется два изображения : round-l.png и round-r.png.

HTML разметка выглядит следующим образом:<div class="rounded-corners">
<h3>Заголовок</h3>
<div>
<p>Текст</p>
</div>
</div>

Теперь, самое интересное, начнём работать над CSS. Распишем бекграунды:.rounded-corners{
background:transparent url(ound-l.png) no-repeat left top;
}
.rounded-corners h3{
background:transparent url(round-r.png) no-repeat right top;
}
.rounded-corners div{
background:transparent url(ound-l.png) no-repeat scroll left bottom;
}
.rounded-corners div p{
background:transparent url(round-r.png) no-repeat scroll right bottom;
}
результат

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

Для элемента-контейнера зададим padding-дуае равный радиусу нашего закругления:.rounded-corners{
background:transparent url(round-r.png) no-repeat left top;
margin:10px;
padding:0pt 0pt 0pt 11px;
}
Для заголовка уберём margin и зададим padding в эстетических целях:

.rounded-corners h3{
background:transparent url(tsr-r.gif) no-repeat right top;
margin:0;
padding:8px 0pt 0.5em;
}
Для элемента div, который существует только для оформления и никакой семантической нагрузки не несёт, зададим padding-right равный радиусу закругления, с целью не дать вложенному элементу перекрыть background, и сместим его левую границу на такую-же величину влево:
.rounded-corners div{
background:transparent url(round-r.png) no-repeat scroll left bottom;
margin:0pt 0pt 0pt -11px;
padding-left:11px;
}
Для элемента p, который собственно и содержит текстовую информацию, зададим padding опять-же в эстетических целях:
.rounded-corners div p{
background:transparent url(tsr-r.gif) no-repeat scroll right bottom;
margin:0;
padding:0pt 10px 15px 0pt;
}
результат

Данное решение подходит для небольших блоков информации.

По мотивам CSS teaser box revisited.

Comments

10 Responses to “Закругленные углы используя CSS”

  1. Setti on Сентябрь 9th, 2007 2:35 pm

    А без использования графики слабо?

  2. never again on Сентябрь 9th, 2007 9:07 pm

    можно и без использования графики!

    но мне кажется что использование графики для закругления углов, более рационально чем использование десятка элементов для визуального оформления

  3. mishaspb on Ноябрь 12th, 2007 3:29 pm

    а возьмите меня к себе корректором на пол ставочки? ;)

  4. never again on Ноябрь 12th, 2007 3:36 pm

    2mishaspb, у меня все настолько плохо,да?)

    постучись http://neveragainblog.com.ua/archives/42

  5. mishaspb on Ноябрь 12th, 2007 3:59 pm

    ну не так чтоб совсем всё плохо, но чуть ли не в каждом посте. кстати, ничего из предложенного в контактах не подошло. аська есть?

    у Тебя:
    Сейчас чутли не на каждом сайте используются блоки с закруглёнными углами. Я хочу рассмотреть пример создания такого эффекта для блока с заголовком и каким либо текстом.

    надо:
    Сейчас чуть ли не на каждом сайте используются блоки с закруглёнными углами. Я хочу рассмотреть пример создания такого эффекта для блока с заголовком и каким-либо текстом.

  6. never again on Ноябрь 12th, 2007 4:37 pm

    2mishaspb, написал на маил.

    мда, сказал бы сейчас что руский не родной, типа живу на Украине, но это будет неправда… украинский я знаю также)

  7. korbax on Ноябрь 18th, 2007 10:59 pm

    Есть вопрос, я повторил все что было написано в вашей статье, все заработало но есть несколько непонятных моментов:
    1. если использовать png, то прозрачности в IE мы неполучим и соответственно закругление краев будет но с окантовкой.
    2. есть проблема с левым нижним углом он не закругляется, точнее если уменьшить страницу до опреденного размера закругление появляется. Немогли бы вы объяснить почему так происходит?

  8. never again on Ноябрь 18th, 2007 11:18 pm

    2korbax:
    1. не совсем понял вопрос… вы имеете в виду png24? ели да, то IE не поддерживает прозрачность в этом формате…
    2. уменьшения по вертикали? по горизонтали? может где-то ошибку сделали? показать страницу можете?

  9. korbax on Ноябрь 25th, 2007 11:46 am

    файл css:
    .rounded-corners
    {
    background:transparent url(”round-l.png”) no-repeat left top;
    margin:10px;
    padding:0px 0px 0px 12px;
    }

    .rounded-corners h3
    {
    background:transparent url(”round-r.png”) no-repeat right top;
    margin:0;
    padding:8px 0pt 0.5em;
    /*отступ от верха блока до верха заголовка
    отступ заголовка от левой стороны
    отступ от низа заголовка до верха блока*/
    }

    .rounded-corners div
    {
    background:transparent url(”round-l.png”) no-repeat scroll left bottom;
    margin:0px 0px 0px -12px;
    padding-left:12px;
    }

    .rounded-corners div p
    {
    background:transparent url(”round-r.png”) no-repeat scroll right bottom;
    margin:0;
    padding:0pt 10px 15px 0pt;
    }

    body
    {
    background-color:#008040
    }
    ———————————————
    сама страница:

    Блок с закругленными углами

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio

  10. never again on Ноябрь 27th, 2007 12:41 pm

    2korbax:
    1- если вы меняете фон всей страницы, то вы должны поменять фон и в изображениях.
    2- никогда не пишите комментарии кириллицей в css!!!

Leave a Reply




Please copy the string Ml6ykA to the field below: