Вы, конечно же, знаете, что в HTML-ле нет возможности создавать закругленные углы. Но необходимость в них велика. Поэтому верстальщики выдумали не один способ, чтобы закруглить угол, и самый простой и популярный из них, когда в крайние ячейки таблицы сайта помещались картинки углов.
По некоторым наблюдениям почти в 80% дизайнерских работ используются плавные линии. Закругленный угол тоже считается плавной линией. Получается, что визуальная мягкость и красота закругленного угла более востребована, нежели жесткость прямого угла, которая нужна лишь в определенных случаях.
К слову говоря, специалисты по дизайну жилых помещений считают, что закругленные углы помогают визуально расширить пространство комнаты. Пожалуй, этот визуальный фокус вполне применим и к сайтам.
Поэтому сегодня мы будем учиться закруглять углы при помощи CSS!
Для примера вот у нас есть такая кнопка:
Код кнопки (HTML):
<input type="button" value="Сообщение!" class="knopka"/>
Код кнопки (CSS):
.knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
}
Чтобы закруглить углы, пропишите в CSS «border-radius»:
border-radius: 20px;
готовый код:
<html>
<head>
<title>Заголовок страницы</title>
<style>
.knopka
{
color:#cc0000;
font-size:50px;
padding:10px;
background-color:#fff;
border:1px solid #999;
border-radius: 20px;
}
</style>
</head>
<body>
<input type="button" value="блог BlogGood.ru" class="knopka"/>
</body>
</html>
Результат будет таким:
Как видите, закруглились четыре угла на 20 px.
Если нужно закруглить, к примеру, только один, два или три угла, тогда нужно прописать к каждому углу параметры:
border-radius: 20px 20px 0 0;
Начинаете с левого верхнего угла и по часовой.
В результате вы увидите:
Закруглилось два верхних угла.
Если по каким-то причинам закругление не происходит, есть вероятность того, что ваш браузер ну очень сильно постарел…
Чтобы избежать такого, добавьте border-radius под популярные браузеры:
-moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius: 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ -icab-border-radius: 10px; /* Icab */ border-radius: 10px; /* CSS3 */
… и все заработает.
А сейчас парочка примеров того, что можно сотворить, используя закругление углов.
- Закругленная кнопка
Для CSS:.knopka2 { color:#fff; padding:10px; background-color:#008B00; border:1px solid #999; border-radius: 0 57px 0 57px; }Для HTML:
<input type="button" value="кнопка" class="knopka2"/>
Результат:
- Закругление картинки
<img src="https://bloggood.ru/wp-content/uploads/2013/03/Webmasterok2009_avatar-96x96.jpg" style="border-radius: 50px;">
Результат:
- Анимированное закругление картинки (смотрите тут)
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как поменять стандартную нумерацию в списке на свой стиль, используя CSS
Обтекание текста вокруг изображения с помощью CSS
Выдвигающаяся форма поиска для сайта на CSS3
Как изменить форму курсора мыши на сайте с помощью CSSПохожие статьи
Тег «meter» – вывод значений в заданном диапазоне
Как запустить форму без нажатия кнопки «отправить»
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222516 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187681 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186563
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐