Што робіць прыгажосць.

Разглядзім асноўныя css уласцівасці, якія дапамагаюць зрабіць макет сапраўды смачным.

background – задае фон. Адначасова можна выставіць да 5 уласцівасцей фону. Значэння ідуць у любым парадку без косак і браўзер сам вызначыць што да чаго. Таксама, можна выставіць некалькі фонаў адначасова – проста пералічыць праз коску. Разбяромся з фонавымі ўласцівасцямі. Напрыклад, зробім body шэрым.

    <style>
body {
background: grey;
}
</style>
Тут браўзер аўтаматычна вызначыў што значэнне grey тычыцца ўласцівасці background-color.
Зробім фон малюнкам, для гэтага:
    <style>
body {
background: url(http://www.catalytic-design.com/images/wood-background.jpg);
}
</style>
І тут браўзер зразумеў, што значэнне тычыцца background-image. Пералічым 5 уласцівасцей фону.
background-color: колер фону.
background-image: шлях да малюнка фону.
background-repeat: вызначае як будзе паўтарацца фон, калі, напрыклад, памер малюнак не зачыняе фон поўнасцю.
background-position: задае пачатковае палажэнне фонавага малюнка.
background-attachment: вызначае ці будзе фонавы малюнак скроліцца разам з зместам
Разглядзім падыходы на выстаўлення фону body.
Проста адзін колер. Напрыклад, body {background: #fafafa;} адзін шэры колер, робіць ужо сайт цікавайшім. Прыклад сам course.by.
Тэкстурны малюнак. Напрыклад, body {background: url(http://www.catalytic-design.com/images/wood-background.jpg);} з сайту catalytic-design.com
Фота HD. Напрыклад, body {background: url(http://www.owlconcept.com/images/forest.jpg);} Некалькі прыкладаў такіх сайтаў. line25.com
Паўтараючыеся тэкстуры. Бяром невялічкую малюнак(pattern) і ён паўтараецца. body {background: url(http://freelansim.ru/assets/body.bg-62bc77c03c1531646a55482139044a67.png);} з сайту freelansim.ru Вось некалькі прыкладаў патернаў subtlepatterns.com/
Мульці фон. Некалькі фонаў адначасова. Наложім на лес, кропкавы патэрн. background: url(http://www.owlconcept.com/images/dot.png), url(http://www.owlconcept.com/images/forest.jpg); Выглядае крута.
Градыент. body { background: -webkit-gradient(linear,left bottom,left top,color-stop(0.21, rgb(178,240,216)), color-stop(0.7, rgb(237,250,200)));} Можна сгенерыраваць анлайн і проста ўставіць некалькі(пад кожны браўзер) радкоў у свой css.

На ўласцівасці background-position выстаўляюцца іконкі. Адчынем выдатны сайт па js. Справа ёсць меню, насупраць загалоўкаў Objects, Functions мы пабым іконкі. Праіспектуем іконку і пабачым што там унутры. Мы убачым спасылку, якой выставлены наступныя ўласцівасці.
        a {
            background: url(http://bonsaiden.github.io/JavaScript-Garden/image/sidebar-icon.png) 5px 3px no-repeat;
        }
    
Спасылка на малюнак з усімі іконкамі(icons set). background-position: 5px 3px – выстаўляем пачатак малюнка на патрэбную нам іконку. background-repeat: no-repeat. Каб малюнак не паўтараўся і мы пабачылі толькі 1 іконку. Звярніце увагу, што малюнкі тут белыя таму выставім фон бацькоўскаму элементу span.
        <head>
<style>
span {
background: grey;
}
a {
background: url(http://bonsaiden.github.io/JavaScript-Garden/image/sidebar-icon.png) 5px 3px no-repeat;
}
</style>
</head>
<body>
<span>
<a href="#">Objects</a>
</span>
</body>
Падраўняем змест. Дададзім водступы і паставім памер шрыфта як на сайце.
        <head>
<style>
span { background: grey; }
a {
padding: 7px 0 10px 32px;
font-size: 15px;
background: url(http://bonsaiden.github.io/JavaScript-Garden/image/sidebar-icon.png) 5px 3px no-repeat;
}
</style>
</head>
<body>
<span>
<a href="#">Objects</a></span>
</body>
Бачым нашую іконку. Паспрабуем пагуляць з пазыцыей. Падбяром наступную іконку, для гэта зменім значэнне 3px(пазыцыя па вертыкалі). Выставім у -28px і убачым іншую іконку.
        <head>
<style>
span { background: grey; }
a {
padding: 7px 0 10px 32px;
font-size: 15px;
background: url(http://bonsaiden.github.io/JavaScript-Garden/image/sidebar-icon.png) 5px -28px no-repeat;
}
</style>
</head>
<body>
<span>
<a href="#">Objects</a></span>
</body>
А лепей вынясем гэтыя пазыцыі ў асобныя класы. Кожнай іконке – свой класс.
        <head>
<style>
.object-icon {
url(http://bonsaiden.github.io/JavaScript-Garden/image/sidebar-icon.png) 5px 3px no-repeat;
}
.function-icon {
url(http://bonsaiden.github.io/JavaScript-Garden/image/sidebar-icon.png) 5px -28px no-repeat;
}
span {
background: grey;
}
a {
padding: 7px 0 10px 32px;
font-size: 15px;
}
</style>
</head>
<body>
<span>
<a href="#" class="object-icon">Objects</a>
<a href="#" class="function-icon">Functions</a>
</span>
</body>

Віншую, разглядзелі падыход на класах з іконкамі. Калі мы адчынем бустрап іконкіпаглядзім як імі карыстацца(наданне класу), то зразумеем што адбываецца за кулісамі.

Хатняе заданне: Зрабіць наступныя бэкграунды на body:
1. знайсці ці намаляваць самому патэрн і усталяваць як бэкграунд
2. крутое фота HD
3. градыент з празрыстай тэкстурай(2 фона адначасова)
4. крутое фота HD адаптаванае пад розныя памеры браўзера(background-size);
5. паказаць 2 варыянта background-attachment з фота.

Наступны занятак