/ видеообзоры / доска объявлений / знакомства / игры / хостинг файлов / цитаты /

Автор Тема: Круглые углы или rounded borders CSS3 in IE  (Прочитано 8045 раз)

Оффлайн admin

  • Administrator
  • Hero Member
  • *****
  • Сообщений: 587
    • Просмотр профиля
    • Отзывы
Круглые углы или rounded borders CSS3 in IE
« : 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/
« Последнее редактирование: 30 Января 2011, 09:32:30 от admin »

Оффлайн admin

  • Administrator
  • Hero Member
  • *****
  • Сообщений: 587
    • Просмотр профиля
    • Отзывы
Re: Имитация закругления в CSS 2
« Ответ #1 : 26 Января 2011, 13:43:33 »
Имитация закругления в CSS 2


оригинал, с картинками http://vremenno.net/html-css/38-articles-about-creating-rounded-corners/


Без использования пустых тегов

Простой, семантически правильный CSS блок с чистым кодом
Создает блок и добавляет возможность создания заголовка блока. Тянется по ширине и высоте. Несмотря на тень на примере, реализации полупрозрачной тени не предусмотрено.

Закругленные углы в CSS
Очень приятный внешний вид, простая реализация, малое количество HTML-элементов. К минусам, пожалуй, можно отнести только наличие 4 картинок для каждого из углов. Но увы не работает в IE.

CSS тизер-блок
Предусмотрена реализация как одно- так и двух-картиночного метода. Малое количество HTML-элементов. Очень удобно для создания тизеров.

Ссылки на последние новости
Очень интересное решение на основе неупорядоченного списка. Плюсом будет простая реализация и малое количество HTML-элементов. Приятное оформление с функцией изменения цвета при наведении мышкой (но эта приятность не работает в IE).

CSS и закругленные углы: Границы с дугами
Неоспоримым минусом является наличие 8 дивов для реализации. Так же в статье есть описание другого метода, в котором используется в 2 раза меньше дивов, но блок залит цветом.

Озаглавленные сверху углы
Реализовано на основе списков определений. Достаточно красивое оформление, возможность создания заголовка. Отсутствует поддержка изменения ширины. Но есть удобная возможность быстрого изменения цвета заголовков и самого блока.

Создание скругленного блока или дизайн с CSS и XHTML
Как и в предыдущем способе все реализовано на основе списка определений. В статье рассмотрено два способа реализации. Так же появилась возможность тянущейся ширины.

Резиновый блок с легко изменяемыми углами и поверхностью
Минусами в этом способе так же является большое количество дивов (5) и 4 файлов картинок. Но есть интересные примеры для реализации.

Закругленные углы бордера
Не является полным уроком, но показывает принцип использования единичного бордера и картинки.

Закругленные углы в CSS
Достаточно приятный урок. Его минусом, пожалуй, является относительно большое количество HTML-элементов и наличие 4 картинок для каждого из углов.

Создание произвольных углов и границ
Используется 4 файла с картинками (максимальная ширина блока зависит от ширины картинки). Но очень подробный урок.

&laquo;Пуленепробиваемые&raquo; закругленные углы

Очень подробная статья с большим количеством примеров. Но достаточно сложная реализация. К тому же используется 4 картинки.

Рисование теней и рамок элементов оформления
Статья Владимира Токмакова. Весьма сложная реализация, но к плюсам, конечно, относится возможность создания полупрозрачных теней. Статья на русском.

Закругленные углы с фиксированной шириной
Интересный пример использования. Но минус в фиксированной ширине данного способа. Плюс &mdash; очень простая реализация.

CSS тянущийся блок с 4 произвольными углами
Вполне хороший урок. Возможность отбрасывания теней. Плюс &mdash; возможность создания заголовков.

Делаем закругленные углы с помощью псевдоэлементов :before и :after
Статья уже была описана на Хабре. Очень простая реализация, но не все примеры, приведенные в статье, работаю в IE. Используется 4 файла с картинками для реализации. Статья на русском.

Создание произвольных углов и границ. Часть II
Описывается способ при котором фон не сплошной, а градиентный. Используется 4 картинки.

Закругленные углы в DIVах
Описано 3 способа реализации. Таблицами, дивами и дивами без картинок. Последний вариант не очень хорош, так как используется много пустых тэгов.

Закругленные углы и блоки с тенью
Пожалуй, не очень хороший способ, так как используется 5 картинок. Но вроде бы предусмотрена возможность создания тени. Плюс &mdash; использование только двух HTML-элементом.

Занимательная верстка
Статья на Хабре, в которой хабражители пытаются предложить свои варианты решения. Статья на русском.



Использующие пустые теги

Еще больше закругленных углов с CSS
Приятная на внешний вид техника, но жаль, что нет реализации PNG под IE.

CSS резиновые закругленные углы
Использует по два пустых тега на верх и низ блока. К минусам относится 6 картинок для реализации.

CSS: Умные углы
Использует один пустой &lt;span&gt; для верха и два для низа. Вполне приятная реализация.

Как сделать тянущиеся по ширине divы с круглыми краями
Вроде бы и с PNG, но опять же в IE не работает. В качестве плюсов можно назвать урок по рисованию круглых краев :)

Тянущиеся закругленные углы
Большая подробная статья с большим количеством картинок. Но на каждый угол по диву, плюс див для контента.

Закругление углов без использования изображений
Способ безкартиночного создания закругленных углов. Но много пустых элементов &lt;B&gt; (способ, аналогичный блокам GMail).



Использующие JavaScript

Представление DomCorners
В статье есть несколько вариаций на тему количества используемых изображений. Минус в использовании пустых тэгов.

Прозрачные произвольные углы и границы. Версия 2
Приятный пример использования. Красивое оформление. Отбрасывание полупрозрачных теней, но тени не работают в IE.

Nifty углы со сглаживанием
В своем роде является добавление к скрипту Nifty Corners. Не использует изображений. Можно изменять радиус скругления как по оси X так и по Y.

Закругленные углы
Очень простая реализация, всего один элемент div. Так же в комментариях много дополнений.

www.curvycorners.net
Отдельный сайт посвященный закругленным углам. Красивые примеры использования. Очень простая реализация и много возможностей настройки.

Nifty Corners Cube
Очень популярный скрипт, позволяющий создать закругленные углы без изображений. Очень много вариантов реализации.

RUZEE.Borders &mdash; закругленные углы с помощью яваскрипта
Достаточно большое количество возможностей. Так же основан на Nifty. Возможность создавать тень, но не работает в IE.

jQuery скругление
Пожалуй самый большой выбор всевозможных углов. Малое количество HTML-элементов для реализации.



Генераторы круглых краев

RoundedCornr
Большое количество возможностей. Генерирует 4 типа блоков, в том числе и кнопки. Единственный минус в наличие пустых тегов в генерируемом коде.

Spiffy Corners
Очень простой генератор. Но генерирует очень большое количество элементов &lt;B&gt;.

Spanky Corners 1.1
Простой генератор с хорошим HTML-кодов, плюс генерирует отдельный css-файл для IE.

Spiffy Box
Генерирует одну png-картинку с заданными параметрами. К плюсам можно отнести простой HTML-код. Так же в статье есть ссылка на урок, по которому создан генерируемый код.