Interactive

CSS triggers

Transform – doc2

 Transition

 property name | duration | timing function | delay 

Animation

  • 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

Animation

Transform

 

https://michalsnik.github.io/aos/

http://jackonthe.net/css3animateit/

https://scrollrevealjs.org/

http://mynameismatthieu.com/WOW/docs.html

https://www.sitepoint.com/scroll-based-animations-jquery-css3/

https://daneden.github.io/animate.css/

Спрайты

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

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

 

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

 

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

 

Creating svg sprites using gulp and sass

SMACSS

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-
5.Theme

#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 */
.callout.is-collapsed { }

/* Form field module */
.field { }

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

Flexbox

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 {
  display:flex;
  
  justify-content: center;
  align-items: center;
}

/* second */

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

.item-1 {
  align-self: center;
}

/*third*/

.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

Animation

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

http://www.mobilefish.com/services/base64/base64.php

http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

http://jpillora.com/base64-encoder/

 

Shapes

Background Image Shapes

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

CSS shapes

https://uwebdesign.ru/css-clipping-masking/

Masking

Quick Reference

 

Related Workshops

 

Browser Support

 

Cliping-path

Quick Reference

 

Related Workshops

 

Helpful Tools

 

Browser Support