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

Для каждого элемента можно задать свое действие, и да css можно подключить к скроллу.

Тоесть при скролле будет срабатывать анимация определенного элемента.

Data-атрибуты (data attributes) - это HTML-атрибуты, которые начинаются с префикса "data-". Они позволяют добавлять пользовательские данные к HTML-элементам без необходимости использования других атрибутов или элементов.

Например, вы можете добавить data-атрибут для хранения информации о товаре в HTML-элементе, чтобы потом использовать эту информацию в JavaScript.

html
<div class="product" data-id="1234" data-price="19.99">Product name</div>


Здесь мы добавили data-атрибуты data-id и data-price с соответствующими значениями. Затем в JavaScript мы можем получить доступ к этим значениям:

javascript
const product = document.querySelector('.product');
const id = product.dataset.id; // "1234"
const price = product.dataset.price; // "19.99"


Мы можем использовать эти значения для дальнейшей обработки данных, например, для отправки запроса на сервер.

Transform text - это использование свойства transform для изменения формы, размера, положения или ориентации текста на веб-странице без изменения его физического расположения. Например, можно повернуть текст на определенный угол или сделать его перевернутым зеркально. Также с помощью свойства transform можно создавать анимации и переходы для текста.

Для создания чек-бокса на сайте можно использовать элемент <input> с атрибутом type="checkbox". Вот пример кода:

html

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Мой чек-бокс</label>

В приведенном примере создается чек-бокс с идентификатором "myCheckbox" и текстовой меткой "Мой чек-бокс". Чтобы связать метку с чек-боксом, используется атрибут for в элементе <label>, указывающий на значение атрибута id чек-бокса.

При этом, если пользователь отмечает чек-бокс, то он будет иметь состояние "отмечен" (checked), а если снимает отметку, то состояние будет "не отмечен" (unchecked).

Вы также можете добавить другие атрибуты к элементу <input type="checkbox"> для задания дополнительных функций или стилей. Например, атрибут name может быть использован для идентификации чек-бокса при отправке формы на сервер. Также можно добавить атрибут value для указания значения, которое будет отправлено на сервер, если чек-бокс отмечен.

Чтобы изменить маркеры (точки) для элементов <li>, можно использовать CSS.

Использование свойства list-style-image:


<style>
ul {
list-style-image: url('path/to/custom-marker.png');
}
</style>

<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>

В этом примере мы устанавливаем свойство list-style-image для элемента <ul>, указывая путь к пользовательскому изображению custom-marker.png. Вместо стандартных маркеров (точек) будет отображаться выбранное изображение.

Оба этих метода позволяют изменить маркеры для элементов списка <li> и создать собственное оформление. Вы можете применить стили к элементам <ul> или <ol> в CSS, чтобы изменить маркеры для всех списков на вашем сайте, или добавить классы к спискам и применить стили только к определенным спискам.

Свойство justify-content: space-between является одним из значений для управления выравниванием элементов внутри контейнера с использованием Flexbox. Оно позволяет распределить свободное пространство между элементами, создавая равное расстояние между ними.

Когда вы устанавливаете justify-content: space-between для контейнера, элементы внутри контейнера будут распределены таким образом, чтобы между ними создалось равномерное пространство, а первый элемент прижимается к началу контейнера, а последний элемент прижимается к концу контейнера. Все остальные элементы будут равномерно распределены между первым и последним элементом.

В CSS можно использовать свойство border-radius для скругления углов элемента. Например, чтобы скруглить углы квадрата с классом "square" на 10px, нужно добавить следующее правило:

.square {
  border-radius: 10px;
}

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

.square {
  border-radius: 10px 20px 30px 40px;
}

Это задаст радиус 10px для верхнего левого угла, 20px для верхнего правого, 30px для нижнего правого и 40px для нижнего левого.

https://youtube.com/shorts/4mDgLdjo2NU?feature=share

Flex-wrap - это свойство CSS для контейнера flex, которое определяет, должны ли элементы внутри контейнера переноситься на новую строку или оставаться в одной строке.

Если flex-wrap установлен на nowrap (значение по умолчанию), элементы будут помещаться в одну строку, даже если это приведет к переполнению контейнера.

Если flex-wrap установлен на wrap, элементы будут переноситься на новую строку при переполнении контейнера


Flex-wrap также имеет значение wrap-reverse, которое переносит элементы на новую строку в обратном порядке.

https://youtu.be/j3im4Nwfvtw

Transform rotate - это CSS свойство, которое позволяет вращать элемент вокруг его оси. Это свойство принимает значение угла в градусах и может быть использовано для создания анимации или изменения ориентации элемента. При использовании transform rotate, элемент остается на месте, а его содержимое вращается вокруг указанной оси.

Привет в этом видео будем верстать шапку сайта с помощью html css

Макет сайта - https://www.figma.com/file/bVSLw33NRw8zk3eGKtbVvs/%D1%81%D0%BA%D0%B5%D0%B9%D1%82%D0%B8%D0%BD%D0%B3?type=design&node-id=1%3A2&t=m5Bc0DIIdDctwD5b-1

Видео урок - https://youtu.be/y0cxjhwJNRE
Подпишитесь на канал, мне будет очень приятно!

Привет верстальщики!
Подготовил для вас еще один урок.

Архив с версткой - https://github.com/Nikita-Iudin/--------------FOOD-MAKER

Курс по HTML CSS с практическими заданиями всего за 1290 рублей! 800 рублей

✅ ~ 20 видео уроков
✅ Удобные домашние задания, с проверкой кода на правильность
✅ Низкая цена
✅ 2 работы в портфолио
✅ Верстка полноценного лендинга
✅ Подойдёт даже новичкам
✅ Можно проходить когда захочется

Промокод HTMLCSS на 500 рублей действует до 27 июля 2023 года


https://stepik.org/course/179516