Categories
CSS

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/

Categories
CSS

susy

docs

susy2 tutorial
Build web layouts easily susy
Creating Vertical Alignment with Susy and CSS Flexbox
Flexbox Layouts with Susy

Categories
CSS HTML

Спрайты

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

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

 

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

 

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

 

Creating svg sprites using gulp and sass

Categories
CSS

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 { }
Categories
CSS

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


 

http://codepen.io/enxaneta/pen/adLPwv

A Complete Guide to Flexbox

Designing A Product Page Layout with Flexbox

Flexbox playgroung

Using CSS flexible boxes

Categories
CSS

Hiding Things with CSS

Opacity

.item {
  transition: opacity 2s;
  visibility: hidden;
  position: absolute;
}

.item {
  visibility: visible; opacity: 1; 
}

Position

.item {
  position: absolute;
}
.item {
  left: -9999;
}

Display

.item {
  display: block;
}
.item {
  display: hidden;
}

Toggle Visibility when hiding elements

Categories
CSS

CSS tips

22 Essential CSS Recipes

12 Little-Known CSS Facts

12 Little-Known CSS Facts (The Sequel)

WEB DEVELOPMENT The 30 CSS Selectors you Must Memorize

SURPRISING CSS PROPERTIES YOU CAN USE TODAY

Categories
CSS

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

Categories
CSS

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/

 

Categories
CSS

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