Outfit at Dusk

Анимация заднего фона. Реализована с помощью JavaScript.

#анимация #javascript

https://codepen.io/andyfitz/pen/xxVKzaM

@htmlcssjavas

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

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

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

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

#css #фронтенд

CSS Transform — визуализатор двух- и трёхмерных трансформаций CSS3

С его помощью можно максимально наглядно работать с изменением объектов при помощи CSS: начиная с поворотов и масштабирования, заканчивая игрой с перспективой.

Стоимость: #бесплатно

#css #web #визуализатор

Эффект магнитной связи при наведении на ссылку.

#ссылки #hover

https://codepen.io/nishit-sarvaiya/pen/OJLBWwa

You Must Build a Lighthouse.

Игра на HTML и SCSS. Каждый квадрат, в котором можно построить часть дома - radio кнопка, при активации которой задействуются CSS стили.

https://codepen.io/ivorjetski/pen/OJXbvdL

@htmlcssjavas

New Transaction Hover Animation

Анимация при наведении курсора на транзакцию. Написана на чистом CSS.

#анимация #css

https://codepen.io/TurkAysenur/pen/wvaGqXW

@htmlcssjavas

​Как устроена Figma с точки зрения вёрстки

Ахмад Шадид покопался в вёрстке Figma и нашёл несколько интересных вариантов использования Flexbox и Grid. В этой статье он показал их и продемонстрировал насколько мощны сегодня эти способы расположения элементов.

Подробнее:

https://ishadeed.com/article/figma-css/

#css #figma

@htmlcssjavas

Circle Packed Particles — анимация построения частиц-блёсток в буквы, реализованная с помощью GSAP3 и Pixi.js.

#анимация #gsap #pixijs

https://codepen.io/ste-vg/pen/JjjobLw

📊🔟 ТОП-10 самых высокооплачиваемых языков программирования в 2022 году

Известная платформа по поиску работы DevJobsScanner составила список самых высокооплачиваемых языков программирования. Вместе разберемся, кто же входит в первую десятку и посмотрим, какие цифры рисуют работодатели в объявлениях, чтобы привлечь специалистов.

🔗 Основной сайт
🔗 Зеркало

Profile Card UI - Карточка профиля, реализованная с помощью SCSS и JavaScript

#codepen #css #js

@htmlcssjavas

Информация на сайте будет выглядеть спокойно и завораживающе на фоне ночного неба.

#фон

https://codepen.io/shahsadikov/pen/oNpogBV

Colormind — это генератор цветовых схем, использующий для этого глубокое обучение

Сервис способен изучать цветовые стили на основе фотографий, фильмов и популярного искусства

С него ежедневно загружаются разные наборы данных. Поэтому даже сами создатели Colormind советуют заглядывать каждый день. Это может помочь получить то самое необходимое цветовое вдохновение

При этом вы можете залить на платформу и своё фото, которое будет «растаскано» на цветовую схему

Стоимость: #бесплатно

#цвета #вдохновение