x0bbit (

x0bbit) wrote in

ru_webdev,
2009-03-31 18:01:00

Круглые углы в IE 8

Возможно кому-нибудь пригодиться метод создания круглых углов в IE8 без дополнительного кода на css.
Суть проблемы: IE8 не понимает expression, SVG и не понимает CSS3, а хочется задав блоку дополнительный класс получить уголочки. Есть VML, но не выполняется условие про дополнительный код.

Короче, вот стили.

.b-round-example {
  margin: 1em 0 2em;
  width: 60%;
  padding: 40px 0;
  color: #FFF;
  text-align: center;
  background-color: #7DA7D9;
  background-image: url("http://aerate.ru/content/round/round-tl-bl.png");
  background-position: -15px bottom;
  background-repeat: no-repeat;
  position: relative;
}
/* Левый нижний угол в background блока. position: relative обязателен для работы нижнего правого угла. */

.b-round-example:before {
    content: 'round';
    position: relative;
    top: 0;
    margin: -40px 0 20px 0;
    display: block;
    font-size: 0;
    height: 20px;
    background-image: url("http://aerate.ru/content/round/round-tr-br.png");
    background-position: right 0;
    background-repeat: no-repeat;
  }
/* Перед основным контентом блока пишем любое слово. Пустое свойство content не подходит, потому что в дальнейшем будем использовать его :first-letter. Какого либо текста все равно не увидим, он спрятан font-siz’ом. Ну а отрицательный margin-top нужен, чтобы перекрыть padding-top родительского блока. position: absolute использовать к сожалению нельзя — блок выпадет из потока и :first-letter перейдет на основной контент.
Это будет верхний правый угол. */

.b-round-example:first-letter {
      float: left;
      font-size: 0;
      padding: 0 20px 20px 0;
      background-image: url("http://aerate.ru/content/round/round-tl-bl.png");
      background-position: 0 0;
      background-repeat: no-repeat;
    }
/* :first-letter слова round для левого верхнего угла. */

.b-round-example:after {
    content: ' ';
    font-size: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 20px;
    width: 20px;
    background-image: url("http://aerate.ru/content/round/round-tr-br.png");
    background-position: left bottom;
    background-repeat: no-repeat;
  }
/* Правый нижний угол позиционирован абсолютно. content не должен быть пустым (у меня там пробел). */

Рабочий пример

Кстати этот код отлично работает в Опере, что при необходимости позволит отказаться от SVG.

Есть и ограничения, как без них...
— Нет возможности положить в блок background-image. Фон уже занят одним из углов.
— Прозрачные углы возможны лишь для блока с заведомо известной высотой или шириной.
— при наличии у блока padding-top: > 0, придется ставить верхние углы руками. А все из за того, что нельзя дать .block:before {position: absolute} =(

Больше всего бесит, что нельзя для .b-round-example:before задать position:absoute.
Ну и то, что фон блока занят одним из уголков тоже не очень хорошо. Может у кого будут идеи по доработке?

И на закуску баг:
Углы лежащие в background блока и в first-letter (верхний левый угол) должны быть в одном спрайте, иначе background блока отображаться не будет.

Post a new comment
Error
We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

Anonymously

switch

LiveJournal

Facebook

Twitter

OpenId

Google

MailRu

VKontakte

Anonymously

Insert Bold

Insert Italic

Insert Underline

Insert Strikethrough

Insert Link

Insert LJ User

Insert Photo

Insert Video

Your reply will be screened
Help
80 comments

pepelsbey

March 31 2009, 14:41:39 UTC 3 years ago

Всё бы хорошо, но работает эта штука только в вакууме, занимать контейнер под уголок — не самое удачное решение.

ps: харисовские префиксы пошли в массы )

_1313

March 31 2009, 14:43:07 UTC 3 years ago

ну, как известно, верстать без ограничений можно только на таблицах :)

pepelsbey

March 31 2009, 14:44:40 UTC 3 years ago

*пытается не развязывать холивор*

А если просто сделать чуть универсальнее?

_1313

3 years ago

link
Collapse
Expand
New comment

x0bbit

March 31 2009, 14:45:35 UTC 3 years ago

Про уголок – согласен. Но ничего больше не приходило в голову.
А вакуум... Когда как.

pepelsbey

March 31 2009, 14:45:54 UTC 3 years ago

…ну и класть такое прямо в тело при Strict-доктайпе:

<link rel="stylesheet" media="all" href="/content/round/round.css"  />
<!--[if IE 8]>
  <link rel="stylesheet" media="all" href="/content/round/round-ie.css" />
<![endif]-->

x0bbit

March 31 2009, 14:47:09 UTC 3 years ago

ой, ну давайте не будем придираться к демке =)

pepelsbey

March 31 2009, 14:56:38 UTC 3 years ago Edited: March 31 2009, 15:02:15 UTC

Собственно, вот — один экстра-блок и все проблемы.

.b-round {
    position: relative;
    padding: 20px;
    background: #EEE;
    }
    .b-round:before,
    .b-round:after,
    .b-round-inner:before,
    .b-round-inner:after {
        position:absolute;
        background:#C00;
        width:10px;
        height:10px;
        content:'';
        }
    .b-round:before {
        top:0;
        left:0;
        }
    .b-round:after {
        top:0;
        right:0;
        }
    .b-round-inner:before {
        right:0;
        bottom:0;
        }
    .b-round-inner:after {
        bottom:0;
        left:0;
        }

<div class="b-round">
    <div class="b-round-inner">
        LoL
    </div>
</div>

upd: проверил в IE8 — отлично работает безо всякого трюкачества

x0bbit

March 31 2009, 15:13:51 UTC 3 years ago

Ах! капитан очевидность =)
А все таки если необходимо использовать один блок?

pepelsbey

March 31 2009, 15:22:28 UTC 3 years ago

Вариант .b-round:before:before, к сожалению, не сработал (

Я понимаю, что любой дурак может с двумя блоками, но голова в шишках от подобных решений не позволяет считать это решение полноценным. Да и expression'ы для 50-ти уголков на странице для IE6–7 — это жестоко, даже если они написаны правильно.

Так что экста-разметка рулит и решает. К большому нашему сожалению.
Кстати, как вы собираетесь вежливо отфильтровать Opera, чтобы вкрутить для неё SVG?

Username:		Create an Account Forgot your login or password? OpenID Google Mail.Ru VKontakte
Password:
	Remember Me
	English • Español • Deutsch • Русский…

Круглые углы в IE 8

Error

About

Help

Get Involved

Legal

LJ Labs

Store