Библиотека Web-компонентов

Основы сайтостроения

Макет(фиксированная ширина)

HTML

CSS

HTML

CSS

HTML

CSS

Стили для блоков

Сплошная рамка (solid)

Точечная рамка (dotted)

Пунктирная рамка (dashed)

Вдавленая линия (groove)

Выпуклая линия (ridge)

Вдавлевная рамка (inset)

Выпуклая рамка (outset)

Двойная рамка (double)

HTML

CSS

Для установки границы только на определенных сторонах элемента, можно воспользоваться свойствами
border-top, border-bottom, border-left, border-right

Двойная рамка сверху (border-top) ⇑

Двойная рамка слева (border-left) ⇐

Двойная рамка справа (border-right) ⇒

Двойная рамка снизу (border-bottom) ⇓

HTML

CSS

Закругленные уголки (border-radius)

Закругленные уголки слева

Закругленные уголки справа

Закругленные уголки сверху

Закругленные уголки снизу

Закругленные уголки 1 и 3

Закругленные уголки 2 и 4

HTML

CSS

Тень вокруг блока

Тень сверху блока

Тень снизу блока

Цветная тень вокруг блока

HTML

CSS

Внутренняя тень

Белая тень внутри цветного блока

Цветная тень внутри белого блока

HTML

CSS

Выпуклый блок с острыми углами

Выпуклый цветной блок с округлыми углами

HTML

CSS

Многослойный блок вриант_1

Многослойный блок вриант_2

Многослойный блок вриант_3

Многослойный блок вриант_4

Многослойный блок вриант_5

Многослойный блок вриант_6

Многослойный блок вриант_7

HTML

CSS

/*__Эффект многослойности страниц___________ */
article .effect10{
width:90%;
height:55px;
margin:20px auto;
background:#c2ccec;
box-shadow: 6px 6px #989898, 12px 12px #6c6666;
}
/*___Эффект многослойности страниц__________*/
article .effect11{
width:90%;
height:55px;
margin:20px auto;
background:#eef0f4;
box-shadow:
   0 0 0 1px rgb(194, 192, 184) inset,
   0 5px 0 -4px rgb(255, 255, 255),
   0 5px 0 -3px rgb(194, 192, 184),
   0 11px 0 -8px rgb(255, 255, 255),
   0 11px 0 -7px rgb(194, 192, 184),
   0 17px 0 -12px rgb(255, 255, 255),
   0 17px 0 -11px rgb(194, 192, 184);
}
/*____Эффект разноцветности вокруг блока_________*/
article .effect12{
width:90%;
height:55px;
margin:40px auto;
box-shadow:
   0 0 0 7px #60B88D,
   0 0 0 14px #90CDAF,
   0 0 0 21px #BFE3D1;
}
/*_____Эффект разноцветности отдельно каждой стороны блока_____*/
article .effect13{
width:90%;
height:55px;
margin:40px auto;
box-shadow:
   0 0 0 1px silver,
   0 -20px 0 -10px coral,
   20px 0 0 -10px darkturquoise,
   0 20px 0 -10px gold,
   -20px 0 0 -10px chartreuse;
}
/*_____Эффект разноцветности отдельно каждой стороны блока, размытие_____*/
article .effect14{
width:90%;
height:55px;
margin:40px auto;
 box-shadow:
   -15px -15px 2px -5px rgba(160,82,45,.5),
   -15px 15px 2px -5px rgba(0,255,255,.5),
   15px -15px 2px -5px rgba(255,0,0,.5),
   15px 15px 2px -5px rgba(255,255,0,.5);
}
/*____Эффект "государственной границы"__)))_______________*/
article .effect15{
width:90%;
height:55px;
margin:40px auto;
border: 2px dashed #ccc;
    box-shadow:
    0 0 0 1px #ccc,
    inset 0 0 0 1px #ccc;
}
/*_____Эффект обрамления цветными уголками____)))_________*/
article .effect16{
width:90%;
height:55px;
margin:40px auto;
box-shadow:
   -20px 20px 0 -18px #fff,
   20px -20px 0 -18px #fff,
   20px 20px 0 -18px #c27153,
   0 0 0 2px #c27153;
}