​Как избежать сдвигов макета <img>: aspect-ratio против атрибутов width и height

Изначально <img> занимает нулевое пространство до загрузки изображения, из-за этого при открытии сайта часто происходит сдвиг, когда на пустом месте появляется изображение. Это очень неудобно и ухудшает качество сайта. К счастью, теперь есть выход, а точнее даже два.

Подробнее о них здесь:

https://jakearchibald.com/2022/img-aspect-ratio/

#css #фронтенд

Создание сайта с 3D-анимацией прокрутки

В этом видео вы пошагово увидите, как создать сайт с потрясающей 3D-анимацией скролла, используя возможности современного HTML, CSS и JavaScript. После этого вы сможете самостоятельно разработать модель движения слайдов в глубину, поработать над кастомной анимацией, плавностью, красиво оформив композицию с помощью CSS, а также поработаете с аудио и видео контентом на странице, следуя советам из видео.

Подробнее:

https://youtu.be/GLbI7BGdQ3o

#видео #фронтенд

@htmlcssjavas

Как создать браузерную «пипетку» с работой вне браузера

Знакомьтесь, EyeDropper API — небольшой JS API, позволяющий разработчикам добавить в их проект пипетку. С помощью неё пользователь может выбрать нужный цвет и веб-приложение зафиксирует его.

Подробнее о том, как это работает можно узнать тут:

https://patrickbrosset.com/articles/2021-11-24-how-i-built-an-eye-dropper-browser-extension/

#javascript #фронтенд

@htmlcssjavas

Фронтендеры на месте? Смотрите какой сайт мы вам нашли

Здесь собраны весьма полезные ресурсы для фронтенд-разработчиков и разобрано по категориям: иконки, иллюстрации, UI/UX, обучение и многое другое.

Подробнее можете ознакомиться самостоятельно тут:

https://www.akshay.rocks/resources

#фронтенд #инструменты

@htmlcssjavas

​Интерактивная карта из любого изображения на чистом JavaScript

В этом видео автор покажет вам, как сделать интерактивную карту для сайта на чистом JS, на основе любой картинки. Работать карта будет с помощью JS и SVG. По примеру из видео вы научитесь создавать интерактивные элементы и добавлять к ним любой функционал.

Смотрите видео тут:

https://youtu.be/uN35_FX9LXo

#видео #туториал #фронтенд

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Ещё не успели попробовать Flexbox или хотите освежить в памяти все его возможности? В этой статье мы собрали для вас все свойства и продемонстрировали их работу в гифках:

https://tproger.ru/articles/how-css-flexbox-works/

#css #фронтенд

Добавление видео на фон с максимальной оптимизацией

Видео в качестве бэкграунда используется не так часто и это понятно — сайт с таким фоном получается куда более «тяжёлым», чем с картинками или просто CSS-оформлением. Да и не всегда видео на фоне работает достаточно плавно.

Если вы всё-таки хотите добавить такую особенность своему сайту, то вам пригодится эта статья. Здесь вы узнаете, как правильно оптимизировать видео, сделать отзывчивым и интерактивным без снижения производительности:

https://blog.logrocket.com/optimizing-video-backgrounds-css-javascript/

#фронтенд

​Руководство по наложению изображений в CSS

Обычно мы создаём наложения в CSS, чтобы получить изображения за текстом, значками или другими изображениями. Это руководство покажет вам, как красиво наносить слои как на фоновые изображения, так и на обычные <img> элементы в CSS. 

Подробнее:

https://blog.logrocket.com/guide-image-overlays-css/

#css #фронтенд