Spirited Away Bathhouse

3D-карточка, выполненная с помощью Haml и SCSS, без использования JavaScript.

#css

https://codepen.io/cobra_winfrey/pen/GRMdwwG

HTML Cleaner — бесплатный улучшайзер HTML, CSS и JavaScript

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

Из прочих «плюшек» можно отметить конвертацию Word-документов в аккуратный HTML и любые другие визуальные документы. В том числе Excel, PDF, Google Docs и т.д

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

#web #html #css

Контейнерные CSS-запросы наконец-то здесь

С выходом Google Chrome (105) и Safari 16 появилась поддержка контейнерных запросов в CSS. Это даёт гораздо больше возможностей вёрстки. В этой статье вы узнаете, как работают контейнерные запросы, как мы можем их использовать и как выглядит синтаксис, а также увидите несколько реальных примеров и вариантов использования:

https://ishadeed.com/article/container-queries-are-finally-here/

#css #фронтенд

@hashdev

Полезные советы при вёрстке сайта на HTML и CSS

В этом небольшом видео вы узнаете некоторые неочевидные, но важные нюансы, которые помогут улучшить вам качество ваше страницы, повысить скорость её загрузки и сделать разработку немного проще:

https://www.youtube.com/watch?v=41kjGvSPaEw

#видео #html #css

@hashdev

Speed lines

Можно задействовать как загрузку или переход между страницами сайта.

#js #css #html #coden

https://codepen.io/gvissing/pen/vYRoERY

@hashdev

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