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

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

Тег  <hr>  или просто линия
Или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)

Читать полностью
Свойство box-shadow
Свойство box-shadow

Раньше, для того, чтобы какому нибудь объекту на сайте добавить тень приходилось прибегать к помощи Photoshop-а или другого графического редактора. Тень добавляли в изображение или использовали как фоновый слой.
Потом эти картинки вырезались и вставлялись на страницу сайта. Но чем больше различных картинок содержалось на сайте, тем медленный сайт работал.

Читать полностью
Библиотека Animate.css
animate.css

CSS3 поддерживает покадровую анимацию, которая позволяет создавать сложные анимации объекта. Существует возможность задавать множество параметров работы анимации при помощи свойства animation и правила @keyframen.

Но лучше воспользоваться готовыми решениями, которые позволяют анимировать любой объект. Для этого воспользуемся библиотекой Animate it.

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

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

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

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