X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сделать сглаженные края?
arlexs
arlexs
Topic Starter сообщение 21.7.2009, 19:23; Ответить: arlexs
Сообщение #1


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

Заранее ОГРОМНОЕ СПАСИБО!!!!!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 21.7.2009, 21:21; Ответить: yury_mw
Сообщение #2


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.prostrahovanie.ru/img/circ/16lt.png 16lt.png
http://www.prostrahovanie.ru/img/circ/16rt.png16rt.png
http://www.prostrahovanie.ru/img/circ/16lb.png16lb.png
http://www.prostrahovanie.ru/img/circ/16rb.png16rb.png
"Цветность" задается дополнительным классом у внешнего блока:
если напишете вместо <div class="title blue"> - <div class="title orange"> будет не синий заголовок, а оранжевый.
Естественно, классы blue, orange и любые другие, задающие цветность, должны быть описаны в вашем CSS.


Поблагодарили: (1)
HashMan
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Flashburn
Flashburn
сообщение 22.8.2009, 14:06; Ответить: Flashburn
Сообщение #3


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

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

А здесь интересная статья о реализации скругленных бордеров в CSS3? правда только на примере Firefox, так как у IE и Opera пока еще нет поддержки этого специального атрибута (скругления).
CSS3_скругление бордеров
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fatery
fatery
сообщение 23.8.2009, 1:42; Ответить: fatery
Сообщение #4


Нету времени проверять то, что вам уже кинули, просто скину то, по чему я учился) Закругление углов вообще без картинок.
http://designformasters.info/posts/round-corners-no-image/


--------------------
AboutApple
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sc2r2bey
sc2r2bey
сообщение 23.8.2009, 9:18; Ответить: sc2r2bey
Сообщение #5


способ 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>


--------------------
Заметки о разработке и не только
программирую web и для we
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Dengere_Ash
Dengere_Ash
сообщение 23.8.2009, 19:52; Ответить: Dengere_Ash
Сообщение #6


Есть вариант border-radius, но он есть только в CSS3, стандарты которого ещё не готовы, и свойства почти не один браузер не поддерживает...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Banderas
Banderas
сообщение 26.8.2009, 10:09; Ответить: Banderas
Сообщение #7


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
 11 Boymaster 1772 Вчера, 23:35
автор: Boymaster
Горячая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
 29 freeax 4791 Вчера, 1:19
автор: sergio11
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
 148 adw-kupon.ru 19700 8.4.2024, 10:37
автор: Skyworker
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
 18 uahomka 3090 5.4.2024, 5:53
автор: Skyworker
Горячая тема (нет новых ответов) Как бездомные хранят деньги?
 81 metvekot 13648 31.3.2024, 12:44
автор: Boymaster


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 18.4.2024, 23:10

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet