Пару дней назад наткнулся на статью про 38 способов скругления блоков. Очень понравилось. Однако там я не встретил способа, которым пользуюсь уже около года. Он не требует лишних тэгов и требует загрузки только одной картинки (спрайт). Работает во всех современных баузерах и IE6+
Способ применим для блоков со сплошным окружающим фоном и без рамки (однако фон самого блока может быть произвольным).
Собственно изюминкой является способ размещания спрайта в блоке, где ни ширина ни высота не фиксированы. Это достигается следующим кодом:
сам HTML выглядит так:
На использование ::after и ::before внимание обращать не нужно — это лишь необходимость для корректной работы библиотеки Дэна Эдвардса, которая адаптирует этот стандартный код для IE. Кстати очень рекомендую эту библиотеку для лечения многих неприятных особенностей самого популярного браузера.
Собственно на этом и всё. Осталлось привести ссылку на архив с работоспособным примером.
Жду замечаний.
UPD: Метод работает только в режиме совместимости со стандартами, то есть при соотвествующем DOCTYPE. Для тех, кто всё ещё пишет свой код в quirks mode этот метод пока не адаптирован.
UPD2: Как обнаружил pepelsbey библиотека Дэна Эдвардса может сбоить в IE при больших объёмах CSS. Так что в данный момент разыскивается другой способ застатить IE воспринимать указанный код CSS2 корректно.
Способ применим для блоков со сплошным окружающим фоном и без рамки (однако фон самого блока может быть произвольным).
Собственно изюминкой является способ размещания спрайта в блоке, где ни ширина ни высота не фиксированы. Это достигается следующим кодом:
/* применяя этот класс к блоку мы делаем его скругленным */
.rounded{
background: #feb;
padding:20px;
margin:30px auto 10px auto;
text-align:center;
overflow:hidden;
}
.rounded:before, .rounded::before, .rounded:after, .rounded::after{
display:block;
height:20px;
content:url(img/corners.gif);
background:url(img/corners.gif) top right no-repeat;
margin:-30px -30px 10px -30px;
padding:0;
text-align:left;
line-height:0;
font-size:0;
overflow:hidden;
}
.rounded:after,.rounded::after{
margin:10px -30px -30px -30px;
}сам HTML выглядит так:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html>
<head>
<title>Rounded corners</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" media="screen" href="styles.css" />
< !--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
< ![endif]-- >
</head>
<body>
<div class="rounded">
У этого блока должны быть скруглены углы
</div>
</body>
</html>На использование ::after и ::before внимание обращать не нужно — это лишь необходимость для корректной работы библиотеки Дэна Эдвардса, которая адаптирует этот стандартный код для IE. Кстати очень рекомендую эту библиотеку для лечения многих неприятных особенностей самого популярного браузера.
Собственно на этом и всё. Осталлось привести ссылку на архив с работоспособным примером.
Жду замечаний.
UPD: Метод работает только в режиме совместимости со стандартами, то есть при соотвествующем DOCTYPE. Для тех, кто всё ещё пишет свой код в quirks mode этот метод пока не адаптирован.
UPD2: Как обнаружил pepelsbey библиотека Дэна Эдвардса может сбоить в IE при больших объёмах CSS. Так что в данный момент разыскивается другой способ застатить IE воспринимать указанный код CSS2 корректно.
