:has

68 snippets

Browse :has examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-has

Snippets(68)

Bootstrap 5 Accordion Example
A bootstrap 5 accordion example built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Dynamic Toggle with :has
A dynamic toggle with :has built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Tri-State Theme Toggle with light-dark()
A tri-state theme toggle with light-dark() built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Cinematic Context-Aware Video Cursor
A cinematic context-aware video cursor built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, Babel
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
Context Awareness, Pointer Tracking, Logic-less CSS State
Tailwind Fluid Grid
A tailwind fluid grid built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Always Great Grid
A always great grid built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS Var Only Sidebar Toggle
A css var only sidebar toggle built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Breadcrumb Separators with :has()
A breadcrumb separators with :has() built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS Style Switcher with :has()
A css style switcher with :has() built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Color Scheme Switcher with :has()
A color scheme switcher with :has() built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Theme Toggle
A theme toggle built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS-Only Slider
A css-only slider built with modern frontend techniques for responsive and reusable UI.
Content Slider Carousel Frontend Ui Modern Design+1 more
Demo Code
Pure CSS Slideshow
A pure css slideshow built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Full Viewport Gallery: Pure CSS
A full viewport gallery: pure css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Reflection with Progressive Blur in CSS
A reflection with progressive blur in css built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS Grid for Multi-Sized Avatars
A css grid for multi-sized avatars built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Content-Aware Cards
A content-aware cards built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Content Card Card Component+1 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
CSS :has(), Dynamic Layout, DOM Manipulation
Light/Dark Theme Switch with CSS Color-Scheme
A light/dark theme switch with css color-scheme built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Slingshot Elastic Stretch Toggle
A slingshot elastic stretch toggle built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 86+, Edge 86+, Firefox 85+, Safari 15.4+
Features
Elastic Motion, Viewport Stretching, State Detection
Star Rating with CSS :has()
A star rating with css :has() built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Custom Select Menu with Optgroups
A custom select menu with optgroups built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Frontend Ui Modern Design+1 more
Demo Code
Smart Home Lighting Multi-State Switch
A smart home lighting multi-state switch built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Modern CSS Star Rating Component
A modern css star rating component built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
CSS :has() Logic, Clip-path Shapes, JS-free Interaction, Keyboard Accessible
Search Input
A search input built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
Checkout Radios
A checkout radios built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Neobrutalist Subscribe Form
A neobrutalist subscribe form built with modern frontend techniques for responsive and reusable UI.
Form Elements Frontend Ui Modern Design User Input+1 more
Demo Code
CSS List Filtering with :has()
A css list filtering with :has() built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Filter Items in Subgrid with :has()
A filter items in subgrid with :has() built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Skeuomorphic Wood Texture Toggles
A skeuomorphic wood texture toggles built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, SCSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
Skeuomorphism, CSS Patterns, Input Hack, Detailed Shadows
Button-Like Checkboxes and Radios with Accessibility
A button-like checkboxes and radios with accessibility built with modern frontend techniques for responsive and reusable UI.
Call To Action Frontend Ui Modern Design Ui Controls+2 more
Demo Code
Wheel Timeline. Pure CSS
A wheel timeline. pure css built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
CSS3
Difficulty
Advanced
Features
No JavaScript, Radial Layout, CSS State Management
Responsive
Yes
CSS :has() Notification Toggle
A css :has() notification toggle built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Beginner
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
CSS :has(), Checkbox Hack, No JavaScript, Stateful UI
Responsive
Yes
AutoSort ToDo List (CSS Only)
A autosort todo list (css only) built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
Intermediate
Features
CSS-only logic, Automatic sorting, Flexbox layout
Responsive
Yes
Layout Switcher with :has()
A layout switcher with :has() built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS
Difficulty
intermediate
Browser support
Requires browsers that support the :has() selector.
Features
Pure CSS, No JS, Dynamic Layout
Responsive
Yes
Shuffling Effect in Pure CSS
A shuffling effect in pure css built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS Grid, CSS :has()
Difficulty
Intermediate
Features
Pure CSS, No JavaScript, Animated Transitions
Stacked Poetic Cards
A stacked poetic cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS, HTML
Features
3D Transform, CSS :has() selector, Radio Button Hack
Responsive
Yes
Character Choose with Preview Card Animation (CSS Sprites)
A character choose with preview card animation (css sprites) built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
CSS Houdini, CSS Sprites, CSS :has()
Difficulty
Advanced
Features
Frame-by-frame animation, Directional toggling, Pixel art rendering
Responsive
Yes
Expandable Wallet Payment Card
A expandable wallet payment card built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
Expandable UI, Pure CSS State, Smooth Animation, :has() Selector
Responsive
Yes
Wall of Text: Blogged
A wall of text: blogged built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Difficulty
Advanced
Features
Mouse Tracking, CSS Masking, Dynamic Layout
Responsive
Yes
Sparkle Generate Button
A sparkle generate button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS, Babel
Difficulty
Intermediate
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
Particle System, SVG Animation, CSS Variables, Randomization
Responsive
Yes
Skeuomorphic Egg Toggle Switch
A skeuomorphic egg toggle switch built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
3D Rotation, Skeuomorphic Design, CSS Keyframes, Multi-layered Shadows
Responsive
Yes
The Backrooms: CSS Edition
A the backrooms: css edition built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS 3D Transforms, HTML
Difficulty
advanced
Features
First-person perspective, 3D environment, Horror atmosphere
Responsive
Yes
Scroll-Driven View Transitions
A scroll-driven view transitions built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 115+, Edge 115+
Features
Scroll Timeline, Scroll Snap, View Transitions, Pure CSS
Responsive
Yes
Pure CSS Morphing Dark Mode Toggle
A pure css morphing dark mode toggle built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Safari 15.4+, Firefox 121+
Features
Morphing Animation, Parent Selection, No JavaScript, Accessibility Focus
Responsive
Yes
:has() Pseudo-Class Selector
A :has() pseudo-class selector built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3
Difficulty
Intermediate
Features
Parent selector logic, Focus effect
Responsive
Yes
Animated Border Drawing Button
A animated border drawing button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
Staggered Animation, CSS :has(), Pure CSS
Responsive
Yes
Animated Grid Tracks with :has()
A animated grid tracks with :has() built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS Grid, CSS :has() selector
Difficulty
Intermediate
Features
Expanding grid tracks, Hover-triggered animations, Blend mode effects
Responsive
Yes
CSS :has() Character Select Screen
A css :has() character select screen built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS, JavaScript
Difficulty
Beginner
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
CSS State Management, No JavaScript Logic, Responsive Grid
Responsive
Yes
CSS Anchor Positioning Navigation Effect
A css anchor positioning navigation effect built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Advanced
Browser support
Chrome 125+, Edge 125+
Features
Zero JavaScript, CSS Anchor Positioning, Spring Animations, Glassmorphism
Responsive
Yes
CSS Staircase Hover Effect Using :has()
A css staircase hover effect using :has() built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS
Difficulty
intermediate
Features
CSS :has() selector, Cascading animation, No-JS interaction
CSS-Only 3D Animation
A css-only 3d animation built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS3
Difficulty
Intermediate
Features
3D Transforms, Parallax, CSS-Only
Responsive
Yes
Dynamic Article Hover Cursor
A dynamic article hover cursor built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, CSS, Babel
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
Custom Cursor, CSS :has(), Blend Modes, Grid Layout
Responsive
Yes
Dynamic Circular Avatar Gallery
A dynamic circular avatar gallery built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
HTML, CSS
Difficulty
Advanced
Browser support
Chrome 119+, Edge 119+
Features
CSS Trigonometry, Hover Expansion, Dynamic Masking
Responsive
Yes
Interactive Radial Image Carousel
A interactive radial image carousel built with modern frontend techniques for responsive and reusable UI.
Content Slider Semantic Html Carousel Html+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
Advanced
Browser support
Chrome 119+, Edge 119+, Firefox (partial), Safari 26.2+
Features
CSS Motion Path, Sibling Targeting, Spring Physics, Pure CSS
Responsive
Yes
Mac Dock Magnify Effect with :has
A mac dock magnify effect with :has built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, HTML
Difficulty
Intermediate
Features
Magnify Effect, Neighbor Scaling, Glassmorphism
Responsive
Yes
Cosmic 3D Galaxy Button
A cosmic 3d galaxy button built with modern frontend techniques for responsive and reusable UI.
Call To Action Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS, Babel
Difficulty
Advanced
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
3D Rotation, Particle System, State-Driven Styling
Responsive
Yes
Image Orbit Animation with CSS
A image orbit animation with css built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
CSS, HTML
Difficulty
Intermediate
Features
offset-path, :has selector, CSS Animations
Responsive
Yes
CSS Cube
A css cube built with modern frontend techniques for responsive and reusable UI.
Text Formatting Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS, SCSS
Difficulty
advanced
Features
3D Transforms, Isometric View, Dark Mode, No-JS Theme Switching
Responsive
Yes
Can :has() Connect 4?
A can :has() connect 4? built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
CSS :has(), Checkbox Hack
Difficulty
Advanced
Features
CSS-only game logic, Win condition detection, No-JS implementation
E-commerce Product Filter
A e-commerce product filter built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
HTML, CSS
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 121+, Safari 15.4+
Features
CSS Logic, Sticky Sidebar, No JavaScript
Responsive
Yes
Hover Effects
A hover effects built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS
Difficulty
intermediate
Features
CSS :has() selector, Custom Properties, Data Attributes
Responsive Sidebar
A responsive sidebar built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Difficulty
Intermediate
Features
Collapsible menu, CSS Custom Properties, Dynamic tooltips
Responsive
Yes
Polygon Sliced Theme Toggle Navbar
A polygon sliced theme toggle navbar built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Semantic Html Html+4 more
Demo Code
Technologies
HTML, CSS, Babel
Difficulty
Advanced
Browser support
Chrome 111+, Edge 111+, Firefox 121+, Safari 17.4+
Features
View Transitions, Trigonometric Hover, State Management
Responsive
Yes
Table Cell Hover Effect with CSS :has()
A table cell hover effect with css :has() built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS3, HTML5
Difficulty
Intermediate
Features
CSS :has() selector, Zero-JS hover logic, High-performance rendering
Trigonometric Radial Popover Menu
A trigonometric radial popover menu built with modern frontend techniques for responsive and reusable UI.
Menu Ui Navbar Semantic Html Html+3 more
Demo Code
Technologies
HTML, CSS
Difficulty
Advanced
Browser support
Chrome 139+, Edge 139+
Features
CSS Functions, Trigonometry, Popover API, Sibling Index
Responsive
Yes
LapisCordis: A Greco-Roman Mythological Card Game
A lapiscordis: a greco-roman mythological card game built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+3 more
Demo Code
Difficulty
Intermediate
Features
Smooth animations, Interactive card effects, Thematic TCG interface
Glowing Dropdown
A glowing dropdown built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS Houdini, CSS Custom Properties
Difficulty
Advanced
Features
Neon Glow, Animated Gradients, Custom Select Menu
Glowing Tabs
A glowing tabs built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS Houdini API, JavaScript, CSS :has()
Difficulty
intermediate
Features
Glowing background, Smooth transitions, Dynamic geometry calculation

Snippets(68)

related hubs