Frontend

Карточки с параллаксом и размытием по маске. 😷

Настраивайте CSS, пока не получите то, что вас устраивает.🤙
https://codepen.io/likai/pen/oNOPOZG

Самый важный код CSS, который вы должны знать: все в одном.

CSS Slinky в 3D? Вызов принят!

https://css-tricks.com/a-css-slinky-in-3d/

Создание индикатора ограничения количества символов в текстовой области

https://dev.to/sarahokolo/creating-a-textarea-character-limit-indicator-5fol

DEV Community
Creating a textarea character limit indicator

Introduction Textareas are an essential tool of the web, allowing applications to collect...

Изучите CSS Grid — 13-минутное глубокое погружение

https://www.youtube.com/watch?v=EiNiSFIPIQE

YouTube
Learn CSS Grid - A 13 Minute Deep Dive

🚨🚨🚨 COURSES - https://slayingthedragon.io 🚨🚨🚨
Discord - https://discord.gg/Ccz9nQSfQB
Source code: https://github.com/RamziBach/Learn-CSS-Grid---A-13-Minute-Deep-Dive

Grids are two dimensional, I can place things on it horizontally, vertically and both simultaneously.…

Создайте боковую панель, используя только код HTML и CSS

https://github.com/atherosai/ui/tree/main/sidebar-07

Адаптивная разметка сетки с использованием HTML и CSS. 🚀

Как использовать переменные CSS – объяснено на примерах кода

https://www.freecodecamp.org/news/how-to-use-css-variables/

freeCodeCamp.org
How To Use CSS Variables – Explained with Code Examples

If you are building websites or web apps, you should already know that code repetition is considered a bad practice. That's why you should learn how to use CSS variables to reduce the amount of CSS code you write and take your styling to a new level. The…

Сила :has() в CSS

https://css-tricks.com/the-power-of-has-in-css

CSS-Tricks
The Power of :has() in CSS | CSS-Tricks

Hey all you wonderful developers out there! In this post we are going to explore the use of :has() in your next web project. :has() is relatively newish but

Desert Racer 🏜: первая в мире игра с поддержкой пролистывания только с помощью CSS!

Игра , использующая только CSS, без Js

https://dev.to/warkentien2/desert-racer-worlds-first-css-only-swipe-aware-game-4j0h

Невероятные библиотеки анимации JavaScript

https://dev.to/lilxyzz/incredible-javascript-animation-libraries-30on

DEV Community
Incredible JavaScript Animation Libraries

Overview JavaScript animation libraries have emerged as essential tools for developers...

30 хитрых приемов JavaScript

https://dev.to/mmainulhasan/30-javascript-tricky-hacks-gfc

DEV Community
30 JavaScript Tricky Hacks

Welcome to our curated collection of JavaScript tricks, which will help you optimize your code, make...

Преобразуйте и минимизируйте файлы CSS с помощью Lightning CSS.

https://lume.land/plugins/lightningcss

lume.land
Lightning CSS

Transform and minify your CSS files with Lightning CSS.

Sass зарекомендовал себя как мощный локально установленный препроцессор, составляющий основу моих проектов на протяжении более десяти лет. Это позволило мне эффективно организовать масштабируемые и стабильные пакеты CSS. Даже сегодня я по-прежнему считаю Sass чрезвычайно мощным инструментом. Тем не менее, когда мы вступаем в 2024 год, нельзя отрицать, что CSS претерпел быстрое развитие. Функции, которые когда-то были уникальными для Sass, теперь встроены в CSS, включая переменные и новейшую особенность: вложенность CSS.

https://dev.to/karsten_biedermann/goodbye-sass-welcome-back-native-css-cf

DEV Community
Goodbye SASS 👋, welcome back native CSS

Sass has established itself as a powerful preprocessor installed locally, forming the backbone of my...

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

https://css-tip.com/stop-rotation

Css-Tip
Smoothly stop a rotation on hover

A simple CSS trick to slowly stop a rotation on hover

Представляем Nue CSS
Масштабируемая альтернатива Tailwind, BEM и CSS-in-JS.

https://nuejs.org/blog/introducing-nue-css

nuejs.org
Introducing Nue CSS

A scaleable alternative to Tailwind, BEM, and CSS-in-JS

Front-End решение: индикатор прогресса

https://piccalil.li/blog/solution-009-progress-indicator

Piccalilli
Front-End solution: progress indicator

📍Создание цветовых палитр с помощью функции CSS color-mix()

https://css-irl.info/creating-color-palettes-with-the-color-mix-function

📍Ресурсы, которые нужны каждому веб-разработчику

https://dev.to/monica_w/resources-every-web-developer-needs-18m0

CSS { In Real Life } | Creating Color Palettes with the CSS color-mix() Function

A blog about CSS, front-end development, the web, and beyond.

Как создать макет каменной кладки с помощью CSS

https://hackernoon.com/how-to-build-a-masonry-layout-using-css

Hackernoon
How to Build a Masonry Layout Using CSS | HackerNoon

Masonry layout is when items of varying sizes are laid out so there aren't any uneven gaps.

Учебное пособие по кнопке переключения SVG — как работать с темным режимом с помощью CSS и JavaScript

https://www.freecodecamp.org/news/how-to-handle-dark-mode-with-css-and-javascript

freeCodeCamp.org
SVG Toggle Button Tutorial – How to Handle Dark Mode with CSS and JavaScript

How can you detect dark mode in CSS and JavaScript? How can you manually override it with a toggle button? And how can you create a sun and moon icon with SVG? In this tutorial, you will learn how to detect dark mode in CSS and JavaScript, and you will