[Перевод] Анимация грида в CSS

Я рад пролить свет на тот факт, что CSS grid-template-rows и grid-template-columns теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, ведь она встроена прямо в спецификацию CSS Grid Layout Module Level 1. Читать дальше →

Подробнее

[Перевод] Введение в нечёткую логику

Вы когда-нибудь подумывали написать такой алгоритм, в соответствии с которым приложение само принимало бы решения, либо справлялось с какими-нибудь странными действиями, при помощи которых клиент отчаянно пытается его сломать? Создавая такой алгоритм, вы заметите, что просто замусориваете ваш код логикой if-else (пока он не превратится в кашу), а самим вам начинает казаться, что вот так просто не прокатит. Итак, если только вас не пробирает дрожь от математики – читайте дальше. Здесь в

Подробнее

[Перевод] Делаем свернутый контент доступным с помощью hidden=until-Found

Сворачивающиеся разделы с контентом, называемые как аккордеон, являются распространенным шаблоном пользовательского интерфейса. Однако контент, скрытый в свернутых разделах, становится невозможным для поиска по странице пользователем. Кроме того, нельзя ссылаться на текстовые фрагменты внутри свернутой области. HTML-атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы позволяете браузеру

Подробнее

Как подключить препроцессор SASS/SCSS к Django

"Тачка на прокачку" уже давно не выходит. А вот "Django на прокачку" снова продолжает вас радовать. В сегодняшнем эпизоде мы: 1. Узнаем, что такое препроцессоры и чем они интереснее обычного CSS; 2. Разберёмся с SASS и SCSS, узнаем, чем они отличаются; 3. И рассмотрим на практике, как использовать SASS/SCSS в Django-проекте. Как обычно, меньше болтовни – больше кода. Центрирует картинку Макс. Выходит за рамки Егор. Статью написали авторы канала PyLounge.

Подробнее

[Перевод] 3D-слайдер на CSS

Напишем слайдеры изображений на чистых HTML и СSS. Меняем только CSS, разметка в HTML остается неизменной. Внешний вид из-за разного CSS при этом разительно различается, а в слайдеры можно вставить неограниченное число картинок. Сначала мы создали круговой слайдер с бесконечным вращением, похожий на виджет-спиннер с изображениями. Затем мы сделали слайдер, пролистывающий стопку фотографий. Продолжение — к старту курса по Fullstack-разработке на Python. Читать дальше →

Подробнее

[Перевод] Полароидный CSS и совсем немного HTML

В предыдущей статье у нас получился красивый слайдер («карусель») с круговым вращением. А сегодня я создам слайдер, пролистывающий стопку «полароидных» снимков. Пока не смотрите код, сначала я должен вам многое про него рассказать. Поехали! К старту нашего курса по Fullstack-разработке на Python. Читать дальше →

Подробнее

[Перевод] Как написать расширение браузера для замены шрифтов на Quasar и Vue 3

Одни расширения добавляют в браузер новые функции, а другие предоставляют данные о посещаемых веб-страницах: Wappalyzer расскажет о технологиях, которые применялись в разработке сайта. Similar web показывает трафик и ранжировании сайта. Momentum изменяет содержание страниц или заменяет домашнюю страницу. Я расскажу о разработке расширения для Chrome на Vue 3 и Quasar. Это расширение которое будет изменять размер шрифта на посещаемых веб-страницах. Подробности — к старту…

Подробнее

[Перевод] Как сделать бесконечный круговой CSS-слайдер

Слайдеры изображений, также известные как карусели картинок, очень распространены. Есть множество вариантов обычного CSS-слайдера, в котором изображения смещаются слева направо (или наоборот). Можно использовать JavaScript-библиотеки для создания красивых слайдеров со сложной анимацией. Но здесь я подойду к созданию карусели иначе. В серии статей я расскажу вам, как создать необычные и красивые слайдеры исключительно в CSS. Если вы устали от одинаковых слайдеров, вам это понравится!

Подробнее

[Перевод] Анимация текстовых переходов

Идея этой демонстрации пришла из игры Session Skate. В начальных титрах «SESSION» каждая буква быстро исчезает. Это выглядело довольно круто, и я сразу понял, что могу сделать это с помощью view-transition, setInterval() и .textContent. Итак, я завёл себе задачу в todo, чтобы сделать это, потому что пришло время заняться фигнёй, а не работой. Читать далее

Подробнее

Редко используемые свойства CSS

Всем привет, меня зовут Кирилл, я frontend разработчик компании Usetech. CSS постоянно развивается, и некоторые полезные свойства остаются незамеченными. Возможно о них говорят не так много, как о других, но в этой статье на примерах я разберу новые и полезные свойства CSS. Ещё вы увидите раздел ресурсы, где можно почитать подробнее и глубже. CSS свойства, которые мы рассмотрим в данной статье: Читать далее

Подробнее

[Перевод] Создаём веб-сайт, как будто сейчас 1999 год

Раньше веб был более странным местом В прошлом году я поставила перед собой цель вернуть дух старого веба, креативность и шарм конца 90-х и начала 2000-х. В те времена не было правил, ты ставил на веб-страницу что угодно, потому что это было твоё пространство, в котором можно делать всё, что пожелаешь. И для целого поколения Интернет-пользователей наличие собственного веб-сайта было признаком крутости. Именно так обстояли дела тогда, в эпоху до появления социальных сетей и web 2.0, о…

Подробнее

Эмулируем React useState в обычном JS (via data-attributes & css selectors)

Добрый день хабр! Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors. Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и

Подробнее