Перейти к содержимому

Реферальная программа Мегаплана


Как сделать сглаженные края?

#1 arlexs

arlexs
  • Пользователь
  • 7 сообщений
  • Репутация: 0
0

Отправлено 21 Июль 2009 - 18:23

Здравствуйте уважаемые вебмастера! У меня вопрос, как сделать такие сглаженные края без вставки картинок, как сдесь:
ВОТ сайт (Статьи, Рейтинг, Отзывы и т.д.) И как сделать их еще цветными???????

Заранее ОГРОМНОЕ СПАСИБО!!!!!

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 21 Июль 2009 - 20:21

arlexs,
сделано примерно так

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<style type="text/css">
body {
width: 100%;
font-family: Arial, sans-serif;
font-size: 90%;
color: #000000;
background-color: white;
margin: 0;
padding: 0; }

div {
margin: 0px;
padding: 0px; }

h2 {
color: white;
margin: 0;
font-family: Arial, sans-serif;
text-align: left;
text-transform: uppercase;
font-size: 100%;
white-space: nowrap;
padding: 0.55em 21px 0.55em 21px; }

div.tl16, div.bl16 {
width: 16px;
height: 16px;
float: left;
background: transparent;
font-size: 0; }

div.tr16, div.br16 {
float: right;
width: 16px;
height: 16px;
background: transparent;
font-size: 0; }
div.tl16 {
margin: 0 -16px -16px 0;
background-image: url("16lt.png"); }

div.tr16 {
margin: 0 0 -16px -16px;
background-image: url("16rt.png"); }

div.bl16 {
margin: -16px -16px 0 0;
background-image: url("16lb.png"); }

div.br16 {
margin: -16px 0 0 -16px;
background-image: url("16rb.png"); }

div.title {
color: white;
float: left;
width: 100%; }
.blue {
background-color: #3366CC; }
.orange {
background-color: #FFBF00; }
</style>
</head>
<body>
<div class="title blue">
<div class="tl16"></div><div class="tr16"></div>
<h2>Сервис расчета и продажи страховок</h2>
<div class="bl16"></div><div class="br16"></div>
</div>
</body>
</html>
Картинки там есть, но они вставлены через CSS.
Чтобы этот код отобразил заголовок, с закругленными углами, нужно в папку с index.htm положить еще 4 картинки (они, как раз, и рисуют гладкие углы), которые лежат на том сайте по адресам:
http://www.prostraho...g/circ/16lt.png 16lt.png
http://www.prostraho...g/circ/16rt.png16rt.png
http://www.prostraho...g/circ/16lb.png16lb.png
http://www.prostraho...g/circ/16rb.png16rb.png
"Цветность" задается дополнительным классом у внешнего блока:
если напишете вместо <div class="title blue"> - <div class="title orange"> будет не синий заголовок, а оранжевый.
Естественно, классы blue, orange и любые другие, задающие цветность, должны быть описаны в вашем CSS.
  • 0

#3 Flashburn

Flashburn
  • Пользователь
  • 11 сообщений
  • Репутация: 0

Отправлено 22 Август 2009 - 13:06

Вот ссылка на небольшой видеоурок от Е. Попова (ruseller.com). Там все наглядно описывается и очень подробно.

<Видеоурок по скругленным бордерам>

А здесь интересная статья о реализации скругленных бордеров в CSS3? правда только на примере Firefox, так как у IE и Opera пока еще нет поддержки этого специального атрибута (скругления).
CSS3_скругление бордеров


  • 0

#4 FaTeRy

FaTeRy
  • Пользователь
  • 480 сообщений
  • Репутация: 1

Отправлено 23 Август 2009 - 00:42

Нету времени проверять то, что вам уже кинули, просто скину то, по чему я учился) Закругление углов вообще без картинок.
http://designformast...rners-no-image/
  • 0

#5 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 23 Август 2009 - 08:18

способ 1


<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Скругленные уголки</title>
<style type="text/css">
.r1, .r2, .r3, .r4 {
display: block;
font-size: 0;
height: 1px;
background: #f677c5;
}
.r1 { margin: 0 5px; }
.r2 { margin: 0 3px; }
.r3 { margin: 0 2px; }
.r4 { margin: 0 1px; height: 2px; }
.block-round-content {
background: #f677c5; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block-round">
<b class="r1">&nbsp;</b><b class="r2">&nbsp;</b><b class="r3">&nbsp;</b><b class="r4">&nbsp;</b>
<div class="block-round-content">
Цель конкурса — обнаружение предметов материального мира,
обладающих колоссальной ценностью, принадлежащих живому биологическому
организму, в дальнейшем именуемым драконом, и их экспроприация.
</div>
<b class="r4">&nbsp;</b><b class="r3">&nbsp;</b><b class="r2">&nbsp;</b><b class="r1">&nbsp;</b>
</div>
</body>
</html>


способ 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Скругленные уголки</title>
<style type="text/css">
.r1, .r2, .r3 {
display: block; font-size: 0; height: 1px; background: #7da7d9;
}
.r1 { margin: 0 4px; }
.r2 { margin: 0 2px; }
.r3 { margin: 0 1px; height: 2px; }
.block-round-content {
background: #7da7d9; /* Цвет фона */
color: #fff;
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block-round">
<b class="r1">&nbsp;</b><b class="r2">&nbsp;</b><b class="r3">&nbsp;</b>
<div class="block-round-content">
При истечении возможности понимания вышеизложенной информации вы
имеете объективную возможность подать официальный запрос главному
субординатору локальной виртуальной вселенной.
</div>
<b class="r3">&nbsp;</b><b class="r2">&nbsp;</b><b class="r1">&nbsp;</b>
</div>
</body>
</html>

  • 0

#6 Dengere_Ash

Dengere_Ash
  • Пользователь
  • 27 сообщений
  • Репутация: 0

Отправлено 23 Август 2009 - 18:52

Есть вариант border-radius, но он есть только в CSS3, стандарты которого ещё не готовы, и свойства почти не один браузер не поддерживает...
  • 0

#7 Banderas

Banderas
  • Пользователь
  • 1 168 сообщений
  • Репутация: 1

Отправлено 26 Август 2009 - 09:09

2*Dengere_Ash* угу, очень удобная функция, закругления углов в 2 строчки :rolleyes:
  • 0



Оформление форума – IPBSkins.ru