Отправляет email-рассылки с помощью сервиса Sendsay

Упражнения по яванскому письму. Javascript.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Виртуальный офис - дома" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
12345c

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

Углы блоков на CSS+JS переменного радиуса закругления
краткое содержание

Существует дней: 1096
Автор: 12345c
Другие выпуски:
Рассылка 'Упражнения по яванскому письму. Javascript.'
 
Статья.
18.04.09

Оставить комментарии к статье.

Исходный адрес статьи с работающими примерами и кодом.

У сайта сменился спонсор хостинга

 Интернет-агентство Прогрессив выступило продолжателем поддержки доменного адреса и хостинга для сайта.

Агентство занимается созданием сайтов под ключ, поисковым продвижением, разработкой программного обеспечения. Выполняет все виды работ, связанные с поддержкой сайтов, что подтверждается на примере данного тематического некоммерческого сайта для разработчиков.


 
 

Скругление углов средствами CSS без рисунков

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

Скругление углов средствами CSS без рисунков сильно впечатляет тех, кто мало-мальски знает HTML и то, что средств для рисования наклонных и кривых в нём нет. Код известен давно, а вот одна из свежих статей по этой теме, поясняющая механизм. http://ityouth.ru/publ/5-1-0-285 . Давно существовала идея сделать отрисовку этого кода гибче и проще, добавить второй бордюр (кайму). Однако, сложность кода и стилей останавливала, да и по сети бродит этот единственный пример без каймы и с радиусом закругления 6 пикселей. Есть ещё скругление углов средствами стиля -moz-border-radius в Firefox (например, в рамке от Google Reader вверху этой страницы).


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


Введение


Сначала - теория о том, на каком эффекте получают скруглённые углы без использования рисунков.


Обычный метод заключается в том, что закругление создаётся набором блоков однописксельной высоты, прилепленных сверху и снизу основного блока. Ширина их подбирается так, чтобы "пирог" получил правильное видимое закругление с границей с точностью до пикселя.


В приведённом классическом примере в действии участвуют теги <B> как строительные кирпичики (выбраны как имеющие 1 смимвол длины названия), но внутрениие теги также участвуют в создании отступов - у всех их задан h1,h2,p{margin: 0}. Понятно, что этот код не масштабируем и требует доработок для повторного использования, но идею показывает.


Из его особенностей нужно выделить b.rTop b, b.rBottom b{... overflow: hidden;font-size:1px; ...} - нужен для решения совместимостей в IE6-7.


Главное достоинство метода - в том, что браузер не выдаёт дополнительных запросов на вызов рисунков; картина не зависит от включенности рисунков в браузере.

Недостатки - границы не полутоновые; для другого радиуса требуется менять код; для сложных отрисовок границ требуется переписывать код. Для автоматизации переписывания кода видятся 2 способа:

1) генерировать статический код для заданного радиуса закругления и дополнительных параметров (ширина границы);
2) генерировать границы через JS.

Полутоновые границы, видимо, придётся изображать рисунком с переменным градиентом в различных участках, подставляя его как background с однократным повторением. Это довольно нетривиально, поэтому отложим задачу на "потом". Генерировать код способом 1 на сервере или скриптом ручного запуска - тоже этот метод сейчас опустим, а займёмся генерацией элементов DOM через JS. Это и "по теме" сайта, и позволит в конце в качестве бонуса получить интересный анимационный эффект - растущие круги и эллипсы. Количество статического кода, очевидно, сокращается, если делом займётся скрипт.


Скругление углов средствами CSS (радиус 6 пикс.; общим фоном показана прозрачность уголков за пределами бордюров):

Text 1

Text 2 xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...

Text 3

Text 4 xxxxxxxxxxxxx xxxxxxxxxx x xxxxxxxxxxxxxxx x xxxxxxxxxxxxxxxxxx...

wgggyyy
xxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

555

Text 1


У этого кода при наличии бордюра (2-й вариант) есть недостаток, за которым придётся следить: блочный элемент с краю должен иметь margin:0, иначе бордюр "разорвётся". В этом легко убедиться, убрав p{margin:0;} из стилей.


Второй недостаток связан с очень длинными строками без переносов или с другими распорками (IMG). Чистые стили не могут справиться с ними, в разных браузерах по-разному. Это врождённое свойство данного решения, лечится только контролем скриптов за шириной окна или внешнего контейнера - ещё один довод использования связки CSS-JS.


Переменный радиус закругления


При отрисовке границ воспользовались стилями цвета подложки и бордюра. Это уменьшило количество тегов, но ввело особенность для рисования крайних слоёв "пирога". Они имеют не бордюр, а подложку цвета бордюра. Они не могут иметь горизонтальный бордюр, потому что при его наличии FF создаёт объект высотой 2 и более пикселей. При построении алгоритма придётся учитывать замену стиля крайних объектов или ввести для них фиктивный 1-пиксельный бордюр с цветом подложки.


Границы нашего алгоритма определим с наличием 2 параметров: радиус закругления и толщина бордюра (внутри радиуса). Впрочем, несложно ввести эллипс при переходе между бордюрами разной толщины. Пусть параметры радиуса и ширины бордюра возле горизонтали будут дополнительными параметрами. Для сохранения качества будем делать однопиксельную высоту каждого слоя (кроме случаев повторений параметров). Далее довольно просто: создаём блочные объекты и приписываем стили. Специальных классов для объектов не будет. Если генерация закруглений вызывается снова, прежние объекты удаляются, а перерисовка происходит за одну операцию (без setTimeout), чтобы reflow произошло 1 раз.


Строго говоря, вариантов красивых границ немного, поэтому их всех можно отобрать и сложить в массив в скрипте, выбирая по заданным R и S (радиус и толщина границы). Несколько грубее и компактнее будет математическое вычисление границ. Во втором случае можно не привязываться к целым числам, тогда возникнут варианты выбора более красивых границ. Или, беря целые числа, подставлять вместо них вещественные с более красивыми очертаниями.


Проверить красивость очертаний удобно в Экселе, потому что в нём быстрее и нагляднее написать алгоритм. Тогда бесхитростное вычисление в виде корня из разности квадратов будет дополнено "подгоночным" двумерным массивом чисел. Другой способ получить красивые линии - более интеллектуально следить за шириной границ на закруглениях, используя правила крорректировки.


Наиболее общий метод - определить пару функций для блока, в котором требуется создать скруглённые границы. Скрипт выполнит функцию "roundBord", который сгенерирует нужное количество элементов "пирога" и их свойства. Для удобства и избегания перемещения блоков при модификации устроим скрипт так, чтобы его атрибуты свойств были одновременно параметрами для скруглённых границ.


В Экселе делаем образец расчёта, чтобы отладить алгоритм и проще подбирать параметры (файл roundBord.xls). Он выводит наглядный рисунок заполнения пикселей, если считать, что пиксель - это ячейка таблицы. В частности, с параметрами R=6.2 и S=1 получаем ту же самую таблицу, которую рисовали раньше вручную. В некоторых случаях, например, при радиусе 15, не удаётся подбором параметров получить красивую однопиксельную нитчатость внешней границы.


8888            
    8888        
        88      
          88    
          88    
            88  
            88  
            88  
Пример наглядной таблицы в Экселе с показом заполнения бордюра.

По приводимой схеме уже можно вручную создавать бордюры разного радиуса закругления. Но это непроизводительно. Можно создать генератор статических CSS+HTML-дивов (это попробуем сделать в следующем выпуске статьи) на каком-либо языке или сделать динамическую генерацию закруглений на JS. Остаётся переписать алгоритм на JS.


Пусть начальная таблица будет без закруглений, а по кнопке выполнится процедура скругления границ. Содержимое начального блока прячется во внутренний блок. Его параметры пригодятся для повторного обрамления бордюром или для обратной операции - установки простого бордюра. При повторном нажатии на кнопку увидим вложенные округлые бордюры - оригинальное расширение изобразительных возможностей скриптов. Удалим все параметры из полей ввода - получим параметры из стилей исходного блока (цвета и размеры бордюров).


Поскольку код и кнопки в почте работать не будут, перейдите на страницу со статьёй и работающим кодом -

http://js2.ru/subs/2009/04/skruglenie-uglov-na-css-plus-js.shtml . (Доступ к коду - через браузер.)


Общий пример 1, круги и эллипсы.
- радиус по вертикали,
- толщина бордюра вертикали,
[радиус по горизонтали],
[бордюр по горизонтали].
(кликнуть несколько раз, заменить и очистить параметры)

Содержимое блока с бордюрами.


Пример 2, аргументов по умолчанию.
(кликнуть несколько раз)

Содержимое блока с бордюрами.


Пример 3 автоматической генерации.

Содержимое блока.

(Протестировано в IE6, FF2.0, Opera9.24 .)

Уровень: для программистов, дизайнеров
 js2.ru , © I.Svetlov, 2005-2009 
Текущая очерёдность плана статей (подписчики могут корректировать через голосование).
11. Анимация падающего снега в окне браузера.
10. Инструменты Web 2.0 - приложения, работающие через браузер.
9. Многуровневое меню с навигацией по наведению мыши.
8. Ключевые слова новых технологий, которые нужно знать разработчику веб-страниц.
3. Как писать тексты с доступом через JS без экранирования специальных символов (&lt; и другие).
4. select и list - в них есть много общего. Как и с меню навигации. Эмулятор селекта.
5. Древовидное меню, подход к данным, отделение данных от представления.
6. Многонедельный календарь со ссылками. (По списку строится календарь.)

Форум сайта рассылки, почта автора рассылки.

 
В избранное