Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно

Добро пожаловать!
Сделай
Cайт
Лучше
  • Главная страница
  • Форум Помощь
  • Файлы Каталог файлов
  • Полезно Рекомендуем
  • Новое На сайте
  • Правила Читать всем

Скруглённые уголки

Твитнуть
01 Июл 2025
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius. Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

В рисунке. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Чтобы учесть старые браузеры наряду с border-radius добавляют свойства с префиксами, как показано в примере 1. Из-за наличия этих свойств код CSS становится невалидным.

Пример 1. Уголки у блока
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Радиус</title>
<style>
div {
background: #007E3E; /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 10px; /* Поля вокруг текста */
-moz-border-radius: 5px; /* Для Firefox 3 */
-webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
border-radius: 5px; /* Для современных браузеров */
}
</style>
</head>
<body>
<div>Меня — супплетивная форма винительного падежа от я.</div>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Блок со скруглёнными уголками

Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.

Пример 2. Круглая кнопка
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка</title>
<style>
button {
background: #f2f6f8; /* Цвет фона */
border: 1px solid #7a7b7e; /* Параметры рамки */
width: 60px; /* Ширина кнопки */
height: 60px; /* Высота */
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
</style>
</head>
<body>
<button><img src="images/done.png" alt="Продолжить"></button>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Круглая кнопка

В браузере Opera скругление к button не применяется, если не задана граница через свойство border.

Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью shadow. Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свечение</title>
<style>
body {
background: #608DA2; /* Фон веб-страницы */
}
ul {
list-style: none; /* Убираем маркеры */
}
li {
display: inline-block; /* Строчно-блочный элемент */
border: 2px solid #fff; /* Параметры контура */
margin-right: 5px; /* Отступ справа */
background: #000; /* Чёрный фон */
width: 10px; height: 10px; /* Ширина и высота */
border-radius: 10px; /* Делаем кружок */
}
li.active {
background: #b00; /* Красный фон */
box-shadow: 0 0 4px 2px #fff; /* Параметры свечения */
}
</style>
</head>
<body>
<ul>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

Пример 4. Эллипсы
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Эллиптические уголки</title>
<style>
div { position: relative; }
span {
position: absolute; /* Абсолютное позиционирование */
background: rgba(255,255,255,0.9); /* Белый полупрозрачный фон */
}
.bulb1 {
width: 10px; height: 10px; /* Ширина и высота */
left: 65px; top: 85px; /* Положение */
border-radius: 10px; /* Превращаем в кружок */
}
.bulb2 {
width: 20px; height: 14px; /* Ширина и высота */
left: 45px; top: 60px; /* Положение */
border-radius: 10px/6px; /* Превращаем в эллипс */
}
.bulb3 {
left: 10px; top: 15px; /* Положение */
padding: 5px 10px;
border-radius: 60px/15px; /* Создание эллипса */
}
</style>
</head>
<body>
<div>
<span class="bulb3">Вы сами себе учитель</span>
<span class="bulb2"></span>
<span class="bulb1"></span>
<img src="images/monk.jpg" alt="Монах">
</div>
</body>
</html>

Результат данного примера показан на рис. 4.

Рис. 4. Использование эллиптических уголков

Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius, как показано в примере 5. Браузер Opera не устанавливает радиус скругления у изображений, в нём пример работать не будет и уголки останутся исходными. Версия 12.0 должна исправить положение, в ней уже пример будет отображаться правильно.

Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изображения</title>
<style>
body {
background: #4b5457;
}
img {
border-radius: 10px;
}
</style>
</head>
<body>
<p><img src="images/thumb1.jpg" alt="">
<img src="images/thumb2.jpg" alt=""></p>
</body>
</html>

Уважаемый посетитель, скачивать материал могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

+
    • 1
    • 2
    • 3
    • 4
    • 5

Читать уроки, Скруглённые, уголки

АвторПользователи/ Категории » Сайтостроение/ Просмотров 1834 / Посмотреть комментарии 0
 
Вернуться назад

А также:
Быстрое авто заполнение тегов

Быстрое авто заполнение тегов

Нижняя панель для пользователей v.1.0

Нижняя панель для пользователей v.1...

Acronis True Image Echo Enterprise Server 9.7.8398 RUS + Acronis Universal Restore 9.7.8398 [только русский]

Acronis True Image Echo Enterprise ...

Новый  шаблон для uCoz-OnTheGo

Новый шаблон для uCoz-OnTheGo

Новый  шаблон для uCoz-MVStyle

Новый шаблон для uCoz-MVStyle

Новая онлайн статистика для uCoz

Новая онлайн статистика для uCoz

 

html-cсылка на публикацию
BB-cсылка на публикацию
Прямая ссылка на публикацию


Всего комментариев: 0
Уважаемый посетитель, Вы зашли на сайт, как незарегистрированный пользователь.
Мы рекомендуем Вам
зарегистрироваться,либо войти на сайт под своим именем.
Twitter RSS Добавить в избранное

Профиль


  • Привет, Пользователи!


Логин:
Пароль:
Забыл пароль | Регистрация

Меню

  • Скрипты для uCoz
  • Шаблоны для uCoz
  • Графика Ucoz
  • Шаблоны с конструктором
  • Блоки и шапки
  • Адаптация с DLE
  • Виды материалов
  • Всё для DLE
  • PSD
  • Иконки
  • Разное
  • Шаблоны с PSD
  • Иконки/Значки
  • Хаки
  • Софт
  • Интернет
  • Всё для Photoshop

Мини-чат

    Вы не можете добавлять сообщения в чат
    Авторизуйтесь!

  • Top-5
  • Comments
  • Tags
  • UserGate Proxy & Firewall 4.3.949 + crack (serial) [Русская версия]
    60 downloads
  • Вид Фотоальбома + iLoad для Dominion
    41 downloads
  • Форма добавления комментариев
    41 downloads
  • Форма добавления комментариев для форума
    39 downloads
  • Новый шаблон для uCoz-ChromeGT
    36 downloads
Код вставляем в глобальный блок ВЕРХНЯЯ ЧАСТЬ САЙТА
Аватар Алексей Алексей 17 Мар 2013 | 13:35
Блин у меня не получилось его установить(( html код нужно в "страницы сайта" вставлять? в head :unsure:
аватар отсутствует Master 08 Мар 2013 | 00:08
Штука убойная, респект :v:
Аватар Babalus Babalus 13 Окт 2012 | 16:21
для (74)
null (68)
ucoz (46)
на (31)
разное (31)
сайта (22)
шаблон (19)
Скрипт (17)
psd (14)
вид (14)
Сайтостроение (14)
Новый (13)
форум (12)
Для сайта (11)
Хаки (10)
как (9)
красивый (9)
набор (9)
Flash (8)
для uCoz (8)
меню (8)
русский (8)
AJAX (7)
кнопка (7)
кнопки (7)

Рейтинг-Топ 10

  • Редактируем шаблон прямо на сайте
  • Красивый блок информации для uCoz
  • Новшества мини чата ucoz
  • Скруглённые уголки
  • Видеокурс "HTML с нуля"
  • Красивые Списки На CSS
  • Переключение страниц с интересным эффектом.
  • Набор Noavatar для сайта
  • Очень красивый вид комментариев для ucoz
  • Имитация градиента

Топ-5-сайтов

  • Oyama Do
    Рейтинг: 5.0/5
    Просмотров: 11676
  • Профессиональная академия единоборств KEA-FIGHTING
    Рейтинг: 3.0/2
    Просмотров: 5341

Статистика

Нас уже: 1651 {+0}
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    Пользователи
    Гости сайта
  • Сегодня нас посетило

    Опрос

    Оцените мой сайт
    Всего ответов: 266
Форум Файлы Магазин Статьи Графика Видео Теги
| Карта сайта | Карта форума | Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно | ©2011 - 2025

  • Яндекс.Метрика
  • Счетчик PR-CY.Rank
  • Рейтинг@Mail.ru
  • Клуб каратэ кёкусинкай OYAMA-DO



Статистика/ Обратная связь/ Размещение рекламы