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

HTML
CSS

HTML
CSS

HTML
CSS
Стили для блоков
Стили рамок
HTML
CSS
border-top, border-bottom, border-left, border-right
HTML
CSS
HTML
CSS
Оформление блоков с помощью тени

- ключевое слово inset устанавливает тень внутри элемента;
- сдвиг тени по горизонтали (5px — вправо, -5px — влево);
- сдвиг по вертикали (5px — вниз, -5px — вверх);
- радиус размытия тени (0 — резкая тень);
- растяжение тени (5px — растяжение, -5px — сжатие);
- цвет тени.
Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета. За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. ИСТОЧНИК: http://htmlbook.ru/css3-na-primerakh/teni">http://htmlbook.ru/css3-na-primerakh/teni
Тень вокруг блока
Тень сверху блока
Тень снизу блока
Цветная тень вокруг блока
HTML
CSS
Внутренняя тень
Белая тень внутри цветного блока
Цветная тень внутри белого блока
HTML
CSS
Выпуклый блок с острыми углами
Выпуклый цветной блок с округлыми углами
HTML
CSS
Многослойный блок вриант_1
Многослойный блок вриант_2
Многослойный блок вриант_3
Многослойный блок вриант_4
Многослойный блок вриант_5
Многослойный блок вриант_6
Многослойный блок вриант_7
HTML
CSS
Оформление блоков с помощью тени

- ключевое слово inset устанавливает тень внутри элемента;
- сдвиг тени по горизонтали (5px — вправо, -5px — влево);
- сдвиг по вертикали (5px — вниз, -5px — вверх);
- радиус размытия тени (0 — резкая тень);
- растяжение тени (5px — растяжение, -5px — сжатие);
- цвет тени.
Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета. За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. ИСТОЧНИК: http://htmlbook.ru/css3-na-primerakh/teni">http://htmlbook.ru/css3-na-primerakh/teni