Анимация и transform

transform

https://developer.mozilla.org/ru/docs/Web/CSS/transform

CSS-свойство transform позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

Свойства:

transform: matrix(1, 2, 3, 4, 5, 6);

Функция CSS определяет однородную матрицу 2D-преобразования.

transform: translate(120px, 50%);

Функция CSS изменяет положение элемента в горизонтальном и/или вертикальном направлениях.

transform: scale(2, 0.5);

Функция CSS определяет преобразование, которое изменяет размер элемента в 2D-плоскости. Поскольку степень масштабирования определяется вектором, он может изменять размеры по горизонтали и вертикали в разных масштабах.

transform: rotate(90deg);

Функция CSS определяет преобразование, которое поворачивает элемент вокруг фиксированной точки на 2D-плоскости, не деформируя его.

transform: skew(30deg, 20deg);

Функция CSS определяет преобразование , которое искажает элемент в 2D-плоскости.

transform: scale(0.5) translate(-100%, -100%);

Используйте transform свойство CSS для настройки положения, масштаба и т. д. вашего контента. Браузер может выполнять эти задачи на вашем графическом процессоре, позволяя центральному процессору заниматься другими делами.

transition

Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов, таких как :hover или :active или установлены динамически с помощью JavaScript.

transition-property: transform;

Свойство CSS задает свойства CSS, к которым должен применяться эффект.

transition-duration: 0s;

Свойство устанавливает продолжительность времени, которое требуется для завершения анимации перехода.

transition-timing-function: ease;

Свойство transition-timing-function определяет, как вычисляются промежуточные значения для свойств CSS, на которые влияет эффект перехода.

transition-delay: 0s;

Свойство transition-delay указывает продолжительность ожидания перед запуском эффекта перехода свойства при изменении его значения.

transition-timing-function

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

Это, по сути, позволяет вам установить кривую ускорения, чтобы скорость перехода могла меняться в зависимости от его продолжительности.

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

cubic-bezier() определяет кубическую кривую Безье.

https://tailwindcss.com/docs/transition-timing-function

https://cubic-bezier.com

animation

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

animation: spin 1s linear infinite;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-name: spin;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

https://animista.net/

@keyframes

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Правило @keyframes управляет промежуточными шагами в последовательности анимации CSS, определяя стили для ключевых кадров последовательности анимации.

Начальное или конечное состояние анимации

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes cloudAnimate {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(10px, 10px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

https://wowjs.uk/

https://animate.style/

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

Адаптивная верстка

https://developer.mozilla.org/ru/docs/Web/CSS/@media

Медиазапрсы

Медиа-запросы — это особые правила применения CSS, с помощью которых можно менять стиль элементов, отталкиваясь от устройств, на которых будут просматривать веб-страницу.

Медиавыражения используются в тех случаях, когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиавыражения являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые есть у ваших пользователей.

Медиавыражения позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее.

Media types - Типы носителей

Типы носителей описывают общую категорию устройства. За исключением случаев использования логических операторов not или only, тип носителя является необязательным, а тип all предполагаемый.

all

Подходит для всех устройств.

screen

Предназначен в первую очередь для экранов.

print

Предназначен для постраничного материала и документов, просматриваемых на экране в режиме предварительного просмотра.

Логические операторы

@media (min-height: 680px), screen and (orientation: portrait) { ... }

@media (orientation: portrait) and (min-width: 600px) {
  .container {
    /* Для устройств с портретной ориентацией и шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
    width: 100%;
  }
}

@media (orientation: portrait), (min-width: 600px) {
  .container {
    /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
    width: 100%;
  }
}

@media not all and (orientation: landscape) {
  .container {
    /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */
    width: 100%;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

@media print { ... }

Логические операторы not, ,(запятая), and и only можно использовать для составления сложного медиа-запроса. Вы также можете объединить несколько медиазапросов в одно правило, разделив их запятыми.

and

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

not

Используется для отрицания медиа-запроса, возвращая значение, true если в противном случае запрос вернул бы false. Если он присутствует в списке запросов, разделенных запятыми, он будет отрицать только конкретный запрос, к которому он применяется. Если вы используете not оператор, вы также должны указать тип носителя.

only

Применяет стиль, только если совпадает весь запрос. Это полезно для предотвращения применения выбранных стилей старыми браузерами. Если не использовать only, старые браузеры будут интерпретировать запрос screen and (max-width: 500px) как screen, игнорируя оставшуюся часть запроса и применяя его стили на всех экранах.

,(запятая)

Запятые используются для объединения нескольких медиазапросов в одно правило. Каждый запрос в списке, разделенном запятыми, обрабатывается отдельно от других. Таким образом, если какой-либо из запросов в списке равен true, весь оператор мультимедиа возвращает true. Другими словами, списки ведут себя как логические or операторы.

https://caniuse.com/?search=Media%20Queries

Узконаправленные @media - hover, pointer

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

https://habr.com/ru/company/ruvds/blog/556156/

Мультимедийная функция hover используется для выполнения запроса, направленного на выяснение возможности пользователя наводить указатель основного указывающего устройства на элементы. Если у устройства имеется несколько указывающих устройств, то hover-запрос должен отражать характеристики «основного» указывающего устройства, определённого пользовательским агентом.

Если при использовании основного механизма ввода можно без труда навести указатель на элемент — на него отреагирует медиазапрос, в котором применяется значение hover:

@media (hover: hover) { ... }

Если основной механизм ввода не позволяет навести указатель на элемент, или позволяет, но это не очень-то просто (например — для имитации наведения указателя на элемент используется длительное касание экрана), или если у устройства нет основного указывающего устройства — сработает запрос, в котором применяется значение none:

@media (hover: none) {
    /* ... */
}

Мультимедийная функция pointer используется для выполнения запроса на предмет наличия и точности указывающего устройства, такого, как мышь. Если имеется несколько указывающих устройств — сведения, возвращаемые запросом pointer, должны отражать характеристики «основного» указывающего устройства, определённого пользовательским агентом.

Свойство pointer может иметь одно из трёх значений — coarse, fine и none.

Если основной механизм ввода данных включает в себя указывающее устройство ограниченной точности — используется значение coarse:

@media (pointer: coarse) {
    /* ... */
}

Если основной механизм ввода данных включает в себя точное указывающее устройство — используется значение fine:

@media (pointer: fine) {
    /* ... */
}

Если же в состав основного механизма ввода данных указывающее устройство не входит — применяется значение none:

@media (pointer: none) {
    /* ... */
}

/* смартфоны, устройства с сенсорным экраном, с которым работают пальцами */
@media (hover: none) and (pointer: coarse) {
    /* ... */
}

/* устройства с сенсорным экраном, с которым работают стилусом */
@media (hover: none) and (pointer: fine) {
    /* ... */
}

/* мышь, тачпад */
@media (hover: hover) and (pointer: fine) {
    /* ... */
}

https://codepen.io/Mark_Bell00/embed/vYELmNM

Mobile First - Desktop First

Breakpoints - это настраиваемая ширина, которая определяет, как ваш адаптивный макет ведет себя на разных устройствах или размерах области просмотра.

Mobile First

https://codepen.io/alexps2/pen/JjvOZoo

.heading{
	font-size: 18px;
}

@media (min-width: 640px) { ширина экрана >= 640px
	.heading{
		font-size: 18px;
	}
}

@media (min-width: 768px) { ширина экрана >= 768px
	.heading{
		font-size: 24px;
	}
}

@media (min-width: 1024px) { ширина экрана >= 1024px
	.heading{
		font-size: 30px;
	}
}

@media (min-width: 1280px) { ширина экрана >= 1280px
	.heading{
		font-size: 40px;
	}
}

@media (min-width: 1536px) { ширина экрана >= 1536px
	.heading{
		font-size: 50px;
	}
}

examply by bootstrap

@media (min-width: 576px) { ... } ширина экрана >= 576px

@media (min-width: 768px) { ... } ширина экрана >= 768px

@media (min-width: 992px) { ... } ширина экрана >= 992px

@media (min-width: 1200px) { ... } ширина экрана >= 1200px

@media (min-width: 1400px) { ... } ширина экрана >= 1400px

Desktop First

https://codepen.io/alexps2/pen/yLjPELQ

.heading{
	font-size: 50px;
}

@media (max-width: 1400px) { ширина экрана <= 1400px
	.heading{
		font-size: 40px;
	}
}
@media (max-width: 1200px) { ширина экрана <= 1200px
	.heading{
		font-size: 30px;
	}
}
@media (max-width: 992px) { ширина экрана <= 992px
	.heading{
		font-size: 20px;
	}
}
@media (max-width: 768px) { ширина экрана <= 768px
	.heading{
		font-size: 18px;
	}
}
@media (max-width: 576px) { ширина экрана <= 576px
	.heading{
		font-size: 18px;
	}
}

Как определить главный breakpoint

Главный экран

Контентаня область - контейнер

.container {
    max-width: 1292px;
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

1260 + 16 + 16 = 1292

Пример

    .container {
        max-width: 1292px;
        padding-left: 16px;
        padding-right: 16px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    /*ширина экрана <= 1536px*/
    @media (max-width: 1536px) {

    }
    /*ширина экрана <= 1292px*/
    @media (max-width: 1259px) {
        .container {
            max-width: 1024px;
        }
    }
    /*ширина экрана <= 1024px*/
    @media (max-width: 1023px) {
        .container {
            max-width: 768px;
        }
    }
    /*ширина экрана <= 768px*/
    @media (max-width: 767px) {
        .container {
            max-width: 576px;
            padding-left: 8px;
            padding-right: 8px;
        }
    }
    /*ширина экрана <= 576px*/
    @media (max-width: 575px) {

    }

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 8px;
    padding-right: 8px;
}

/*ширина экрана >= 576px*/
@media (min-width: 576px) {
    .container {
        max-width: 576px;
    }
}

/*ширина экрана >= 768px*/
@media (min-width: 768px) {
    .container {
        max-width: 768px;
        padding-left: 16px;
        padding-right: 16px;
    }
}
/*ширина экрана >= 1024px*/
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}
/*ширина экрана >= 1292px*/
@media (min-width: 1292px) {
    .container {
        max-width: 1292px;
    }
}

https://freshcart.codescandy.com/index.html

https://codepen.io/alexps2/pen/NWMwzPY

Адаптивные изображения

Изображения которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками

https://web.dev/learn/design/responsive-images/

https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

зачем указывать width - height

Это предотвратит перескакивание другого контента при загрузке изображения.

decoding (async, sync)

изображение может быть декодировано асинхронно.

loading (lazy, eager) браузер не будет загружать ленивые изображения до тех пор, пока пользователь не прокрутит страницу вниз настолько, что изображение вот-вот появится в поле зрения.

srcset

srcset включает названия изображений, среди которых браузер выберет нужное и его размеры. Перед каждой запятой части значения в таком порядке:

Название изображения (elva-fairy-480w.jpg)
Пробел.
Актуальная ширина картинки в пикселах (480w) — заметьте, что здесь используется w вместо px, как вы могли ожидать.

Атрибут srcset не заменяет src атрибут. Вместо этого srcset атрибут дополняет src атрибут. Вам по-прежнему необходимо иметь действительный src атрибут, но теперь браузер может заменить его значение одним из параметров, перечисленных в srcset атрибуте. Браузер не будет загружать большие изображения, если они не нужны. Это экономит пропускную способность.

sizes

sizes определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно

медиа условие - (min-width: 66em)
Пробел
Ширину слота - занимаемую изображением, когда медиа-условие истинно.

Итак, с такими атрибутами, браузер сделает следующее:

Посмотрит на ширину экрана устройства.

Попытается определить подходящее медиа-условие из списка в атрибуте sizes.
Посмотрит на размер слота к этому медиавыражению.
Загрузит изображение из списка из srcset, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота.

CSS препроцессор

https://developer.mozilla.org/ru/docs/Glossary/CSS_preprocessor

CSS препроцессор - это программа, которая имеет свой собственный синтаксис, но может сгенерировать из него CSS код.

Большинство из них расширяет возможности чистого CSS, добавляя такие опции как: примеси, вложенные правила, селекторы наследования и др. Эти особенности облегчают работу с CSS: упрощают чтение кода и его дальнейшую поддержку.

https://sass-lang.com/

https://www.sassmeister.com/

Ссылки

https://github.com/ysv-a/frontend-template-gulp

https://marketplace.visualstudio.com/items?itemName=kubosho.ecsstractor

https://www.youtube.com/watch?v=jU88mLuLWlk

https://nodejs.org/

https://npmjs.com/

V - LTS

devDependencies — пакеты, которые нужны для разработки. (Компиляторы-транспиляторы-трансляторы, линтеры, стайл-чекеры)

dependencies — пакеты, на основе которых работает наш код

https://habr.com/ru/company/domclick/blog/510812/

npm install

dev: npm run gulp

prod: npm run build

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

4.adaptive.md

4.adaptive.md

Анимация и transform

transform

transition

transition-timing-function

animation

@keyframes

Адаптивная верстка

Медиазапрсы

Media types - Типы носителей

Логические операторы

Узконаправленные @media - hover, pointer

Mobile First - Desktop First

Mobile First

Desktop First

Как определить главный breakpoint

Пример

Адаптивные изображения

srcset

sizes

CSS препроцессор

Ссылки

Files

4.adaptive.md

Latest commit

History

4.adaptive.md

File metadata and controls

Анимация и transform

transform

transition

transition-timing-function

animation

@keyframes

Адаптивная верстка

Медиазапрсы

Media types - Типы носителей

Логические операторы

Узконаправленные @media - hover, pointer

Mobile First - Desktop First

Mobile First

Desktop First

Как определить главный breakpoint

Пример

Адаптивные изображения

srcset

sizes

CSS препроцессор

Ссылки