HTML\CSSРабота с SVG

.svg — это формат векторной графики, который в отличие от растровой графики, может растягиваться и сжиматься без потери качества; а также “человекопонятный код”. SVG-элементы можно оформить с помощью CSS и добавить им интерактивности с помощью JavaScript.

SVG-элемент вставляется с помощью тега svg, внутри которого находится содержимое:

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

HTML\CSSCSS Flexbox краткое руководство

Flexbox (“флексбокс”) — CSS-механизм, предназначенный для построения сеток и создания сложных раскладок блоков.

На текущий момент поддержка флексбокса в современных браузерах довольно хорошая, его смело можно использовать уже сейчас.

Свойство display: flex делает эелемент флекс-контейнером, прямые потомки (первого уровня вложенности) превращаются вофлекс-элементы.

Особенности flexbox:

  • флекс-элементы, в отличие от блочных элементов, не растягиваются на всю ширину контейнера по умолчанию;
  • на флекс-элементы не действует float, vertical-align
  • ширина, высота, внутренние отступы и рамки для флекс-контейнеров и флекс-элементов работают как обычно
  • внешние отступы (margin) не схлопываются и не выпадают, значение auto центрирует элементы по вертикали и горизонтали, а также «ломает» механизмы выравнивания.

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

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;
}
Читать далее...