Сення разглядзім наступныя ўласцівасці: скругленыя вугалкі, цені, празрыстаць, затрымку.
Паехалі.

border-radius – задае радыус вуглам рамкі(border). Можна задаць проста круглы вугал і эліпс. Давайце на прыкладах, будзем тэсціць чорны блок з шэрай рамкай. Зададзім яму border і прызначым border-radius:

        <head>
<style>
.black-box {
background: black;
width: 300px;
height: 200px;
}

.round-border {
border: 1px solid #808080;;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="round-border black-box"></div>
</body>
Так як, у рамкі чатыры вугла, то усё чатыры і скругліліся. Таксама мы можам задаць кожнаму свой радыус.
        <head>
<style>
.black-box {
background: black;
width: 300px;
height: 200px;
}

.round-border {
border: 1px solid #808080;;
border-radius: 10px 0 50px 30px;
}
</style>
</head>
<body>
<div class="round-border black-box"></div>
</body>
А зараз зададзім радыус для эліпса:
        <head>
<style>
.black-box {
background: black;
width: 300px;
height: 200px;
}

.ellipse-border {
border: 1px solid #808080;;
border-radius: 40/20px;
}
</style>
</head>
<body>
<div class="ellipse-border black-box"></div>
</body>
Калі выставіць шырыня = вышыня (зрабіць квадрат) і паставіць радыус роўным палове стараны, то атрымаем круг. Прасцей на прыкладзе:
        <head>
<style>
.round {
background: black;
width: 200px;
height: 200px;
border: 1px solid #808080;;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="round"></div>
</body>
Нагадаю, што на уласцівасці border можна рабіць фігуры. Напрыклад трохкутнік. Для гэта выставім шырыню і вышыню роўную 0. І прызначым 3 радыуса: 1 – каляровы і 2 празрыстых. Напрыклад, трохкутнік ці стрэлка направа:
        <head>
<style>
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
</style>
</head>
<body>
<div class="arrow-right"></div>
</body>
Як зрабіць у іншыя накірункі паглядзім на css-tricks.com
Дзе ж нам выкарыстоўваць гэты радыус? Напрыклад зірнём вядомы css фреймворка bootstrap: кнопкі, інпуты форм і кампаненты. Яшчэ паглядзім дызайн themeforest.net, які актыўна выкарыстоўвае гэты прыём. Зараз радыусы з трэнду выпіхвае метро стыль – напрыклад самая папулярная тэма на themeforest, але гэты прыем усе роўна досыць папулярны, тыя ж круглыя фоткі чата у метро тэме.

box-shadow – задае цень элементу. Можна выкарыстоўваць некалькі ценей, зверху будзе тая што ўказана першай. Цень мая 5 асноўных характырыстык зрух па х, зрух па у, размыцце, расцяжэнне і колер. Зрушым цень па х і па у, а размыцце і расцяжэнне выставім у 0. Тады цень будзе выразная і без расцяжэння(таго ж памеру што і элемент).

        <head>
<style>
.simple-shadow {
box-shadow: 5px 10px 0 0 gray;
}
.black-box {
background: black;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="simple-shadow black-box"></div>
</body>
Пазмяняйце кожную характырыстыку у файр баг панелі і на практыке зразумейце што да чаго. А мы напішам прыклад некалькіх ценей адна шэрая другая жоўтая.
        <head>
<style>
.multi-shadow {
box-shadow: 5px 10px 0 0 gray, -5px -20px 0 0 yellow;
}
.black-box {
background: black;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="multi-shadow black-box"></div>
</body>
Цені несумнеўна могуць зрабіць прыгажосць. Звярніце увагу на галоўныя секцыі на сайтах nn.by і budzma.org. На bootstrap кампаненты. Інспектуйце элементы і карыстайце на пракціке.

text-shadow – задае цень тэксту. Параметры зрух па х, зрух па у, размыцце і колер. Таксама можна некалькі праз коску

        <head>
<style>
.simple-text-shadow {
text-shadow: 5px 10px 0 red;
}

</style>
</head>
<body>
<p class="simple-text-shadow"> I text with shadow, yeah!</p>
</body>

opacity – задае празрыстаць элементу і яго зместу. Прымае значэнні ад 0(поўная празрыстаць) да 1(поўная выразнасць).
Напрыклад, выставім нашаму чорнаму блокі празрыстаць роўную 0.5:

        <head>
            <style>
                .black-opacity-box {
                    background: black;
                    width: 300px;
                    height: 200px;
                    opacity: 0.5;
                }

            </style>
        </head>
        <body>
        <div class="black-opacity-box"> I have 0.5 opacity.</div>
        </body>
    
Таксама мы можам задаць празрыстаць адразу праз колер RGBa, 4 лічба і ёсць значэнне празрыстасці. Калі задаць такім чынам, то празрыстасць будзе мець толькі адзін элемент, змест ня будзе празрыстым.
Напрыклад:
        <head>
<style>
.black-opacity-box {
background: rgba(0,0,0,0.5);
width: 300px;
height: 200px;
opacity: 0.5;
}

</style>
</head>
<body>
<div class="black-opacity-box"> Div have opacity, but text not.</div>
</body>

transition – задае колькі часу адбываецца пераход аднаго значэння ўласцівасці да другога.
Напрыклад пры навядзенні(hover) блок будзе станавіцца шырэй.

        <head>
<style>
.black-box {
background: black;
width: 300px;
height: 200px;
}
.black-box:hover {
width: 600px;
}
</style>
</head>
<body>
<div class="black-box"></div>
</body>
Выставім каб шырыня змянялася 3 сек.
        <head>
<style>
.transition-effect {
transition: width
}
.black-box {
background: black;
width: 300px;
height: 200px;
}
.black-box:hover {
width: 600px;
}
</style>
</head>
<body>
<div class="black-box transition-effect"></div>
</body>
Існуюць яшчэ 2 параметра transition-delay – праз колькі пачаць змяняць уласцівасць і transition-timing-function – характырызуе закон хуткасці змены.

transform – можам трансфармаць элементы. Можам трансфармаваць з дапамогай матріцы, можам маштабаваць, круціць, рабіць перспектыву і г.д. Разглядзіце прыклады трансфармацыі на hover на ruseller.com

animation – можам задаваць анімацыю на старонке. Задаем правіла праз @keyframes і вешаем яго праз animation на элемент і вызначаем час працягу.
Напрыклад змяняем колер:

        <head>
<style>
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
.add-animation-color {
animation: myfirst 5s;
}
.black-box {
background: black;
width: 300px;
height: 200px;
}

</style>
</head>
<body> .0
<div class="add-animation-color black-box "></div>
</body>

Хатняе заданне:
зрабіць плеерныя кнопкі(плэй, стоп, паўза, перамотка).
зрабіць 3 box-shadow і пагуляць з параметрамі
зрабіць супер героя, “вдавленный” і мяккі тэкст на text-shadow
зрабіць мульцік на transform 2 сцэны. прыклад ракета.
зрабіць мульцік на 3 сцэны – animation. прыклад з галавы.
Наступны занятак