Раздер Название темы Ответов Последний
Графика для сайта Shareman 3.70 RUS/2010 0 mandelsonsouggisse
Изготовление контента Нужен контент 10 ali7875
DataLife Engine Проблема регистрации. 1 JimaX
DataLife Engine Модальное окно в DataLife Engine 3 lionprizrak
DataLife Engine Настройка robots.txt 8 Prizrak_2012
Стол заказов на cmsko.ru Мини-чат. 2 JimaX
Общение пользователей Статьи 3 nastroenie
Хостинг TneHost - Хстинг провайдер 10 ali7875
DataLife Engine Установка банеров 9 JimaX
DataLife Engine Помогите с установой. dle95 2 nastroenie
Яндекс Apdate
Апдейты Яndex тИЦ
25.09.2013Последний |
02.07.2013
23.05.2013
Апдейты Яndex выдачи
18.10.2013Последний |
17.10.2013
12.10.2013
Апдейты ЯКаталога
23.10.2013Последний |
22.10.2013
21.10.2013

Информация
Главная страница » Для веб-мастера » Скрипты » Делаем закругленные углы без картинок
Делаем закругленные углы без картинок
» Просмотров: 2048 » Дата: 26-01-2011, 20:54 » Автор: NeoMurderer

Делаем закругленные углы блоку без картинок и т.п.

Конечно можно и картинками, это будет выглядеть примерно так:

 

</p>
<p>.content{background:url(../img/top-left.png) no-repeat top left}</p>
<p>.in1{background:url(../img/top-right.png) no-repeat top right}</p>
<p>.in2{background:url(../img/bottom-left.png) no-repeat bottom left}</p>
<p>.in3{background:url(../img/bottom-right.png) no-repeat bottom right}</p>
<p>

Но как Вы могли бы заметить это занимает много времени(рисование картинок),и вообще непрактично.

Мы будем пользоваться обычным СSS.А именно свойством border-radius .Но он одно нам не поможет, нам нужно сделать данный блок кроссбраузерным.

Для начала создадим подобный блок

 

</p>
<p><div style="width: 300px; height: 83px; background: #f2f2f2; border: 1px #000 solid; padding: 30px;"> // Cтили что бы у меня он отображался нормально.</p>
<p>Я какой-то блок с  без закругленных углов =), без помощи картинок</p>
<p><div></p>
<p>

Выглядеть он будет так:

 

Я какой-то блок с  без закругленных углов =(, без помощи картинок

 

Теперь в СSS или просто в style прописываем код:


-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;

Как Вы заметили мы добавили еще некоторые стили, это для той самой кроссбраузерности. Где 10px это радиус закругления.
Посмотрим что у нас получилось теперь:

Я думаю, этот урок Вы поняли, и жду от Вас комментариев.

 

 

 

 Обновлено

------------------- 

Теперь давайте попробуем научить это му же ИЕ. 

Делается это просто:

1.Скачиваем файл[attachment=207:border-radius.htc] и ложим рядом с вашим css файлом

2.В css прописываем 

behavior: url(border-radius.htc);

3.Готово botanik  




Комментарии: 2
 (голосов: 2)
Max(Гости) 20 марта 2011 14:03
Это конечно интересно, но как быть с IE

Это конечно интересно, но как быть с IE
NeoMurderer(Администраторы) 20 марта 2011 14:29
Обновил новость
Уважаемый посетитель, Вы зашли к нам на сайт как незарегистрированный пользователь. Мы рекомендуем Вам бесплатно зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.