HTML\CSSCSS Фильтры

Свойство filter задает фильтры для элемента. CSS-фильтры позволяют применить визуальные эффекты к элементам страницы и обычно применяют к изображениям, фонам или рамкам. К CSS-фильтрам можно применять анимации и плавные переходы.

Количество фильтров влияет на скорость загрузки страницы.

Какие бывают фильтры:

brightness — яркость;
contrast — контрастность;
grayscale — бесцветность;
sepia — сепия;
invert— инверсия цвета;
saturate — цветовая насыщенность;

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

HTML\CSSТаблицы на CSS

Из любого элемента можно сделать таблицу в CSS, для нужно ему присвоить свойство display: table. При этом элемент будет вести себя в потоке документа как блок. Если задать свойство display: inline-table — табилца будет располагатьсяв одной строке с другими строчными элементами.

.table { display: table; }
.inline-table { display: inline-table; }
.row { display: table-row; }
.cell { display: table-cell; }
.caption { display: table-caption; caption-side: bottom; }
.colgroup { display: table-column-group; }
.col { display: table-column; }
.thead { display: table-header-group; }
.tbody { display: table-row-group; }
.tfoot { display: table-footer-group; }
Читать далее...

HTML\CSSАнимации и keyframes

СSS-анимация состоит из двух частей: набора ключевых кадровkeyframes и параметров самой анимации. Анимация описывает, как будет меняться стиль блока от начальной до конечной точки.

Пример описания и применения анимации:

/* раскадровка */
@keyframes my_animation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.btn {
    animation-name: my_animation;
    animation-duration: 1s;
}
Читать далее...

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];

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