[recovery mode] React, всплывающие подсказки (tooltips), для самых маленьких

Во множестве проектов web разработки для улучшения пользовательского опыта используются всплывающие подсказки — tooltips. В статье рассматривается создание переиспользуемого и гибко настраиваемого React компонента для отображения таких всплывающих под…

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

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

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

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

Красивая иконка на табло Яндекс Браузера

Переведя статью об иконках сайта, я конечно же решил настроить всё как надо на своих проектах. То есть на личном сайте и сервисе по генерации иконок (было бы странно создавать такой сервис, и не настроить для него иконки как следует). Однако, столкнулс…

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

«Тачка на прокачку» уже давно не выходит. А вот «Django на прокачку» снова продолжает вас радовать. В сегодняшнем эпизоде мы:1.       Узнаем, что такое препроцессоры и чем они интереснее обычного CSS;2.   &n…

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

Напишем слайдеры изображений на чистых HTML и СSS. Меняем только CSS, разметка в HTML остается неизменной. Внешний вид из-за разного CSS при этом разительно различается, а в слайдеры можно вставить неограниченное число картинок. Сначала мы создали кр…

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

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

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

Одни расширения добавляют в браузер новые функции, а другие предоставляют данные о посещаемых веб-страницах:

Wappalyzer расскажет о технологиях, которые применялись в разработке сайта.
Similar web показывает трафик и ранжировании сайта.
Momentum и…