]]> ]]>

Уважаемые посетители!
Здесь, я буду писать, статьи-заметки(свои и из инета), показавшиеся, мне интересными. Писать, буду, своими словами и возможно, с использованием неприличной лексики. Приношу извинения тем, кого, это будет коробить..


Как сделать круглые углы стилями..

Все видели круглые углы, в меню и контенте. Смотрится здорово, а как сделать?
Да всё просто, смотрим пример ниже:

Код CSS:

<style type="text/css">
.ugol{display:block}
.ugol *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#DCE1E9}
.ugol1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #eff2f5;
  border-right:1px solid #eff2f5;
  background:#e4e8ee}
.ugol2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #fbfcfc;
  border-right:1px solid #fbfcfc;
  background:#e2e6ed}
.ugol3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #e2e6ed;
  border-right:1px solid #e2e6ed;}
.ugol4{
  border-left:1px solid #eff2f5;
  border-right:1px solid #eff2f5}
.ugol5{
  border-left:1px solid #e4e8ee;
  border-right:1px solid #e4e8ee}
.ugolfg{
  background:#DCE1E9}
</style>

Код HTML:

<div>
  <b class="ugol">
  <b class="ugol1"><b></b></b>
  <b class="ugol2"><b></b></b>
  <b class="ugol3"></b>
  <b class="ugol4"></b>
  <b class="ugol5"></b></b>

  <div class="ugolfg">
    <!-- тут Ваш текст -->
  </div>

  <b class="ugol">
  <b class="ugol5"></b>
  <b class="ugol4"></b>
  <b class="ugol3"></b>
  <b class="ugol2"><b></b></b>
  <b class="ugol1"><b></b></b></b>
</div>

Ну, и сам пример ниже:

   Круглые углы на css клевенько выглядит.. Круглые углы на css клевенько выглядит..
   Круглые углы на css клевенько выглядит.. Круглые углы на css клевенько выглядит..
   Круглые углы на css клевенько выглядит.. Круглые углы на css клевенько выглядит..
   Круглые углы на css клевенько выглядит.. Круглые углы на css клевенько выглядит..

Модифицируя, код CSS, можно сделать углы больше или меньше, просто меняя количество класса ugol, в общем экспериментируйте, как угодно..

02.04.2008. 09:39

bmr.net.ru 25.11.2008. 18:15

Неплохо

Дима 09.12.2008. 11:29

Молодчик - оригинальное решение!

Ванька 02.01.2009. 18:57

Удобное решение, всё лучше чем графика, надо опробовать...

Угол 02.01.2009. 19:35

Извращенец! Графика в любом случае лучше!

мастер 09.01.2009. 14:04

долго и муторно... а если радиус к примеру 25? ))

Страницы: 1 2

Написать коментарий

* = обязательное поле

:

:

:


7 + 5 =





обо мне · CSS · Как сделать круглые углы стилями..

Русификация vBulletin

Как известно, Джелсофт запретил, zCarotу выкладывать свои русификаторы.
Ну а мне нет... По ссылкам ниже, качаем русики, для свежих версий vBulletin и говорим за них, спасибо Морковке.
Русификаторы для vBulletin 3.7.3: cp1251 | utf8
Русификаторы для vBulletin 3.6.11: cp1251 | utf8

Последние заметки

Спецсимволы в html(таблица) (html)
Прячем ссылку в форме (html)
Коментарии к коду - что это? (html)
Как сделать тонкую таблицу (html)
Сравнение WYSIWYG-редакторов 2007 (полезнячок)