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 советуют заглядывать каждый день. Это может помочь получить то самое необходимое цветовое вдохновение

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

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

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

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

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

Подробнее:

https://youtu.be/GLbI7BGdQ3o

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

@htmlcssjavas

Range Slider With Glowing Gradient

Приятный ползунок громкости, ну или же как вам удобно его называть. 

#js #css #html #coden

https://codepen.io/jkantner/pen/VwxeeVb

@htmlcssjavas

Как думаете, ваш сайт достаточно быстрый, чтоб пользователь дождался его загрузки?

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

В этой статье вы узнаете о 10 советах, которые помогут вам повысить производительность страницы за счёт HTML и CSS:

https://levelup.gitconnected.com/html-css-features-tips-for-a-10x-fast-page-loading-speed-5fb6c2d88df8

#seo #css #html

@htmlcssjavas