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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография Napoleon-007
    #7

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 15.08.2018
Топ 5 участников по репутации


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

#1 arlexs

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

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

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

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

 

 

  • 0

robot

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

#2 yury

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

Отправлено 21 July 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 August 2009 - 13:06

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

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

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


  • 0

#4 FaTeRy

FaTeRy
  • Неактивные
  • 480 сообщений
  • Репутация: 1

Отправлено 23 August 2009 - 00:42

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

#5 surfer

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

Отправлено 23 August 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 August 2009 - 18:52

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

#7 Banderas

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

Отправлено 26 August 2009 - 09:09

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

I'm web-developer 

Magento one love!





Похожие темы

  Название темы Автор Статистика Последнее сообщение

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