Neumorphism.io — онлайн-инструмент для генерации CSS-кода в стиле неоморфизма

Работает сервис максимально просто: вы выбираете цвет элемента, его размеры, радиус, дистанцию тени и т.д

На выходе получаете готовый CSS-код, который можно вставить в ваш проект. И уже по необходимости самостоятельно «доработать»

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

#css #web #open_source

Decryption Effect with Pseudo Elements

Эффект расшифровки с псевдоэлементами. Реализован с помощью CSS и JavaScript.

#анимация #css #js

https://codepen.io/georgehastings/pen/YNMEbe

Dot Loader - CSS

Анимация загрузки. Написана на чистом CSS.

#анимация #карточка #css

https://codepen.io/josetxu/pen/MWXbbeW

Голограммы, пленочные засветки и шейдеры на чистом CSS

Как вы обычно делаете визуальные эффекты для веб-страницы? Наверное, используете какую-нибудь JS-библиотеку, которая может прокачать сцену, добавив освещение, 3D, шейдеры и прочее, например threejs. Верно?

Но на самом деле в некоторых кейсах уже можно смело отказывать от JS в пользу CSS, ведь браузеры наконец поддерживают mix-blend-mode. Например, вы можете добавить эффект засветки при скролле страницы, как на этой картинке выше (как это работает можно увидеть по ссылке). В этой статье вы узнаете, как добавить крутые эффекты для ваших изображений только благодаря CSS и заодно увидите, как они работают в жизни:

https://css-live.ru/tricks/gologrammy-plenochnye-zasvetki-i-shejdery-na-chistom-css.html

#css #фронтенд

Создание отзывчивого мобильного меню с помощью CSS без JavaScript

В этой статье вы узнаете, как создать отзывчивое мобильное меню с помощью CSS, без использования JavaScript. Автор пошагово показывает, как создать и стилизовать гамбургер-меню, анимировать его и сделать его доступным для пользователей с ограниченными возможностями:

https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/

#css #фронтенд

@hashdev

DevSamples — полезная коллекции чужого кода

С её помощью вы можете найти кусок, который будет полезен именно вам в вашем проекте — его можно свободно скопировать и вставить

Основное внимание сервис уделяет исходным кодам для веб-разработчиков

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

#web #css #шпаргалка

CSS Peek: удобный плагин для веб-разработки

CSS Peek — это плагин в редакторе VS, который обеспечивает быстрый переход к CSS любого селектора из HTML файла. Плагин напрямую предоставляет CSS-код и ссылку для перехода к свойствам CSS одним щелчком мыши.

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

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

#css

Responsive Grid — анимация страницы. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/julesforrest/pen/QBzaQR

@javascriptv

🏆 Interactive particles text

Фантастически красивая анимация текста для твоего проекта с интерактивными частицами на JS

⚡️ Код

#soft #code #css