Skillbox

Как сделать css рамку

Всем привет. На связи coderistu.ru. В этой статье мы рассмотрим, как сделать различные html - рамки на сайте с помощью сss.

Стили рамок

Допустим, у нас есть текстовый блок, который нуждается в простой, но красивой css рамке. Сделать ее нам поможет свойство border:

Пример:

Привет, я текст.)

CSS стили:

p {
text-align:center;
padding:15px;
border:2px solid #F44336;
}
Здесь 2px - толщина рамки, solid - стиль,  #F44336 -цвет

Отлично, рамка готова. Теперь можно навести немного красоты и поменять ее стиль:

1. Пунктирная рамка:

border:2px dashed #F44336;

Привет. Я - текст)

    2. Рамка из точек:

border:2px dotted #F44336;

Привет. Я - текст)

    3. Двойная:

border:3px double #F44336;

Привет. Я - текст)

4. Двухцветная двухконтурная:

border:4px groove #F44336;

Привет. Я - текст)

5. Двухцветная двухконтурная - зеркальный вариант предыдущей:

border:4px ridge #F44336;

Привет. Я - текст)

6. Просто двухцветная:

border:4px inset #F44336;

Привет. Я - текст)

7. Двухцветная  - зеркальный вариант предыдущей:

border:4px outset #F44336;

Привет. Я - текст)

Разноцветная рамка с разными границами

Чтобы сделать многоцветную рамку с границами разного цвета, стиля и толщины, необходимо использовать свойства border-style, border-width и border-color.

Пример:

p {
text-align:center;
padding:15px;
border-style:solid dotted dashed double;
border-width: 2px 3px 4px 5px;
border-color: #2196F3 #E91E63 #e2e218 #8BC34A;}

Привет. Я - текст)

 

Рамка с одной или нескольких сторон

Чтобы сделать рамку с одной или нескольких сторон блока, можно пойти 3 путями:

  1. Задать нулевую толщину стенки через border-width. Например, border-width: 2px 0px 0px 0px.
  2. Сделать стенку прозрачной через border-color. Например, border-color: transparent #E91E63 #e2e218 #8BC34A.
  3.  Задать стиль через следующие свойства: border - left (левая), border - right (правая), border - top (верхняя), border - bottom (нижняя).

Пример:

p {
text-align:center;
padding:15px;
border-left: 5px double #8BC34A;}

Привет. Я - текст)

Внутренняя рамка 

Рамку внутри блока можно сделать при помощи css - свойства outline. 

Пример:

p {
text-align:center;
padding: 20px;
outline: 1px dashed #fff;
background: #000;
outline-offset: -10px;
color: #fff
}

Привет. Я - текст)

На это все. Мы научились делать рамки разных стилей с помощью css. Надеюсь, что статья была вам полезной!
P.S. Кстати, недавно наткнулся на интересный сайт по продаже часов. Если вы давно мечтали купить часы касио, то вам определенно стоит сюда заглянуть)

 

Добавить комментарий

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