Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Полезные плагины для PostCSS
2. Intersection Observer
3. Псевдокласс :where() в CSS
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Полезные плагины для PostCSS
2. Intersection Observer
3. Псевдокласс :where() в CSS
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI Дизайнер
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
👍2
Что делает свойство backdrop-filter в CSS?
Anonymous Quiz
9%
Делает фон элемента прозрачным
37%
Применяет фильтры к фону элемента
44%
Применяет фильтры к области позади элемента
10%
Добавляет тень за элементом
👍1
Задача: Сделать кнопку "Добавить в корзину" с эффектом sticky
На странице карточки товара нужно реализовать кнопку "Добавить в корзину", которая всегда будет видна пользователю при прокрутке страницы. Кнопка должна прилипать к нижней части экрана, когда пользователь прокручивает страницу вниз, но оставаться на своём месте, когда прокрутка находится в верхней части.
Требования:
- Кнопка должна быть изначально расположена под описанием товара.
- При прокрутке вниз кнопка должна "прилипать" к нижней части окна браузера.
- Кнопка должна занимать всю ширину экрана на мобильных устройствах и быть фиксированной внизу.
Ожидаемый результат:
При скролле вниз кнопка остаётся в нижней части окна браузера.
При возвращении наверх кнопка возвращается на своё место под описанием товара.
#домашка
На странице карточки товара нужно реализовать кнопку "Добавить в корзину", которая всегда будет видна пользователю при прокрутке страницы. Кнопка должна прилипать к нижней части экрана, когда пользователь прокручивает страницу вниз, но оставаться на своём месте, когда прокрутка находится в верхней части.
Требования:
- Кнопка должна быть изначально расположена под описанием товара.
- При прокрутке вниз кнопка должна "прилипать" к нижней части окна браузера.
- Кнопка должна занимать всю ширину экрана на мобильных устройствах и быть фиксированной внизу.
Ожидаемый результат:
При скролле вниз кнопка остаётся в нижней части окна браузера.
При возвращении наверх кнопка возвращается на своё место под описанием товара.
#домашка
👍2
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Анимация печатания на css
2. Верстка HTML-писем. Часть 1
3. Верстка HTML-писем. Часть 2
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI исследователь
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Анимация печатания на css
2. Верстка HTML-писем. Часть 1
3. Верстка HTML-писем. Часть 2
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. UX/UI исследователь
2. Web-дизайнер
3. UX/UI Дизайнер
#лучшеезанеделю
🔥1👏1
CSS Вопрос:
Как правильно выбрать изображения в формате png?
Как правильно выбрать изображения в формате png?
Anonymous Quiz
14%
img[src&=".png"]
22%
img[src.=".png"]
20%
img[src^=".png"]
26%
img[src$=".png"]
18%
Посмотреть ответы
Медиа-запрос prefers-reduced-motion
Когда мы создаем анимации и переходы, мы редко задумываемся о людях, которым такие эффекты могут причинять дискомфорт. Однако в операционных системах (Windows, macOS, Linux, iOS, Android) есть настройка "уменьшить движение", которая позволяет пользователям отключить излишние анимации.
В CSS мы можем учитывать это предпочтение с помощью медиа-запроса prefers-reduced-motion.
Как работает prefers-reduced-motion?
Этот медиа-запрос проверяет, включил ли пользователь настройку "уменьшить движение" в своей ОС. Если она включена, браузер применит стили, указанные внутри @media (prefers-reduced-motion: reduce).
Простой пример:
Что делает этот код?
Убирает все анимации (animation: none).
Отключает плавные переходы (transition: none).
!important гарантирует, что правило переопределит любые другие стили.
Когда это особенно полезно?
Некоторым пользователям анимации могут вызывать дискомфорт или даже головокружение, например:
Людям с вестибулярными расстройствами (motion sickness).
Пользователям, у которых в системе включена опция «уменьшить движение».
Тем, кто просто не любит резкие анимации.
Важно: Этот медиа-запрос не отключает анимации для всех, а лишь адаптирует сайт для пользователей с особыми настройками.
#полезности
Когда мы создаем анимации и переходы, мы редко задумываемся о людях, которым такие эффекты могут причинять дискомфорт. Однако в операционных системах (Windows, macOS, Linux, iOS, Android) есть настройка "уменьшить движение", которая позволяет пользователям отключить излишние анимации.
В CSS мы можем учитывать это предпочтение с помощью медиа-запроса prefers-reduced-motion.
Как работает prefers-reduced-motion?
Этот медиа-запрос проверяет, включил ли пользователь настройку "уменьшить движение" в своей ОС. Если она включена, браузер применит стили, указанные внутри @media (prefers-reduced-motion: reduce).
Простой пример:
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}Что делает этот код?
Убирает все анимации (animation: none).
Отключает плавные переходы (transition: none).
!important гарантирует, что правило переопределит любые другие стили.
Когда это особенно полезно?
Некоторым пользователям анимации могут вызывать дискомфорт или даже головокружение, например:
Людям с вестибулярными расстройствами (motion sickness).
Пользователям, у которых в системе включена опция «уменьшить движение».
Тем, кто просто не любит резкие анимации.
Важно: Этот медиа-запрос не отключает анимации для всех, а лишь адаптирует сайт для пользователей с особыми настройками.
#полезности
👍4❤1👎1
Что делает HTTP/2 по сравнению с HTTP/1.1?
Anonymous Quiz
8%
Убирает необходимость в кэше браузера
31%
Ускоряет DNS-запросы
50%
Позволяет загружать несколько ресурсов одновременно по одному соединению
12%
Уменьшает размер HTML-файлов
Как выбрать значение в раскрывающемся списке select с помощью JavaScript?
#практика
var objSelect = document.getElementById("Mobility");
//Set selected
setSelectedValue(objSelect, "10");
function setSelectedValue(selectObj, valueToSet) {
for (var i = 0; i < selectObj.options.length; i++) {
if (selectObj.options[i].text== valueToSet) {
selectObj.options[i].selected = true;
return;
}
}
}
// самый простой способ
document.getElementById("mySelect").value = "banana";
#практика
👍5
JS Вопрос:
console.log( typeof [].prototype );
console.log( typeof [].prototype );
Anonymous Quiz
11%
undefined
60%
object
7%
string
9%
Ошибка
14%
Посмотреть ответы
👎4
JS Вопрос:
Как получить значение дата аттрибута data-price элемента el?
Как получить значение дата аттрибута data-price элемента el?
Anonymous Quiz
51%
let price = el.data.get("price");
7%
let price = el.data.set("price");
12%
let price = el.dataget.price;
23%
let price = el.dataset.price;
8%
Посмотреть ответы
👍3👏1
Задача: "Визуализация алгоритма сортировки пузырьком""
Создайте интерактивную визуализацию сортировки пузырьком. Пользователь должен видеть:
Исходный массив в виде столбцов разной высоты
Анимацию сравнения и перестановки элементов
Кнопки "Старт" и "Новый массив"
Требования:
Генерация массива:
При нажатии "Новый массив" генерируется массив из 10 случайных чисел (от 20 до 200)
Числа отображаются как вертикальные столбцы с высотой, пропорциональной значению
Визуализация:
Элементы, которые сравниваются, подсвечиваются разными цветами
Перемещение элементов плавно анимируется (500ms)
Каждый шаг алгоритма должен быть виден
Алгоритм:
Реализуйте сортировку пузырьком
Добавьте задержку между шагами (300-500ms)
#домашка
Создайте интерактивную визуализацию сортировки пузырьком. Пользователь должен видеть:
Исходный массив в виде столбцов разной высоты
Анимацию сравнения и перестановки элементов
Кнопки "Старт" и "Новый массив"
Требования:
Генерация массива:
При нажатии "Новый массив" генерируется массив из 10 случайных чисел (от 20 до 200)
Числа отображаются как вертикальные столбцы с высотой, пропорциональной значению
Визуализация:
Элементы, которые сравниваются, подсвечиваются разными цветами
Перемещение элементов плавно анимируется (500ms)
Каждый шаг алгоритма должен быть виден
Алгоритм:
Реализуйте сортировку пузырьком
Добавьте задержку между шагами (300-500ms)
#домашка
🔥2
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Font-palette
2. Как выбрать значение в раскрывающемся списке select с помощью JavaScript?
3. Медиа-запрос prefers-reduced-motion
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Web-дизайнер
3. Senior web designer
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Font-palette
2. Как выбрать значение в раскрывающемся списке select с помощью JavaScript?
3. Медиа-запрос prefers-reduced-motion
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Web-дизайнер
3. Senior web designer
#лучшеезанеделю
❤1👍1🔥1