RusLog.com
Вебмастерская => Вебдизайн/Вёрстка => Тема начата: admin от 14 Апреля 2010, 07:56:58
-
- А вы не знаете, почему кабинет президента США называется овальным?
- Ну так это Билл Клинтон с Моникой, все углы посшибали ...
CSS3 позволяет создавать элементы не только прямоугольными, но и овальными.
Делается это с помощью свойства:
border-radius: 10px;
Так как не все браузеры одинаково воспринимают данную команду, рекомендуется писать её в трёх экземплярах:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Первая - общий формат, работает в Опере, начиная с версии 10.51.
Вторая строка для Firefox (Mozilla)
А третья - Сафари и Гуглохром.
Но и это не всё. Есть ещё ИнтернетЭксплорер, он же IE, и старшие братья Opera 10.51 - 7.0, 7.11, 7.54, 8.0, 8.53 и др.
Что с этими делать?
Подключать Жаваскрипт.
Идём на http://www.curvycorners.net/, качаем архив, ставим на сайт и втыкаем в код страницы
<script src="/js/curvycorners.js" type="text/javascript"></script>
После чего, в дефективных браузерах углы тоже начнут закругляться (не все, только те, где прописан border-radius)
Ещё вариант: http://css3pie.com/
Проверить, каково оно, в других бровсерах: http://browsershots.org/
-
Имитация закругления в CSS 2
оригинал, с картинками http://vremenno.net/html-css/38-articles-about-creating-rounded-corners/
Без использования пустых тегов
Простой, семантически правильный CSS блок с чистым кодом (http://www.vertexwerks.com/tests/sidebox/)
Создает блок и добавляет возможность создания заголовка блока. Тянется по ширине и высоте. Несмотря на тень на примере, реализации полупрозрачной тени не предусмотрено.
Закругленные углы в CSS (http://virtuelvis.com/gallery/css/rounded/)
Очень приятный внешний вид, простая реализация, малое количество HTML-элементов. К минусам, пожалуй, можно отнести только наличие 4 картинок для каждого из углов. Но увы не работает в IE.
CSS тизер-блок (http://www.456bereastreet.com/archive/200406/css_teaser_box/)
Предусмотрена реализация как одно- так и двух-картиночного метода. Малое количество HTML-элементов. Очень удобно для создания тизеров.
Ссылки на последние новости (http://www.456bereastreet.com/lab/newslist/)
Очень интересное решение на основе неупорядоченного списка. Плюсом будет простая реализация и малое количество HTML-элементов. Приятное оформление с функцией изменения цвета при наведении мышкой (но эта приятность не работает в IE).
CSS и закругленные углы: Границы с дугами (http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml)
Неоспоримым минусом является наличие 8 дивов для реализации. Так же в статье есть описание другого метода, в котором используется в 2 раза меньше дивов, но блок залит цветом.
Озаглавленные сверху углы (http://www.alistapart.com/articles/mountaintop/)
Реализовано на основе списков определений. Достаточно красивое оформление, возможность создания заголовка. Отсутствует поддержка изменения ширины. Но есть удобная возможность быстрого изменения цвета заголовков и самого блока.
Создание скругленного блока или дизайн с CSS и XHTML (http://tutorials.alsacreations.com/cadre/)
Как и в предыдущем способе все реализовано на основе списка определений. В статье рассмотрено два способа реализации. Так же появилась возможность тянущейся ширины.
Резиновый блок с легко изменяемыми углами и поверхностью (http://roundedbox.andreas-kalt.de/)
Минусами в этом способе так же является большое количество дивов (5) и 4 файлов картинок. Но есть интересные примеры для реализации.
Закругленные углы бордера (http://24ways.org/2005/broader-border-corners)
Не является полным уроком, но показывает принцип использования единичного бордера и картинки.
Закругленные углы в CSS (http://kalsey.com/2003/07/rounded_corners_in_css/)
Достаточно приятный урок. Его минусом, пожалуй, является относительно большое количество HTML-элементов и наличие 4 картинок для каждого из углов.
Создание произвольных углов и границ (http://www.alistapart.com/articles/customcorners/)
Используется 4 файла с картинками (максимальная ширина блока зависит от ширины картинки). Но очень подробный урок.
«Пуленепробиваемые» закругленные углы
(http://www.albin.net/css/roundedcorners)
Очень подробная статья с большим количеством примеров. Но достаточно сложная реализация. К тому же используется 4 картинки.
Рисование теней и рамок элементов оформления (http://www.artlebedev.ru/tools/technogrette/html/shadows/new/)
Статья Владимира Токмакова. Весьма сложная реализация, но к плюсам, конечно, относится возможность создания полупрозрачных теней. Статья на русском.
Закругленные углы с фиксированной шириной (http://www.nuff-respec.com/technology/rounded-corners-for-fixed-width-css-only)
Интересный пример использования. Но минус в фиксированной ширине данного способа. Плюс — очень простая реализация.
CSS тянущийся блок с 4 произвольными углами (http://codylindley.com/CSS/212/css-flexible-box-with-four-custom-corners)
Вполне хороший урок. Возможность отбрасывания теней. Плюс — возможность создания заголовков.
Делаем закругленные углы с помощью псевдоэлементов :before и :after (http://www.noinimod.ru/3/)
Статья уже была описана на Хабре. Очень простая реализация, но не все примеры, приведенные в статье, работаю в IE. Используется 4 файла с картинками для реализации. Статья на русском.
Создание произвольных углов и границ. Часть II (http://www.alistapart.com/articles/customcorners2/)
Описывается способ при котором фон не сплошной, а градиентный. Используется 4 картинки.
Закругленные углы в DIVах (http://www.rob-watson.co.uk/pages/19)
Описано 3 способа реализации. Таблицами, дивами и дивами без картинок. Последний вариант не очень хорош, так как используется много пустых тэгов.
Закругленные углы и блоки с тенью (http://www.w3.org/Style/Examples/007/roundshadow)
Пожалуй, не очень хороший способ, так как используется 5 картинок. Но вроде бы предусмотрена возможность создания тени. Плюс — использование только двух HTML-элементом.
Занимательная верстка (http://habrahabr.ru/blog/webdev/36812.html#habracut)
Статья на Хабре, в которой хабражители пытаются предложить свои варианты решения. Статья на русском.
Использующие пустые теги
Еще больше закругленных углов с CSS (http://www.schillmania.com/projects/dialog2/)
Приятная на внешний вид техника, но жаль, что нет реализации PNG под IE.
CSS резиновые закругленные углы (http://www.search-this.com/2007/02/12/css-liquid-round-corners/)
Использует по два пустых тега на верх и низ блока. К минусам относится 6 картинок для реализации.
CSS: Умные углы (http://green-beast.com/experiments/css_smart_corners.php)
Использует один пустой <span> для верха и два для низа. Вполне приятная реализация.
Как сделать тянущиеся по ширине divы с круглыми краями (http://blog.josh420.com/archives/2007/11/how-to-create-fluid-width-div-layers-with-rounded-corners.aspx)
Вроде бы и с PNG, но опять же в IE не работает. В качестве плюсов можно назвать урок по рисованию круглых краев :)
Тянущиеся закругленные углы (http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm)
Большая подробная статья с большим количеством картинок. Но на каждый угол по диву, плюс див для контента.
Закругление углов без использования изображений (http://designformasters.info/posts/round-corners-no-image/)
Способ безкартиночного создания закругленных углов. Но много пустых элементов <B> (способ, аналогичный блокам GMail).
Использующие JavaScript
Представление DomCorners (http://web-graphics.com/mtarchive/001660.php)
В статье есть несколько вариаций на тему количества используемых изображений. Минус в использовании пустых тэгов.
Прозрачные произвольные углы и границы. Версия 2 (http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/)
Приятный пример использования. Красивое оформление. Отбрасывание полупрозрачных теней, но тени не работают в IE.
Nifty углы со сглаживанием (http://acko.net/blog/anti-aliased-nifty-corners)
В своем роде является добавление к скрипту Nifty Corners. Не использует изображений. Можно изменять радиус скругления как по оси X так и по Y.
Закругленные углы (http://www.editsite.net/blog/rounded_corners.html)
Очень простая реализация, всего один элемент div. Так же в комментариях много дополнений.
www.curvycorners.net (http://www.curvycorners.net/usage.php)
Отдельный сайт посвященный закругленным углам. Красивые примеры использования. Очень простая реализация и много возможностей настройки.
Nifty Corners Cube (http://www.html.it/articoli/niftycube/index.html)
Очень популярный скрипт, позволяющий создать закругленные углы без изображений. Очень много вариантов реализации.
RUZEE.Borders — закругленные углы с помощью яваскрипта (http://www.ruzee.com/blog/ruzeeborders/)
Достаточно большое количество возможностей. Так же основан на Nifty. Возможность создавать тень, но не работает в IE.
jQuery скругление (http://malsup.com/jquery/corner/)
Пожалуй самый большой выбор всевозможных углов. Малое количество HTML-элементов для реализации.
Генераторы круглых краев
RoundedCornr (http://www.roundedcornr.com/)
Большое количество возможностей. Генерирует 4 типа блоков, в том числе и кнопки. Единственный минус в наличие пустых тегов в генерируемом коде.
Spiffy Corners (http://www.spiffycorners.com/)
Очень простой генератор. Но генерирует очень большое количество элементов <B>.
Spanky Corners 1.1 (http://tools.sitepoint.com/spanky/index.php)
Простой генератор с хорошим HTML-кодов, плюс генерирует отдельный css-файл для IE.
Spiffy Box (http://spiffybox.com/)
Генерирует одну png-картинку с заданными параметрами. К плюсам можно отнести простой HTML-код. Так же в статье есть ссылка на урок, по которому создан генерируемый код.