Эффекты CSS: закругление углов элементов
Синтаксис каскадных таблиц стилей построен так просто, что возможность получения самого неожиданного дизайна доступна даже далекому от программирования и разработки сайтов человеку. Возможно от того, что детские игры в кубики остались у каждого в памяти, использовать этот многогранный опыт в HTML, CSS не составляет труда.
Однако современное программирование еще очень далеко от представления конструкций реальной действительности. До сих пор любая область (занимаемая каким угодно блочным элементом) в любом ее значении и формальном назначении имеет прямоугольную форму, в пределах которой формируется нужная кривая линия контура.
До сих пор любая окружность, радиус скругления, сколь-нибудь искривленная прямая и т. п. описываются сложными математическими уравнениями либо очень мелкими кубиками, трапециями, треугольниками или иными прямолинейными элементами, которые для глаза различимы, как точка на линии.
Классические прямые конструкции
Нет ничего удивительного, что прогресс в области программирования и информационных технологий узаконил прямоугольные конструкции. Передовые идеи не стали тратить время на округлые формы, но не забыли представить в распоряжение разработчика достаточно возможностей в тегах и правилах HTML, CSS и смежных языках программирования.
Любой элемент, используемый на странице, имеет прямоугольную область, причем в ней выделяется несколько составных частей, из которых в каждом конкретном случае следует использовать только необходимое, с учетом требований кроссбраузерности, особенностей разметки конкретного содержания в доступных синтаксических конструкциях.
Общие правила CSS
Каскадные таблицы стилей предлагают описывать элементы так:
- свойство: значение.
При этом свойство - конкретное имя, а значение может быть как именем, так и перечислением имен или значений.
Касательно блочных элементов и необходимости делать посредством CSS закругление углов, имеет смысл использовать свойство border-radius и его значения в формате "38px" или "8px 16px 24px 38px".
Если в качестве значения задается одно число, оно будет установлено таковым для всех углов. Запись всех четырех значений относит:
- первое число - к левому верхнему углу;
- второе - к правому верхнему;
- третье - к правому нижнему;
- последнее - к левому нижнему.
Совместное использование некоторых правил
Понятия border, image и background могут быть использованы совместно. Это нормально, и названные правила не мешают друг другу, формируя общую композицию. Главное - отдавать отчет в том, что именно каждое из них обозначает, и как на что накладывается.
Прежде чем реализовывать тот или иной элемент, важно провести несколько экспериментов и проверить работу на нескольких браузерах. Ориентация на советы, рекомендации, сторонние примеры или синтаксис CSS, закругление углов и т. п. редко бывает лучше собственной свежей практики.
Важно понимать, что border, image, с точки зрения оформления углов, - однотипные понятия. Рисунок может быть представлен не в png-формате. Он будет обрезан браузером, согласно правилам установленным в CSS. Закругление углов - забота разработчика вне зависимости от прямоугольности исходного материала.
Особенности HTML, CSS от браузеров
Приветствуется запись стиля оптом - для всех браузеров сразу. Во всяком случае классические примеры на тему "CSS: закругление углов" предлагают писать так:
background:#FF7F00; /* фон */
border: 1px #CCCCCC solid; /* рамка */
-moz-border-radius: 10px; /* CSS закругление углов для Mozilla Firefox */
-webkit-border-radius: 10px; /* ... для Chrome и Safari */
-khtml-border-radius:10px; /* ... Konquerer */
border-radius: 10px; /* CSS закругление углов для всех */ и т. п.
Однако в большинстве случаев достаточно указать последнее правило. Избыточность следует использовать, только когда в ней есть реальная необходимость.
Классические и дивные таблицы
Несмотря на многочисленные споры сторонников табличной верстки (tr, td) и варианта использования тегов div и span («дивная» верстка), объективная практика отдает предпочтение варианту разумной необходимости.
У дивов есть одни достоинства, у таблиц другие. Если бы они друг друга не дополняли, а просто конкурировали, вопрос быстро бы улетучился в один вариант, объединяющий лучшие стороны таблиц и дивов.
Большинство сайтов создается при помощи CMS (систем управления сайтами) и в распоряжение разработчика приходит не только широкий ассортимент «гигантских» массивов данных, сотен папок, объектов, но и таблиц.
Теги [div|span], как таковые, не выделяются, но единственное, что точно поступает на полный откуп разработчика, - это CSS стили. Причем любая CMS четко разделяет как код, входящий в нее от творчества разработчика, так и собственные стили от добавленных стилей, а в отношении изменений (например, в css - закругление углов таблицы), всегда можно восстановить настройки и стили по умолчанию.
Кривые и углы, не предусмотренные синтаксисом
Можно строго соблюдать все правила HTML, CSS, но иметь результат, ими не предусмотренный. Накладывая элементы друг на друга, можно получать любые области любой конфигурации. Используя PHP-программирование на сервере, можно отправлять в браузер посетителя любые файлы стилей и прикреплять к ним соответствующий JavaScript код в теле HTML-файла или отдельного js-файла.
Любой вариант контура, любая форма собственного элемента вне правил CSS! Закругление углов - всего лишь частность, а реальные возможности гораздо шире. При этом программируя собственные объекты, можно не обращать внимания на особенности отдельных браузеров, использовать только те теги и конструкции языков гипертекста, которые воспринимаются всеми без исключения браузерами.
Используя идеи объектно-ориентированного программирования, можно спроектировать внешний вид угла или кривой, очевидно не предусмотренной ни одним браузером формы. При этом вовсе не обязательно, что это будет именно угол области, изначально прямоугольной формы. Важно, что компоненты кривой, описанные в форме правил CSS, объединяются в единый визуальный объект JavaScript кодом и в нужный момент, в нужном месте браузера, отражают себя в правильной форме.
При такой технологии ничего не мешает таким объектам реализовывать себя в трехмерной плоскости либо демонстрировать анимацию.