[Перевод] CSS @layer — полное руководство по каскадным слоям

[Перевод] CSS @layer — полное руководство по каскадным слоям

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

Подробнее
[Перевод] Как подключиться к базе данных с помощью CSS

[Перевод] Как подключиться к базе данных с помощью CSS

К старту курса по Fullstack-разработке на Python делимся материалом о том, как при помощи современных возможностей CSS и JS — ворклетов и API Houdini — подключиться к базе данных и выполнять запросы к ней. За подробностями приглашаем под кат. Читать далее

Подробнее
[Перевод] Конфетти и CSS-матрёшка в дизайн-системе StackOverflow

[Перевод] Конфетти и CSS-матрёшка в дизайн-системе StackOverflow

В дизайне StackOverflow используются праздничные модальные окна, поэтому команда SO разработала удобный способ отображения конфетти. Первым решением был простой статический SVG с конфетти на заднем плане. Позже команда обнаружила 12 разных статических конфетти по всему коду и поняла, что нужен другой подход. Подробностями решения делимся под катом, пока начинается наш курс по Frontend-разработке. Читать дальше →

Подробнее
[Перевод] Как сделать удобное 3D-меню на CSS

[Перевод] Как сделать удобное 3D-меню на CSS

В новых AR/VR-играх часто заставляют меню как будто парить в воздухе. Воссоздадим основу этого эффекта, добавим адаптивную цветовую схему и учтём пользователей, предпочитающих поменьше анимации. Меню будет работать со скринридером, геймпадом, сенсорным вводом и не только. Подробностями делимся к старту курса по Frontend-разработке. Читать далее

Подробнее
[Перевод] Как избавиться от position: absolute в CSS

[Перевод] Как избавиться от position: absolute в CSS

Пару месяцев назад автора этого материала спросили о проблеме, которая возникла именно из-за этой строки CSS. В решении свойства position не оказалось вообще. Пока у нас стартует новый поток курса по фронтенду, рассказываем о случаях, когда position: absolute вполне заменим современным CSS. Читать далее

Подробнее
[Перевод] Анимация при прокрутке с помощью WAAPI и ScrollTimeline

[Перевод] Анимация при прокрутке с помощью WAAPI и ScrollTimeline

Спецификация W3C Scroll-linked Animations — это экспериментальное дополнение, которое позволяет связать развитие эффекта анимации с прокруткой. Подробностями делимся под катом, пока у нас начинается курс по Frontend-разработке. Читать далее

Подробнее
[Перевод] Разбираемся с цветами, палитрами, фильтрами CSS и не только

[Перевод] Разбираемся с цветами, палитрами, фильтрами CSS и не только

Этот материал — карманный справочник о том, как работать с цветом в CSS и вебе в целом. Он начинается с теоретических основ и содержит множество инструментов и примеров работы с градиентами, анимацией, SVG и не только. Статья будет полезна и новичку, и специалисту с опытом. За подробностями приглашаем под кат, пока у нас начинается курс по Frontend-разработке. Приятного чтения

Подробнее
[Перевод] Как написать собственное свойство CSS

[Перевод] Как написать собственное свойство CSS

Благодаря Paint API из состава Houdini можно не ждать выхода новых возможностей CSS. Шаг за шагом автор этого материала показывает, как написать новое свойство CSS для анимации с фрагментацией. Делимся материалом, пока у нас начинается курс по Frontend-разработке. Читать далее

Подробнее
[Перевод] Как сделать Змейку на чекбоксах и не только

[Перевод] Как сделать Змейку на чекбоксах и не только

В допандемическом 2020 Брайан Браун отправился на неделю в Recurse Center и разработал Checkboxland. Эта библиотека JavaScript отображает текст и анимацию на сетке флажков. К забавному маленькому проекту автор сделал несколько демонстраций, написал об этом, а в итоге положил проект на полку и не прикасался к нему около года. В конце концов, отчаянно захотелось развлечься с программированием, и автор снова взялся за Checkboxland. Хотелось сделать более качественную и сложную анимацию,…

Подробнее
[Перевод] Как я написал веб-синтезатор без сэмплов и зависимостей

[Перевод] Как я написал веб-синтезатор без сэмплов и зависимостей

Немного зная теорию музыки, чтобы создать цифровой инструмент, мы можем воспользоваться простыми HTML, CSS и JavaScript без каких-либо библиотек или аудиосэмплов. К старту курса по Frontend-разработке делимся статьёй, автор которой рассказывает, как написать простой, но эффектный синтезатор. Читать далее

Подробнее
[Перевод] Более 15 полезных инструментов для фронтендера с уклоном в CSS

[Перевод] Более 15 полезных инструментов для фронтендера с уклоном в CSS

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

Подробнее
[Перевод] 3 способа визуального извлечения данных с помощью JavaScript

[Перевод] 3 способа визуального извлечения данных с помощью JavaScript

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

Подробнее