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

БИБЛИОТЕКА 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

ОПИСАНИЕ >>