Закругленные углы с помощью CSS

Этот метод стал почти классическим, достаточно прост и не требует каких-то особенных знаний и навыков. Прежде всего, нужно создать четыре изображения для уголков картинки. Большинство графических редакторов поддерживают создание изображений с закругленными углами, так что давайте создадим нечто вот такое:

… и выделим из него четыре нужных нам угла -

В месте, где надо вывести блок, нужно создать div, в котором будет содержаться блок, div для верхней строки и div для нижней строки. Между этими верхними и нижними строками будет наш контент. В верхнем и нижнем div я добавил картинку с левым уголком и установил стиль display: none; Это сделает нашу картинку видимой через таблицу стилей. Кроме того, я могу спрятать эффект от неподдерживающих это браузеров не показывая им таблицу стилей.

<div class="roundcont">
   <div class="roundtop">
  <img src="tl.gif" alt="" 
  width="15" height="15" class="corner" 
  style="display: none" />
   </div>

   
Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et 
   dolore magna aliqua. Ut enim ad minim veniam, quis 
   nostrud exercitation ullamco laboris nisi ut aliquip 
   ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu 
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit 
   anim id est laborum.
  
   <div class="roundbottom">
  <img src="bl.gif" alt="" 
  width="15" height="15" class="corner" 
  style="display: none" />
   </div>
</div>

CSS устанавливает ширину и цвет фона контейнера и цвет текста внутри него. Поля внутри параграфов тоже установлены, так что текст не прилип к правому верхнему краю. Вот код css:

.roundcont {
 width: 250px;
 background-color: #f90;
 color: #fff;
}

 .roundcont p {
 margin: 0 10px;
}

 .roundtop { 
 background: url(tr.gif) no-repeat top right; 
}

 .roundbottom {
 background: url(br.gif) no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

А теперь соединяем это все вместе. На выходе у вас должна получиться красивенькая таблица с закругленными углами. Это работает в IE6, Mozilla 1.3, and Opera 7. Однако должно работать и в других современных браузерах.

Закругленные углы БЕЗ картинок.

Главная идея такого метода - получить несколько цветных линий для создания эффекта закругленных углов. Вот шаблон для создания блока с закругленными углами:

<div id="container">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<-- Здесь контент -->
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div> 

А вот основная CSS:

.rtop, .rbottom{display:block}
 .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
 .r1{margin: 0 5px}
 .r2{margin: 0 3px}
 .r3{margin: 0 2px}
 .r4{margin: 0 1px; height: 2px} 

Конечный эффект можно увидеть на этом простом примере. Хочу сказать пару слов об использовании тега <b>. Мне нужен был inline элемент, чтобы получить закругленные углы поскольку он может быть внедрен в едва ли не каждый тег не нарушая правильность использования CSS. Выбор пал на <b> т.к он не имеет семантического значения и он короче, чем span.

Технология работает даже на плавающих, заданных абсолютно или относительно элементах. Однако не исполняется на элементах с фиксированной высотой или с отступами (padding). Оба эти недостатка могут быть легко устранены с помощью дополнительного контейнера вокруг контента.

Известные недостатки: размер отступа в первой строке элемента некорректно отображается в Опере, а IE портит все в плавающих элементах, если не задана ширина.
А вообще, поддерживаются все современные браузеры: протестировано на Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE . Но не работает в IE 5.x на PC.
Все просто, не так ли? А можно сделать еще интереснее…

Закругленные углы с помощью CSS и JavaScript

Поэтому, следующим шагом будет избавление от ненужного тега <b> и заменой его конструкциями DOM (Document Object Model), которая будет скруглять любой элемент на страницу без лишних строк HTML или CSS. Посмотрите на следующий пример - как видно из кода, никаких лишних разметок внутри нет! Все проделано с помощью комбинации CSS и Javascript. Технология состоит из четырех основных частей:

1. CSS файл для экранной версии
2. CSS файл для версии для печати
3. Javascript Библиотека для получения модных уголков
4. javascript вызовы, чтобы скруглять нужные элементы

Первые три компонента не нуждаются в изменениях. Их нужно просто вызвать в секции head любой страницы, например так:

<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>

Чтобы понять, как сделать четвертую часть, вы сначала должны понять как устроена javascript библиотека для красивых уголков. Не волнуйтесь: совсем необязательно знать javascript чтобы использовать библиотеку.

Функции javascript

Если вы взглянете в код примера, вы заметите, что я оставил подключенную CSS и часть javascript, чтобы показать как построена страница. Давайте взглянем в подключенный javascript код:

<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#nifty","#377CB1","#9BD1FA");
}
</script> 

Функция NiftyCheck выполняет проверку на поддержку стандарта DOM и отказывает браузеру IE5.x в выполнении скрипта. Если тест пройден, вызывается функция Rounded. Она содержит четыре параметра:

1. Селектор CSS который указывает, где надо применить функцию
2. Наружный цвет закругленного угла
3. Внутренний цвет закругленного угла
4. Необязательный четвертый параметр, который, выведет маленькие уголки, если ему присвоено значение "small"

Главное достоинство этой функции в том, что можно просто задать селектор CSS тем элементам, которые надо скруглить. Поддерживаемые элементы:

• Собственно, тег, т.е. "p" или "blockquote" или "h2"
• Id, с тегом: например "div#content" или "p#news" иди "li#home"
• Селектор class: например "div.entry" или "h2.highlight"
• Дочерние селекторы, с некоторыми ограничениями: они должны состоять из ID, следующего за селектором тега. Верные примеры: "div#news div" или "ul#menu li"

Что качается цветов: они должны быть заданы в шестнадцатеричном формате со знаком "#" и состоять из трех или шести цифр. Внешний цвет может быть задан прозрачным.

Четвертый параметр обязательный и должен быть задан как "small" , чтобы получить маленькие уголки. Посмотрим пример:

window.onload=function(){
if(!!NiftyCheck())
    return;
Rounded("div#header","transparent","#C3D9FF","small");
} 

Я создал еще две дополнительные функции, которые могул оказаться очень полезными: RoundedTop и RoundedBottom, которые имеют те же самые параметры функции Rounded и позволяют получать закругленные углы для верхних и нижних элементов страницы или для четырех углов, но так, чтобы верхние отличались от нижних по цвету.
А сейчас… Давайте посмотрим пару примеров.

Примеры

А сейчас интересная часть…
Я создал пару примеров, чтобы показать возможности технологии. Для каждого примера на этой странице именно javascript вызывает функции Rounded, RoundedTop и RoundedBottom, Но помните, что эти вызовы должны быть включены в следующий код:

window.onload=function(){
if(!NiftyCheck())
    return;
/* here the calls to add Nifty Corners */
} 

А сейчас, начнем!

Пример 1: просто div

Rounded("div#nifty","#377CB1","#9BD1FA"); 

Пример 2: 2 divs

Rounded("div#content","#fff","#9DD4FF");
Rounded("div#nav","#fff","#E5FFC4"); 

Пример 3: маленькие уголки

Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2"); 

Пример 4: блоки новостей

RoundedTop("div.news","#FFF","#91A7E3");
RoundedBottom("div.news","#FFF","#E0D6DF"); 

Пример 5: прозрачное, табличное меню

RoundedTop("div#nav li","transparent","#E8F0FF"); 

Пример 6: галерея картинок

Пример 7: закругление формы

Rounded("form","#FFF","#BBD8FF");
Rounded("label","#BBD8FF","#FFF","small"); 

Пример 8: все и сразу

<link rel="stylesheet" type="text/css" href="roundedPage.css">
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript" src="final.js"></script> 

Файл final.js содержит все вызовы, посмотрим его содержание:

window.onload=function(){
if(!NiftyCheck())
    return;
RoundedTop("div#container","#FFF","#e7e7e7");
RoundedBottom("div#container","#FFF","#E9F398");
RoundedTop("ul#nav li","transparent","#E8F0FF");
Rounded("div#box","#C0CDF2","#E4E7F2");
Rounded("div#minipics li","#C0CDF2","#FFF");
RoundedTop("div.gradient","#C0CDF2","#B8B8B8");
RoundedBottom("div.gradient","#C0CDF2","#ECECF2");
} 

Совсем просто, правда? Если мы используем технологию, основанную на использовании фоновых картинок, вероятно, мы воспользуемся 18 картинками, может быть какими-то лишними распорками и множеством описаний в css. А теперь посчитайте, сколько килобайт мы можем сберечь? Где-то 18-20 кб или около того.

Вы можете скачать архив, содержащий скрипт, html и css примеров здесь.

Интересные программы

Обращаем Ваше внимание! В рассылке публикуются далеко не все программы, а только подборка из 2-х последних выпусков. Очень много софта "проходит мимо" рассылки! Поэтому, мы Вам рекомендуем почаще заходить в раздел программ и следить за новинками.

SmartFTP 1.5 build 990
FTP-клиент, не менее мощный, чем популярный CuteFTP. Основные особенности: поддержкаDrag & Drop, мультизагрузка, поддержка SSL и FXP (перекачка с одного сервера непосредственно на другой), встроенная система поиска файлов, использование фаворитов, докачка, шедулер и многое другое. В случае личного, образовательного или/и некоммерческого использования программа является бесплатной. При необходимости русскую локализацию (она несколько отстает в версиях) можно скачать с домашней страницы.
Win 9*/ME/NT/2K/XP,Free,EN
Скачать!

AutoGK (Auto Gordian Knot) v.2.20
Обновилась AutoGK (Auto Gordian Knot) - мощная, но в тоже время простая в использовании утилита для создания копий DVD-дисков в форматах AVI, DivX и XViD. В состав данного сборника входят следующие компоненты: VirtualDubMod
AviSynth & AviSynth Filters
DGMPGDec
VobSub
XviD
Auto Gordian Knot
Программа позволяет использовать в качестве источника DVD, MPEG2 или потоковое видео, а в качестве выхода выдает XviD или DivX формата. AutoGK умеет работать с AC3, DTS, PCM, MPA, CBR MP3 и VBR MP3. Кроме того, присутствуют все необходимые настройки и возможности для создания копий, удовлетворяющих вашим запросам. В новой версии обновлена обучающая система, произведены другие улучшения и исправления.
7.00 MB Freeware, Windows All, EN
Скачать!

Захват экрана v.1.0
Программма для захвата изображения на экране. Она позволяет: - захватывать изображение: весь экран, активное окно, выделенную область - изменять полученное изображение - добавлять эффекты к изображению - сохранить изображение в форматах BMP, JPEG - распечатать изображение
341.00 KB Windows 95/98/NT, Бесплатно,RU
Скачать!

Знаменательные даты 1.2 Lite
Стильно выполненные напоминания о днях рождения, праздниках, юбилеях и т.п. Программа "Знаменательные даты" состоит из двух частей: "Редактор" и "Автозапуск". В "Редакторе" можно заносить знаменательные даты различных событий - праздников, дней рождения, свадеб и т.п. "Автозапуск" запускается при каждой загрузке компьютера и показывает список знаменательных дат на заданный период от текущей даты, при этом все настройки задаются в "Редакторе". Отличительными особенностями этой программы является стильный интерфейс, красивые схемы автозапуска, а также поддержка как статических, так и сложных динамических дат. В установочном архиве содержится 1 схема автозапуска и не содержится праздничных баз и музыкального оформления. Дополнительные схемы автозапуска и праздничные базы, можно скачать с сайта разработчика.
5.23 MB Win9*/ME/NT/2K/XP,Free,RU
Скачать!

Weather screensaver v. 1.0.0.1
Скринсейвер, показывающий текущую погоду в любой точке мира. Вы можете настроить Ваше положение и получать информацию о текущей температуре, скорости и направлении ветра, влажности и т.д.
512.00 KB Windows 95/98, Бесплатно, RU
Скачать!

Selteco Menu Maker 4.12
Selteco Menu Maker - очень качественный визуальный инструмент для создания всплывающих меню для информационных узлов с применением DHTML и JavaScript. Никаких знаний DHTML и JavaScript не требуются. Встроенный браузер отображает ваше меню точно также как оно будет выглядеть на вашем сайте. Меню можно сохранить в одном .js файле, и затем легко включать в свои страницы. Небольшой размер кода гарантирует быструю загрузку страниц.
Win9*/ME/NT/2K/XP,Shareware,EN
Скачать!

Photo Collage 1.32 Full
Photo Collage - это полнофункциональная утилита для создания комбинированных коллажей. Кроме этого этот графический инструмент может создавать обложки для CD и DVD, обои для рабочего стола и всякую web-графику. В настройках программы много разных шаблонов, масок, рамок, что позволяет работать быстро и без напряга. Photo Collage может выполнять и функции просмотрщика изображений с возможностью запирать от посторонних глаз свои приватные папки .
13.85 MB Win 9*/ME/NT/2K/XP,Free,EN
Скачать!

HD Tune 2.51
HD Tune 2.51 программа для диагностики жесткого диска.
625.00 KB Win 9*/ME/NT/2K/XP,Free,EN
Скачать!

MySQL 5.0.15
Сервер баз данных.
42.00 MB Win9*/ME/NT/2K/XP,Free,RU
Скачать!

Напоминальщик
Эта небольшая программа сидит в трее и периодически проверяет "А не пора ли о чем-нибудь напомнить?". Имеются различные настройки: озвучивание, притягивание курсора к кнопке, назначеной по умолчанию...
834.00 KB Win9*/ME/NT/2K/XP,Free,RU
Скачать!

ASP Text Converter 2.9.4
Наверняка вы иногда получали письма или файлы которые не удается прочитать, программа ASP Text Converter предназначена для восстановления русских текстов, испорченных в процессе передачи по электроной почте, и файлов, неправилино закодированных, а также для закодирования и перекодирования собственных файлов. При восстановлении и перекодировании текста поддерживаются следующие кодировки: DOS 866, WINDOWS 1251, ISO 8859-5, UNIX KOI-8, MAC Apple. Кроме того при помощи данного конвертера можно как создавать новые, так и редактировать уже созданные текстовые документы. Имеется возможность внедрять данные из других документов в документ ASP Text Converter.
3.33 MB Win9*/ME/NT/2K/XP,Free,RU
Скачать!

Winamp 5.11 Lite
Популярный мультимедийный плеер. Версия Lite - только плеер, но доступен и целый пакет мультимедийных программ, куда, кроме пллера, входят средства для записи аудио-CD, перезаписи CD на жесткий диск и т.п.
936.00 KB Win9*/ME/NT/2K/XP,Free,EN/RU
Скачать!

phpMyAdmin 2.6.4 PL2
phpMyAdmin 2.6.4 PL2 программа на PHP для администрирования MySQL баз данных. С помощью этой программы можно создавать, изменять, копировать или удалять базы данных и таблицы. Есть возможность исполнять SQL-запросы и наполнять таблицы содержимым. Программа имеет русский интерфейс.
2.91 MB Win9*/ME/NT/2K/XP,Free,RU
Скачать!

Интересные ссылки

PHP: 10 советов для новичков (ч.1), Часть 2

что-то вроде очень краткого конспекта. только самые важные моменты, но для старта вполне достаточно

Internet-Technologies.Ru

Все об Интернет-Технологиях: статьи, книги, форумы, каталог ссылок и многое другое. Полезные советы и новости, полезная инфа как для новичков, так и для профессионалов.

Фотографии с Марса

идея ресурса проста: всем желающим предоставляется доступ к "живым" фотографиям поверхности Марса, сделанным научным инструментом THEMIS зонда Mars Odyssey. Ну оЧЧЧень занятно

A List Apart

Имхо, фраза в области логотипа этого сайта "For people who make websites" вполне описывает всю идею проекта : много интересной информации о сайтостроительстве, кодинге, юзабилити.
Язык: английский

Несколько новостей из интернета за последние пару дней:

• Наступает эпоха "мнущейся электроники" (31/10/2005)
• Россия: Nokia начали раздавать бесплатно (31/10/2005)
• Шпионские программы: первый классификатор (31/10/2005)
• В популярном форуме найдены уязвимости (31/10/2005)
• Пароли Oracle ненадежны? (31/10/2005)
• Мобильники будут знать владельцев "в лицо" (31/10/2005)
• Российские "топы" готовы платить за ПО? (30/10/2005)
• Женщины оккупируют компьютерные игры (30/10/2005)
• Треть пользователей США боятся интернета (30/10/2005)
• Купите себе голос для рекламы (29/10/2005)
• Осенняя рапродажа: AMD снова снижает цены (29/10/2005)
• Осенняя рапродажа: AMD снова снижает цены (29/10/2005)
• Vodafone продает телефоны, как шоколадки (29/10/2005)
• Монополизм: Microsoft взялась за старое? (28/10/2005)
• Rambler выпустил исследование "Интернет в России 2004" (28/10/2005)

Последние темы форума:

Форум	Тема	Ответов	Просмотров	Последнее сообщение
Графические редакторы	[Вопрос...] Шрифты в Photoshop	8	97	31/10/2005 19:05 it4all
Графические редакторы	[Помогите!] Активизация Photoshop'a	5	149	31/10/2005 12:06 Aventura
Флейм	Что подарить на 40 лет?	3	70	30/10/2005 23:52 Crystall
Обсуждение сайтов	Gravis	0	27	30/10/2005 17:55 dinja
Кино и Музыка	Архив советских мультфильмов и кинофильмов!	5	1094	30/10/2005 15:18 Crystall
Обсуждение сайтов	Зацените сайт - JoinFriends.com - поиск одноклассников.	4	404	30/10/2005 4:18 ivc
Теория Web-design'a	[Помогите!] создание форума на сайте    [1][2][3]	21	605	30/10/2005 1:30 Crystall
Флейм	Осень 2005. Чем она запомнится?    [1][2][3]	27	2031	29/10/2005 14:59 N.P.
Графические редакторы	[Помогите!] PhotoShop || Профиль монитора    [1][2]	12	2476	28/10/2005 9:34 stalin
Графические редакторы	[Помогите!] Русификация CS2	7	1889	28/10/2005 9:23 stalin