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



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

#1 arlexs

arlexs
  • Неактивные
  • 7 сообщений
  • Репутация: 0
0

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

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

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

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как сделать дизайн сайта?
  2. Авторизация на сайте. Как сделать?
  3. Мягкая тень по краям фона сайта
  4. 10 способов украсить сайт
  5. Как сделать анимирование графической ссылки при наведении курсора?

#2 yury

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

Отправлено 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