Верхний блок над шапкой
 
+7 (495) 021-98-78
заказать звонок
Вакансии

Фоны, границы и тени

Категории: 
верстка
13:02 - 20.02.2018
Классы, управляющие фоном

.bg_white, .bg-white, .bg_light-grey, .bg-light-grey, .bg_grey, .bg-grey, .bg_dark-grey, .bg-dark-grey, .bg_black, .bg-black, .bg_orange, .bg-orange, .bg_dark-orange, .bg-dark-orange, .bg_blue, .bg-blue, .bg_red, .bg-red

устанавливает цвет фона

.bg-left, .bg-right, .bg-left-25, .bg-left-50, .bg-center, .bg-top, .bg-bottom

управляет позиционированием фоновой картинки

.cover, .contain, .bg_v_100p, .bg_h_100p

управляет размером фоновой картинки

.bg-to

отменяет повтор фоновой картинки. Помимо стилевой составляющей, .bg-to является js-классом, если внутри блока с классом .bg-to есть вложенный img с классом .bg, то картинка станет фоном блока

Примеры:
<div class="bg_white p10 brd">.bg_white .p10 .brd</div>
.bg_white .p10 .brd
<div class="bg_light-grey p10">.bg_light-grey .p10</div>
.bg_light-grey .p10
<div class="bg_grey p10 t_white">.bg_grey .p10 .t_white</div>
.bg_grey .p10 .t_white
<div class="bg_dark-grey p10 t_white">.bg_dark-grey .p10 .t_white</div>
.bg_dark-grey .p10 .t_white
<div class="bg_black p10 t_white">.bg_black .p10 .t_white</div>
.bg_black .p10 .t_white
<div class="bg_orange p10 t_white">.bg_orange .p10 .t_white</div>
.bg_orange .p10 .t_white
<div class="bg_dark-orange p10 t_white">.bg_dark-orange .p10 .t_white</div>
.bg_dark-orange .p10 .t_white
<div class="bg_blue p10 t_white">.bg_blue .p10 .t_white</div>
.bg_blue .p10 .t_white
<div class="bg_red p10 t_white">.bg_red .p10 .t_white</div>
.bg_red .p10 .t_white
<div class="bg-to bg_v_100p p10 h300">
  <img class="bg" src="/sites/all/themes/jflex_custom/img/img-cat.jpg" alt="фон">
  <p class="t_white bold">.bg-to .bg_v_100p .p10 .h300 картинка 100% высоты</p>
</div>
фон

.bg-to .bg_v_100p .p10 .h300 картинка 100% высоты

<div class="bg-to bg_h_100p p10 h300">
  <img class="bg" src="/sites/all/themes/jflex_custom/img/img-cat.jpg" alt="фон">
  <p class="t_white bold">.bg-to .bg_h_100p .p10 .h300 картинка 100% ширины</p>
</div>
фон

.bg-to .bg_h_100p .p10 .h300 картинка 100% ширины

<div class="bg-to contain p10 h300">
  <img class="bg" src="/sites/all/themes/jflex_custom/img/img-cat.jpg" alt="фон">
  <p class="t_white bold">.bg-to .contain .p10 .h300</p>
</div>
фон

.bg-to .contain .p10 .h300

<div class="bg-to cover bg-center p10 h300">
  <img class="bg" src="/sites/all/themes/jflex_custom/img/img-cat.jpg" alt="фон">
  <p class="t_white bold">.bg-to .cover .bg-center .p10 .h300</p>
</div>
фон

.bg-to .cover .bg-center .p10 .h300

Классы, управляющие границами

.brd

устанавливает границы шириной 1px

.t, .r, .b, .l

добавляется к классу .brd, устанавливает одну границу только сверху, справа и т.д. соответственно

.s_white, .s_light-grey, .s_grey, .s_dark-grey, .s_black, .s_orange, .s_dark-orange, .s_blue, .s_red

добавляется к классу .brd, устанавливает цвет границ

.s_5, .s_10

добавляется к классу .brd, устанавливает ширину границ 5px и 10px соответственно

.dashed

добавляется к классу .brd, устанавливает стиль границ пунктиром. При использовании без класса .brd, устанавливает нижнюю границу 1px пунктиром

.circle, .r-3, .r-5, .r-10

устанавливает скругление углов границ 500px, 3px и т.д. соответственно

Примеры:
<div class="brd p10">.brd .p10</div>
.brd .p10
<div class="brd t p10">.brd .t .p10</div>
.brd .t .p10
<div class="p10 bg_grey">
  <div class="brd s_white p10">.brd .s_white .p10</div>
</div>
.brd .s_white .p10
<div class="brd s_light-grey p10">.brd .s_light-grey .p10</div>
.brd .s_light-grey .p10
<div class="brd s_grey p10">.brd .s_grey .p10</div>
.brd .s_grey .p10
<div class="brd s_dark-grey r-3 p10">.brd .s_dark-grey .r-3 .p10</div>
.brd .s_dark-grey .r-3 .p10
<div class="brd s_black r-5 p10">.brd .s_black .r-5 .p10</div>
.brd .s_black .r-5 .p10
<div class="brd s_orange r-10 p10">.brd .s_orange .r-10 .p10</div>
.brd .s_orange .r-10 .p10
<div class="brd s_dark-orange s_5 p10">.brd .s_dark-orange .s_5 .p10</div>
.brd .s_dark-orange .s_5 .p10
<div class="brd s_blue s_10 circle p10">.brd .s_blue .s_10 .circle .p10</div>
.brd .s_blue .s_10 .circle .p10
<div class="brd s_red dashed p10">.brd .s_red .dashed .p10</div>
.brd .s_red .dashed .p10
<div class="dashed">.dashed</div>
.dashed
Классы, управляющие тенью

.shadow, .shadow-b, .shadow-s

устанавливает тень

Примеры:
<div class="shadow p10">.shadow .p10</div>
.shadow .p10
<div class="shadow-b p10">.shadow-b .p10</div>
.shadow-b .p10
<div class="shadow-s p10">.shadow-s .p10</div>
.shadow-s .p10
Компания