HabrJun 13

Анатомия «живой» кнопки: 5 слоёв, GPU-анимация и трюки с CSS

Хочу поделиться кейсом, когда разработка типичного tab-switcher превращается в настоящее архитектурное решение.

https://habr.com/ru/articles/1047114/

#css #frontend #ui #uicomponents #cssanimation #gpuanimation #mixblendmode #9slice #pseudoelements #webdev

Анатомия «живой» кнопки: 5 слоёв, GPU-анимация и трюки с CSS

Хочу поделиться кейсом, когда разработка типичного tab-switcher превращается в настоящее архитектурное решение. Когда дизайнер приносит макет с декоративной кнопкой — тисненая текстура, фигурные края,...

Хабр
InautiloJan 30

#Development #Cheatsheets
Styling highlight-y pseudo-elements · Which texts they target and how to customize them https://ilo.im/16a75e

_____
#Text #Highlighting #PseudoElements #Usability #Accessibility #Browsers #WebDev #Frontend #HTML #CSS

Styling ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks

The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that.

CSS-Tricks
Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend [Unofficial]Jan 13

Simulating Crop Marks

https://fed.brid.gy/r/https://frontendmasters.com/blog/simulating-crop-marks/

Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend [Unofficial]Mar 31, 2025

Reanimating the CSS Day Buttons

https://fed.brid.gy/r/https://frontendmasters.com/blog/reanimating-the-css-day-buttons/

Reanimating the CSS Day Buttons – Frontend Masters Blog

These buttons animate from a square to an arrow, and we look at three different ways to do it, each with their own upsides.

InautiloAug 15, 2023

#Development #Cheatsheets
CSS selectors: A visual guide · Usage of CSS selectors and pseudo-classes/elements at a glance https://ilo.im/14qx8b

_____
#WebDev #Frontend #CSS #CssSelectors #PseudoClasses #PseudoElements #Visualization

CSS Selectors: A Visual Guide & Reference

Visual guide to CSS selectors, including pseudo-classes (:nth-child, :hover,...), functional pseudo-classes (:not, :is,...) and pseudo-elements.

fffuel.co
CSS-TricksDec 20, 2022

The CSS :has Selector (and 4+ Examples) https://css-tricks.com/the-css-has-selector/"The CSS :has Selector (and 4+ Examples)"

The CSS :has selector helps you select elements when they contain other elements that match the selector you pass into :has().

Read more: https://css-tricks.com/the-css-has-selector/

#:has #:is #:not #pseudoelements