logo

Свойство border-radius

В CSS3 появилось замечательное свойство border-radius. Это свойство позволяет задать для элемента скругление углов. Ранее для этого использовались картинки ( сколько трудов стоило вырезать каждый скругленный уголок из шаблона, а затем «распихивать» их по нужным местам при верстке).

Сейчас достаточно прописать элементу одну короткую строчку и вот вам скругленные углы, причем это свойство позволяет задавать скругления для каждого угла отдельно.

border-radius:
10px;

border-radius:
10px 20px;

border-radius:
40px 30px 20px 10px;

border-radius:
0 20px;

border-radius:
10px 100px

При значении border-radius:50%; квадрат приобретает форму круга, а прямоугольник — овала.
Тот же результат дает применение половинчатых значений высоты и ширины, т.е при стороне квадрата в 100рх border-radius:50px; дает круг.

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

border-radius:
50%;

border-radius:
50%;

border-radius:
90%/100%;

border-radius:
50px/40px;

При отсутствии рамки «скругляется» фоновое изображение (смотри предпоследний пример).
Мы можем добавить в стилях к элементу рамку, тень , рисунок и они будет повторять контур заданного скругления.

Фотогалерея «весна пришла»

Очень громкое название для 4 картинок, но зато овальные и с тенью.

Весна на дачеВесна на дачеВесна на дачеВесна на даче

.br_img {
    margin: 10px 25px;
    border:none;
    border-radius: 50%;
    box-shadow:3px 3px 13px #1B5F11;
}  

Самое простое меню


<div class="br_menu">
  <a href="#" class="br_menu-link" title="Главная">Главная</a>
  <a href="#" class="br_menu-link" title="Советы">Советы</a>
  <a href="#" class="br_menu-link" title="Проект">Проект</a>
  <a href="#" class="br_menu-link" title="Контакты">Контакты</a>
</div>
.br_menu{
    width:250px;
    height:  200px;
    background: #D5E9ED;
    border-radius: 10px;
    border: 2px solid #999;
    padding-top: 5px;
    margin: 10px 0;
}    
.br_menu-link{
     width:230px;
     display:block;
     border-radius:30px;
    margin: 7px;
     border:#ccc 4px double;
     font-size:18px;
     color:#888;
     line-height:30px;
     text-shadow:0 1px 0 #fff;
     text-decoration:none;
     text-align:center;
     background:#ddd
}
.br_menu-link:hover{
     border:#bbb 4px double;
     color:#aaa;
     text-decoration:none;
     background:#e6e6e6
 }

Полукруг и четвертушка

Очень простой код и несколько строк в таблице стилей — в результате 2 фигурки. Не нужно никаких изображений, которые «весят», в лучшем случае несколько сот килобайт. А код, пожалуй, и килобайта не наберется. Вот такая разница и экономия.


<div class="circle1_2"></div>
<div class="circle1_4"></div>
.circle1_2{
    background: #6DA3ED;
    height: 50px;
    width: 100px;
    border-radius: 100px 100px 0 0;
 }
.circle1_4 {
    background: #E34;
    height: 100px;
    width: 100px;
    border-radius:0  0 100px  0;
}

Навеяло…

…а может просто «что-то не то с фантазией»


<div class="bg_circle">
    <div class="circle"></div> 
    <div class="circle_1"></div>
    <div class="circle_2"></div>
    <div class="circle_3"></div> 
</div>
.bg_circle {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 10px; 
}
.circle{
    position: absolute;
    left: 0;
    top: 0;
    background: #E4A7E8;
    height: 100px;
    width: 100px;
    border-radius: 100px 0 0 0;
    box-shadow: 3px -3px 6px #999;
 }
.circle_1{
    position: absolute;
    right:-3px;
    top: 0;
    background: #E4A;
    height: 50px;
    width: 50px;
    border-radius:50%;
    margin:45px;
    box-shadow: 3px -3px 6px #999;
 }  
.circle_3{
     position: absolute;
     left: 102px;
     bottom: -4px;
     background: #E34;
     height: 100px;
     width: 100px;
     border-radius:0  0 100px  0;
     box-shadow: 3px -3px 6px #999;
 }
 .circle_2{
     position: absolute;
     right: 100px;
     bottom:-4px;
     background: #0f0;
     height: 100px;
     width: 100px;
     border-radius:0 0 0 100px;
     box-shadow: 3px -3px 6px #999;
 }

И это далеко не все возможности свойства border-radius.


Элементы CSS 0

Рекомендую прочитать...

Оформление кнопок для сайта
Оформление кнопок для сайта

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

Читать полностью
Бегущая строка при помощи анимации на CSS3
Бегущая строка на CSS3

Бегущая строка позволяет демонстрировать информацию в яркой динамической форме, используя различные спецэффекты, привлекая значительное внимание посетителей сайта. Так, например, информация может двигаться сверху вниз и снизу вверх, справа налево и слева на право, взад-вперед и обратно, медленно и быстро, пробегая только один раз, а затем оставаясь, как обычный текст. Могут поочередно печататься несколько строк.

Читать полностью
Анимация при скролле страницы
Анимация при скролле страницы

Как и было обещано в предыдущей статье «Бегущая строка на CSS3» сегодня рассмотрим работу анимации при прокрутке (скролле) страницы. Существуют различные способы для реализации данной проблемы. В статье рассмотрим 2 варианта решения. Они довольно простые и не вызовут затруднений при их реализации.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.