Основы веб-технологий. День 3

Василика Климова

Что в тренде?

Василика Климова
Разработчик интерфейсов
Artec 3D

Moscow Coding School

День 3

FlexBox

CSS Flexible Box Layout Module

Адаптация под размеры устройства

<meta name="viewport" content="width=device-width">

Все CSS селекторы

Описание селекторов

Псевдоклассы

Псевдоэлементы

Тег <iframe>

<iframe>

Тег <audio>

<audio>

Тег <video>

<video>

Background Градиенты

linear-gradient(white, lightblue);
radial-gradient(#38bac7, #324a56);
Генератор

Анимация

CSS3 свойство animation

animation: infinite myMove 3s alternate;
animation-name: myMove; //имяАнимации
animation-iteration-count: infinite;
//количество итераций
animation-duration: 3s;
//продолжительность

CSS3 свойство animation

animation-direction: alternate;
//направление
animation-delay: 5s; //задержка
animation-timing-function: ease;
//функция скорости

Правило @keyframes

0% - Оформление элемента в начале анимации
100% - Оформление элемента в конце анимации

       @keyframes имяАнимации {
          0%   { background: red; }
          50%  { background: blue; }
          100% { background: green; } }
    

Оси 2D

CSS3 2D поворот

transform: rotate(15deg)

CSS3 2D смещение

transform: translate(-50%)

CSS3 2D масштабирование

transform: scale(2)

CSS3 transition

Эффект перехода между состояниями элемента

transition: background 1s ease-out 2s

Оси 3D

CSS3 3D повороты

transform: rotateX(angle)
transform: rotateY(angle)
transform: rotateZ(angle)

Полезные ссылки

Тест по пройденному материалу

Василика Климова

likita
vasilika.klimova
lik04ka

Навигация

Список всех уроков

Fork me on Github