HTML\CSSПлавные переходы transitions

Плавные переходы transitions позволяют изменять значения свойств постепенно. С помощью transitions можно управлять только переходом между двумя состояниями: начальным и конечным, в оличие от анимаций. Задаются обычно у базового класса (например .btn), а не у изменяющего состояние (например .btn-active), чтобы переходы происходили плавно в обе стороны.

Свойство transition позволяет изменять состояния объекта плавно (с использованием анимации).

transition: transform 0.5s ease; /* сокращенная форма записи */
Читать далее...

HTML\CSSПеремещение, масштабирование, повороты и наклоны

CSS3 позволяет производить перемещение, масштабирование, повороты и наклоны блоков без использования JavaScript. Для этого используется своство transform, которому передается одно или несколько действий через пробел. Порядок следования трансформации важен, так как при разном порядке могут получаться разные результаты.

tranform: действие(...);

Свойство transform-origin задает точку отсчета системы координат, от которой будет работать трансформация (по умолчанию равна 50% 50% = центр объекта).

transform-origin: точка-отсчета-по-X [, точка-отсчета-по-Y];

Читать далее...

HTML\CSSОформление текста — новые возможности

Подключение пользовательских веб-шрифтов производится с помощью CSS-правила @font-face. Можно хранить шрифты и подключать их со своего сервера или использовать

@font-face {
    font-family: "Roboto";
    src:
        local("Roboto Regular"),
        url("/assets/roboto.woff") format("woff");
}

Тени для текста создаются с помощью CSS-свойства text-shadow.

Читать далее...

HTML\CSSЛинейные градиенты linear-gradient

Линейные градиенты — это плавный переход от одного цвета к другому. Градиенты описываются внутри CSS-свойстваbackground-image. Примеры использования:

background-image: linear-gradient(to left bottom, yellow, green);
background-image: linear-gradient(-90deg, red, yellow, green);
background-image: linear-gradient(red 50%, yellow 50%, green 100%); /* колорстопы, % либо px */
background-image: linear-gradient(red 50px, yellow 50px, rgba(0, 255, 0, 0.5) 100px);
background-image: 
    linear-gradient(...),
    linear-gradient(...);
background-image: repeating-linear-gradient(red 0px, red 25px, yellow 25px, yellow 50px, green 50px, green 75px); /* повторяющийся резкий градиент */
Читать далее...

HTML\CSSРамки border и фоновое изображение

Свойство border-radius позволяет закруглять углы элементов. Свойства border-top-left-radius, border-top-right-radius,border-bottom-right-radius и border-bottom-left-radiusпозволяют закруглять отдельные углы. Можно задать разные горизонтальные и вертикальные радиусы:

border-radius: 50%;
border-radius: 10px 20px; 
border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px 40px;
border-bottom-right-radius: 10px; /* отдельный угол */
border-top-left-radius: 10px 30px; /* горизонтальные и вертикальные радиусы */
border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px; /* разные радиусы у каждого угла */

border-image

Задать фоновое изображение для рамки блока можно с помощью свойств:

Читать далее...