Существует не мало способов создать контейнер для текста с закругленными углами. Но тот который я хочу описать понравился мне своей простотой и гибкостью.
Перед вами простой и быстрый способ создать блок с закругленными углами, не ограниченый по высоте и ширине.
Все что нам для этого нужно это 5 минут времени и четыре картинки уголков. Да, к сожалению браузеры поддерживающие свойство border-radius пока не в большинстве, а мы верстаем для людей, а не для браузеров, так что без картинок не обойтись.
Здесь мы используем принцип вложенности элементов и фоновые картинки, распределенные по углам. Соответственно нам нужно четыре вложенные друг в друга контейнера и четыре картинки уголков, по количеству углов :)
HTML:
<p>
<span>
<span>
<span>
Много текста
</span>
</span>
</span>
</p>
<p id="two">
<span>
<span>
<span>
Много текста
</span>
</span>
</span>
</p>
<p id="three">
<span>
<span>
<span>
Много текста
</span>
</span>
</span>
</p>Тут все просто. У второго и третьего контейнера задан id для того чтобы изменить их ширину.
Теперь перейдем к стилям. В этом способе есть одно небольшое неудобство. Цвет фона страницы должен совпадать с цветом уголков. То есть если надо изменить фон страницы, то без Фотошопа не обойтись, так как придется изменять цвет уголков. Кстати вот они:
Смотрим на CSS:
body {
background-color: #0084C7; /*Цвет должен соответствовать цвету уголков*/
}
p {
color: black;
background: white url("images/left_top.gif") top left no-repeat;
margin: 0 0 20px 0;
}
p span {
display: block; /* переводим все span'ы из лэерных элементов в блочные */
background: url("images/right_top.gif") top right no-repeat;
}
p span span {
background: url("images/right_bottom.gif") bottom right no-repeat;
}
p span span span {
padding: 2em;
min-height: 1px; /* обязательно для автоматического создания высоты */
background: url("images/left_bottom.gif") bottom left no-repeat;
}
/*исправление для IE 6*/
* html p span span span {
height: 1px; /* IE6 проигнорирует это свойство и задаст высоту по контенту */
}Уголки задаются начиная от верхнего левого угла контейнера, так же как и координаты в HTML. Думаю что из названий background-image все понятно.
Во внутреннем, третьем span’е обязательно нужен min-height любого значения и исправление height для Интернет Эксплорера 6, который мы прописываем с помощью * html хака. Я выставил значение 1px, так как IE6 все равно его проигнорирует и растянет высоту блока до высоты контента.
Вот и все. Можно посмотреть рабочий пример, а можно скачать вместе с картинками, одним архивом.
Интересный подход. Вот только у меня по работе почему-то вечно попадаются блоки с закруглёнными углами и сложным дизайном (много всяких теней/градиентов), так что приходится придумывать всякие извращения :(
Более изящный способ
to Sam
чем же он лучше? зачем для простой верстки подключать javascript? а если он отключен в браузере?
to Gorik
да, у меня тоже часто бывает такое, приходится изворачиваться :)
Вот это я бы назвал идеальным способом ;)
to pepelsbey
Согласен, этот способ круче, особенно понравилось “Install Mysql 3.23 using yum, Perl 5.8, and /usr/bin/fortune” :)
Но 84 шага это многовато, так что лучше уж мой…
А чем плох java script?
Ну отключат – будут квадратные уголки.
Зато как красиво:
Nifty Corners Cube™
One call. Two parameters. Three sizes.
Код побило :( В общем там один div.
[quote comment="104"]А чем плох java script?
Ну отключат – будут квадратные уголки.[/quote]
Ну не знаю. Мне претит сама мысль о базовой верстке страниц с помощью javascript.
вот тут куча способов:
http://www.smileycat.com/miaow/archives/000044.html
мне больше всего этот понравился:
http://www.roundedcornr.com/rc1.php
[quote comment="111"]вот тут куча способов:
http://www.smileycat.com/miaow/archives/000044.html
мне больше всего этот понравился:
http://www.roundedcornr.com/rc1.php/quote
В чем существенное отличие понравившегося способа от описаного мной?
Да, способов много, есть лучше, есть хуже, в прочем в посте я все описал.
как-то странно вы рассуждаете…
а как же 4 запроса на сервер?! а как же диалап?
а вот тут генератор округлостей есть http://www.neuroticweb.com/recursos/css-rounded-box/:)
[quote comment="148"]а вот тут генератор округлостей есть http://www.neuroticweb.com/recursos/css-rounded-box/:)/quote
Только не понятно :)
[quote post="74"]Мне претит сама мысль о базовой верстке страниц с помощью javascript.[/quote]
Круглые уголки — базовая вёрстка? А мне претит использование четырёх вложенных элементов для рисования сраных круглых уголков. :D
Хех, в последнее время я уже перестал делить верстку на сложную и простую. Это вертска и все тут. Сверстать можно практически все. А уголки это так, частность.