Делаем закругленные углы через CSS3

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Mihail

Дата: Понедельник, 20.02.2012, 14:29 | Сообщение # 1

Сообщений: 36 ±

Репутация: 3 ±

Замечания: ±
не в сети

Закругленные углы всегда присутствовали в вебдизайне. Ведь посудите сами, одними квадратами оригинальный дизайн не создашь.

Что делали дизайнеры, чтобы достичь нужный результат:

1) закругленные углы делались с помощью изображений; (то есть для каждого угла подготавливалась своя картинка, которая и делала этот эффект)
2) использовали Java script; (соответственно если у пользователя отключены скрипты, то и не видать закругленности)
3) использовали громоздкий код таблиц на html;

Но с выходом CSS3 появилась возможность сделать этот эффект без всяких извращений.

Но ложка дегтя есть и тут - это Internet Explorer, даже 8 версия которого не поддерживает CSS3. Но сейяас мало кто сидит через него, да и при этом все, что они потеряют, это закругленные углы.

Как же нам сделать закругленный углы? Легко!

Напишем небольшой CSS код:

Code

        .test{
           border:1px solid #DCDCDC;
width:600px;
height:30px;
       background:#fff;

border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}

Теперь в нужном месте сайта ставим вызов класса:

Code

И в итоге получим вот такую рамку:

Теперь разберем CSS код.

border-radius:6px — Свойство CSS3. Чем больше значение, тем сильнее округлены будут углы;

-webkit-border-radius:6px — Хак для включения закругления в браузерах Google Chrome и Safari.

-moz-border-radius:5px — Хак для включения закругления в браузере Firefox.

-khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux.

На этом все!

И пусть судьба не справедлива, но жизнь игра, играй красиво!