Css - скругливание углов

[winterwolf]

Есть интересный способ сделать красивую рамку с круглыми углами, расширяя функции пользовательских стилей.
Сам код можно разделить на 2 части.
1. Структуру, т.е классы опишем в пользовательских стилях
2. Хтмл код.(в посте или комменте)

Теория
Посмотрим по-пиксельно.

В примере 5 частей с учетом границы
первые 4 это для округления.
Пятая часть - поле для текста и т.п.
и первые четыре в обратном порядке.
Вот основная идея.


Рассмотрим такой пример. 3д восприятие используя 5 оттенков серого и белого цвета.

обзовем эти части буквой b

* b1 - 1px высота линии с белым фоном и правым/левым отступом в 5px
* b2 - 1px высота линии с серым фоном(3), левая граница 2px solid белая, правая границя 2px solid серая(1) и отступ слева и права в 3px
* b3 - 1px высота линии с серым фоном(3), левая граница 1px solid(это название параметра границы - то есть одиночный) белая, я, правая границя 1px solid серая(2) и отступ слева и права в 2px
* b4 - 2px высота линии с серым фоном(3), левая граница 1px solid белая, правая границя 1px solid серая(4) и отступ слева и права в 1px
* boxcontent (центральное поле) - серый фон(3), a левая граница 1px solid белая, правая граница 1px solid серая(5) и без отступов.
Так как оттенки идут разные мы не можем просто инверсно написать нижнию уже готовыми, поэтому пишем другие.
* b4b - 2px высота линии с серым фоном(3), левая граница 1px solid серая(1), правая граница 1px solid серая(5) и отступ слева и права в 1px
* b3b - 1px высота линии с серым фоном(3), левая граница 1px solid серая(2), правая граница 1px solid серая(5) и отступ слева и права в 2px
* b2b - 1px высота линии с серым фоном(3), левая граница 2px solid серая(4), правая граница 2px solid серая(5) и отступ слева и права в 3px
* b1b - 1px высота линии с серым фоном(5) и отступ слева и права в 5px

{
  background:transparent; 
  width:40%;
  }
.raised h1, .raised p {
  margin:0 10px;
  }
.raised h1 {
  font-size:2em; 
  color:#fff;
  }
.raised p {
  padding-bottom:0.5em;
  }
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {
  display:block; 
  overflow:hidden;
  font-size:1px;
  }
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {
  height:1px;
  }
.raised .b2 {
  background:#ccc; 
  border-left:1px solid #fff; 
  border-right:1px solid #eee;
  }
.raised .b3 {
  background:#ccc; 
  border-left:1px solid #fff; 
  border-right:1px solid #ddd;
  }
.raised .b4 {
  background:#ccc; 
  border-left:1px solid #fff; 
  border-right:1px solid #aaa;
  }
.raised .b4b {
  background:#ccc; 
  border-left:1px solid #eee; 
  border-right:1px solid #999;
  }
.raised .b3b {
  background:#ccc; 
  border-left:1px solid #ddd; 
  border-right:1px solid #999;
  }
.raised .b2b {
  background:#ccc; 
  border-left:1px solid #aaa; 
  border-right:1px solid #999;
  }
.raised .b1 {
  margin:0 5px; 
  background:#fff;
  }
.raised .b2, .raised .b2b {
  margin:0 3px; 
  border-width:0 2px;
  }
.raised .b3, .raised .b3b {
  margin:0 2px;
  }
.raised .b4, .raised .b4b {
  height:2px; margin:0 1px;
  }
.raised .b1b {
  margin:0 5px; background:#999;
  }
.raised .boxcontent {
  display:block;  
  background:#ccc; 
  border-left:1px solid #fff; 
  border-right:1px solid #999;
  }

Хочу обратить внимание на первую стоку
.raised {
background:transparent;
width:40%;
}
width:40%; - мы задали ширину в 40% от поля в котором оно будет находиться. Т.е. если страница динамическая, то и наша структура будет тоже динамической и брать лишь 40% от предоставленного места.
_____________________
У нас есть готовая структура, сохраненная в пользовательских стилях. Ну пока что можно забыть всю эту абракадабру.

Мы хотим написать новый пост или комментарий используя красивую рамку.
Для удобства можно сохранить шаблон, чтобы просто потом его копировать.

Здесь весь хтмл код в одном кусуке, который можно смело скопировать.

<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent"><p>Наш текст</p></div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

А вот и результат


P.S. Опытные пользователи могут задать фоновую картинку.
В пользовательских стилях можно поменять параметры во всех постах сразу, где используете такое.
Работает только при наличии CSS пакета и только в личном дневнике (так как пользовательский стиль не распространяется на чужие дневники)


by  winterwolf
На основе личного опыта и материала отсюда

Вот мой пример

@темы: winterwolf, CSS-дизайн, Разное

Comments

[izja]

[[Ciel]]

ух ты!!пасип огромное))оч интересно)
а галвное буим использовать)

[Джедайт]

Скажите, пожалуйста, а вот эта же картинка бумаги без девочки у вас нет?
Дело в том, что мне как раз и нужен такой фон поста. Но вот ничего подобного не нашел.
Очень буду раз помощи.

Есть идея, а руки кривые.

[winterwolf]

есть.

[Джедайт]

winterwolf
Спасибо вам огромное!