Новые сообщения
|
   |
| Модератор форума: chocopie |
| Форум uCoz Уроки по ucoz Делаем закругленные углы через CSS3 |
| Делаем закругленные углы через CSS3 |
off-line Добавлено: 2011-Июл-20 - 12:24 | Сообщение #1
Закругленные углы всегда присутствовали в вебдизайне. Ведь посудите сами, одними квадратами оригинальный дизайн не создашь.
Что делали дизайнеры, чтобы достичь нужный результат: 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 <div class="test"></div> И в итоге получим вот такую рамку:  Теперь разберем CSS код. border-radius:6px — Свойство CSS3. Чем больше значение, тем сильнее округлены будут углы; -webkit-border-radius:6px — Хак для включения закругления в браузерах Google Chrome и Safari. -moz-border-radius:5px — Хак для включения закругления в браузере Firefox. -khtml-border-radius:10px — Хак для включения поддержки закругления в браузере Konquerer. Это из мира Linux. На этом все! Прикрепления:
6044598.png
(0.5 Kb)
Хочешь в команду сайта? Пиши! Контакты в профиле. |
off-line Добавлено: 2011-Июл-20 - 12:30 | Сообщение #2
|
| |||
| |||