Interactive

CSS triggers Transform – doc2  Transition  property name | duration | timing function | delay  transition-delay: 0s transition-duration: 0s transition-property: all transition-timing-function: ease 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. animation-name: none animation-duration: 0s animation-timing-function: ease […]

Спрайты

HTTP 1.1 – одно соединение TCP (браузеры создают параллельно от 2 до 8 параллельных соединений) HTTP 2 – все запросы между браузером и сервером мультиплексированы (прим. уплотнены) в одно TCP соединение. Это позволяет загружать десятки изображений в параллели в одном TCP соединении.   один спрайт-сет загружается единожды используя один запрос объединённый размер меньше чем сумма время загрузки […]

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 […]

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; /* […]

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 […]

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 CSS shapes https://uwebdesign.ru/css-clipping-masking/ Masking Quick Reference CSS Masking – html5rocks.com CSS Masking Specification Clipping and Masking in CSS -webkit-mask-image   Related Workshops CSS Clipping Paths   Browser Support CSS Masks   Cliping-path Quick Reference CSS Masking Specification clip-path   Related Workshops CSS Masks   Helpful Tools Clippy – CSS clip-path maker CSS […]