CSS triggers

Transform – doc2


 property name | duration | timing function | delay 


  • Keyframes – define the stages and styles of the animation.
  • Animation Properties – assign the @keyframes to a specific CSS element and define how it is animated.




Using CSS Animation

Animation vs Transition




HTTP 1.1 – одно соединение TCP (браузеры создают параллельно от 2 до 8 параллельных соединений)

HTTP 2 – все запросы между браузером и сервером мультиплексированы (прим. уплотнены) в одно TCP соединение. Это позволяет загружать десятки изображений в параллели в одном TCP соединении.


  • один спрайт-сет загружается единожды используя один запрос
  • объединённый размер меньше чем сумма
  • время загрузки значительно короче


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


Creating svg sprites using gulp and sass


At the very core of SMACSS is categorization.

1.Base (exclusively – body, a, input[type=text]…)
2.Layout (reusable, modular parts of our design – container) – .l- or .layout- .grid-
3.Module (sidebar, product lists…)
4.State (hidden, expanded, active, inactive) .is-

#article {
    width: 80%;
    float: left;

#sidebar {
    width: 20%;
    float: right;

.l-fixed #article {
    width: 600px;

.l-fixed #sidebar {
    width: 200px;
/* Example Module */
.example { }

/* Callout Module */
.callout { }

/* Callout Module with State */ { }

/* Form field module */
.field { }

/* Inline layout  */
.l-inline { }


display: flex;

/* Direction flex container*/

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

/* Wrap - enable multiline*/
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* flex-flow - combaine flex-ditection flex-wrap*/ 

flex-flow: column wrap;

/* justify-content*/
/*  items: margin-right: auto; margin-left: auto; margin: auto;*/

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

/*  Order */
order: 5;
order: -5; 

/* flex grow */
flex-grow: 3;
flex-grow: 0.6;

/*  flex-basis */
/* Specify <'width'> */
flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* flex-shrink антоним flex-grow*/
flex-shrink: 2;
flex-shrink: 0.6;

/* Alignment */

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: stretch;
align-items: flex-start;
align-items: flex-end; 
align-items: center; 
align-items: baseline; 
align-items: stretch;

align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;

/* center content */
/* first */
.container {
  justify-content: center;
  align-items: center;

/* second */

.container {
  display: flex;
  justify-content: center;

.item-1 {
  align-self: center;


.container {
  display: flex;

.item-1 {
  margin: auto;


A Complete Guide to Flexbox

Designing A Product Page Layout with Flexbox

Flexbox playgroung

Using CSS flexible boxes


Responsive and Infinitely Scalable JS Animations

Руководство по Web Animations API — часть 1: создание базовой анимации  часть2

Moving along a curved path in CSS with layered animation

CSS Animation Tools, Frameworks & Tutorials

Create CSS3 Animated Search Box

SVG Modal Window

Ideas for Subtle Hover Effects

Foundation MOTION UI

A quirky CSS Animation Library

Popmotion JS lib

CSS3 Animation Cheat Sheet

Many examples

Data URI

<img src='data: ... '>
.bg {
  background: url('data: ... ');
<img src='data:image/svg+xml; ... '>
.bg {
  background: url('data:image/svg+xml; ... ');
<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>
.bg {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');

Data URIs



Background Image Shapes

See the Pen Image Shapes with CSS3 by Alexander Dolgan (@AlexanderDolgan) on CodePen.0

CSS shapes


Quick Reference


Related Workshops


Browser Support



Quick Reference


Related Workshops


Helpful Tools


Browser Support