Tweet Тема закругленных углов всегда…
Tweet Тема закругленных углов всегда была актуальна среди веб – мастеров и дизайнеров. Ведь посудите сами, одними квадратами оригинальный дизайн не создашь. Да и плавность в некоторых случаях придает более приятный внешний вид элементам дизайна. Как выкручивались дизайнеры:
- закругленные углы делались с помощью изображений; (то есть для каждого угла подготавливалась своя картинка, которая и делала этот эффект) использовали Java script; (соответственно если у пользователя отключены скрипты, то и не видать закругленности) использовали громоздкий код из большого количества html тегов; (настоящие извращение, чем больше углов, тем громоздкей становилась html страница)
И только с выходом CSS3 появилась возможность без всяких извращений сделать этот эффект. Но опять-таки лежкой дегтя выступает Internet Explorer, даже 8 версия не поддерживает CSS3. Я лично для себя давно решил, мне на IE плевать. Благо как показывает статистика на мой блог очень мало людей приходят с Internet Explorer. При этом все, что они потеряют это закругленные углы.
Делаем закругленные углы CSS
Сначала создадим элемент div
| 1 | =”test”>> |
Пропишем стили:
| 1 2 3 4 5 | #test{ background:#F00; width:100px; height:100px } |
Наш квадрат готов. Теперь зададим свойства закругления. Для этого используем команду: border-radius
| 1 2 3 4 5 6 7 8 | #test{ Width:100px; Height:100px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px; } |
Смотрим результат и радуемся. Теперь немного разберем код: border-radius:6px — Свойство CSS3. Чем больше значение в пикселях, тем сильнее скруглённые углы; -webkit-border-radius:6px — Хак для включения поддержки закругления в браузерах на основе webkit (Google Chrome и Safari). Но стоит заметить, в последних версиях браузеров Chrome и Safari для поддержки border-radius не нужны никакие хаки. -moz-border-radius:5px — Хак для включения поддержки закругления в браузере Firefox. Без него будет просто квадрат; -khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux.
.jpg)
Так, что наш код можно записать так:
| 1 2 3 4 5 6 7 | #test{ Width:100px; Height:100px; border-radius:6px; -moz-border-radius:5px; -khtml-border-radius:10px; } |
Закругления для выбранных углов
Допустим, вы хотите закруглить только выбранные углы. Как, например на моем блоге вверху сделана строка поиска. Там закруглены только нижней правый и левый угол. Для этого изменим наш код:
| 1 2 3 4 5 6 7 | #test{ Width:100px; Height:100px; border-radius: 0 0 6px 6px; -moz-border-radius:0 0 6px 6px; -khtml-border-radius: 0 0 6px 6px; } |
Результат: Разбор полета:
| 1 | border-radius: 1 2 3 4; |
Верхний левый угол; Верхний правый угол; Нижний правый угол; Нижний левый угол; На этом все, удачи!!! С уважением Тригуба Сергей! Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email