Linux, кодинг, митолл и прочая хрень :)

Создание форм с закругленными уголками

Закругленные уголки сделать самим хтмл весьма проблематично. Раньше этим как-то не загонялись, делали либо квадратами все, либо в фон картинку. Сейчас, когда уже везде наступил вебдваноль,  браузеры торжественно приходят к победе коммунизма css3, а баснями про ie6 бородатые вебмастера пугают новичков, с загругленными уголками дело обстоит проще. Если быть точнее, проще чем года три назад, но все равно под тот же ие6 проблемы будут, потому что глобальный вендекапец откладывается, а пересаживаться на линукс многие пока не хотят.  Итак, уголки можно скруглить так:

1. CSS

Самый простой способ, почти все прогрессивные браузеры его поддерживают.

<div style=»border:3px solid black;border-radius: 8px;-o-border-radius: 8px;-icab-border-radius: 8px;-khtml-border-radius: 8px;-moz-border-radius: 8px;    -webkit-border-radius: 8px;»>&nbsp;</div>

ИЕ 6, есстественно, к продвинутым браузерам не относится.

2. Javascript

Есть куча сервисов, которые закругляют уголки.
Например, вот так

3. Фоновое изображение
Можно сделать слой с отбрасыванием тени, обьемностью, прозрачностью и другими красивостями
css-menu-back
Я лично так и сделал но одном из своих сайтов. Очень красиво.
На сайте с картинки увидел очень интересную технику подгона картинки под бекграунд.
Как делал я раньше: резал верх, левый край, правый край, низ и в каждый див вставлял отдельную картинку. Т.е. четыре уголка — четыре картинки. Тут одна картинка на всех. Небольшая экономия, но как известно мастер проявляется в мелочах.
Ее просто регулируют по началу отображения вот так:
{background:url(images/form.png) no-repeat -987px 0;height:12px;}

-987 это есть начало показа, высота зафиксирована двенадцатью пикселями. Это верх.

4.HTML + CSS позиционирование
Суть заключается в расположении нескольких слоев рядом по окружности и прописыванию им определенных свойств фона и границ. Я делал так давно, нужно было для одного уголка выложить полукругом 7 дивов. Очень много гемороя, но люди делают так не только уголки. Вот Гомер Симпсон, полностью без графики, на одном css. У меня правда кривовато выглядит, но на винде я смотрел, было все ок. Остается только гадать, сколько времени понадобилось.

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
•
•
•
•
•
_
_
_
•
•
•
C
C
O
(
—

написано в 19.29
19.51 уже в индексе гугли
20.11 гугель уже схавал основной пост и впридачу два кросспоста с жж и технорати, яндекс пока только жж
20.39 яндекс схавал фидбернеровский прокси
22.12 основной пост в индексе я

0.00 avg. rating (0% score) - 0 votes
Твитнуть

4 комментария

  • 19.51 уже в индексе гугли

    Гугл вообще радует, в последнее время даже не приходится добавлять в панель вебмастера гугла — все сам кушает)

  • А ты че, каждый пост из панели добавлял?

  • Я про новые сайты:)

  • Аа )) Новые сайты они понятное дело дольше лезут. Это у меня хистори вхождения в индекс данного поста записана

css.php