Here you can find inspiration for using or learning CSS. In the form of categories, different CSS properties or various methods of using CSS to solve different topics are displayed.

online preview

Online Pages

Layout

• The most convenient way to achieve horizontal and vertical centering
• Double-wing-layout
• Grid layout and clip-path implement GTA5 cover
• flex implements holy grail layout
• Holy Grail Layout
• CSS implements waterfall flow layout (column-count)
• CSS implements waterfall flow layout (display: flex)
• CSS implements waterfall flow layout (display: grid)
• 6 ways to achieve equal heights in multiple columns
• Multiple solutions to achieve cross-row or cross-column layout
• Multiple solutions to achieve single-column equal-width, and other multi-column adaptive uniform layout
• Use margin auto to implement align-self under flex: flex-end
• Use margin auto to implement justify-content: space-between under flex

Shadow (box-shadow, drop-shadow)

• Box-shadow implements circle progress bar animation
• Use box-shadow/gradient to achieve inscribed angle
• Neon Effect 3D TEXT
• box-shadow achieves neon text effect
• Use box-shadow to achieve translucent mask
• Linear gradient simulates long shadow
• One-sided projection
• Stereoscopic projection
• Linear gradient and shadow to achieve striped three-dimensional shadow striped word
• Projection word solid shadow
• Relief style button
• box-shadow implements background animation 2
• box-shadow implements background animation
• Single label to implement Douyin LOGO
• Single tag to implement fork graphics
• Single label uses inset shadow to implement IE LOGO

Pseudo class/pseudo element

• Pseudo element hover implements pure CSS method to control animation pause and play
• Pseudo element target implements pure CSS method to control animation pause and play
• Pseudo element checked implements pure CSS method to control animation pause and play
• Pseudo elements implement intelligent boundary judgment movement
• Pseudo element + border to implement bubble dialog
• Use checked pseudo-class to implement pure CSS Tab switching
• Use target pseudo-class to implement pure CSS Tab switching
• placeholder-shown cooperates with focus-within to realize input input interaction
• focus-within switch tab
• Pseudo element focus-within pure CSS method to achieve Nuggets landing special effects
• Pseudo elements to achieve loading effect
• Pseudo element mask to achieve line loading effect
• Use the :not() pseudo-class to control special border styles
• Use:not() pseudo-class to blur pop-up window background elements

Filter

• Ball shuttle amplification loading animation
• Ball shuttle effect
• Use filter:blur | filter:constrast to generate special blending effects
• Use filter:blur | filter:constrast to generate fire effect 2
• Use filter:blur | filter:constrast to generate fire effects
• Single label pure CSS to implement ghost animation
• Use hue-rotate to implement gradient background animation
• Filter and mix mode mixing effects
• Use drop-shadow with clip-path to generate regular shadows
• Use filter:blur to generate colored shadows
• Single label to achieve dripping effect
• Use filter:blur to enhance the 3D effect of text

Frame

• Use border-radius to implement charging animation
• Use border-image to implement dynamic borders
• Use border-radius, single label line animation
• Use changes in border-radius to simulate rope drops
• border-radius transformation to achieve loading effect
• Use outline to cleverly implement the plus sign
• Skillfully use overflow and realize border line animation
• border-color transformation to achieve text input effect
• Use border-radius to realize wave percentage chart
• Use border-radius to realize wave animation

Background/Gradient(linear-gradient/radial-gradient/conic-gradient)

• Use gradient and CSS Property to implement TV noise animation
• Use background-attachment to achieve frosted glass effect
• Use background-attachment to implement scroll shadow
• background-clip implements streamer text effect
• Corner gradient line border effect
• Corner gradient to achieve light and shadow border effect
• Angle gradient to implement pure CSS circle progress chart
• Corner gradient and blending mode to achieve cool light and shadow effects
• One line of code repeats the angular gradient code to achieve cool patterns
• Linear gradient to implement arrow symbols
• Linear gradient line border effect
• Linear gradient implementation of maze-like graphics
• Linear gradient to achieve inscribed angle
• Linear gradient simulates progress bar movement
• Linear gradient to implement scrolling progress bar
• Linear gradient background to realize striped characters
• Linear gradient to realize underline
• mask-image realizes image changes
• mask-image realizes the gradual appearance of text
• mask-image implements image transition transformation
• Use multiple background single tags to achieve bubble button click effect
• Radial gradient to achieve coupon wave shape
• Radial gradient to achieve stage lighting focus effect
• Gradient to achieve wave border
• Gradient to realize wave underline
• Gradient to achieve wave effect/wave progress box
• Exploring the extreme effects of gradients with CSS @property
• Multiple radial gradients for wonderful artistic backgrounds

Blend Mode（mix-blend-mode/background-blend-mode)

• Use mix-blend-mode to implement arbitrary color assignment technology for images
• Use mix-blend-mode to implement Douyin LOGO
• mix-blend-mode implements loading effect
• Picture-like TikTok LOGO dizzy effect
• mix-blend-mode MIX
• mix-blend-mode implements color overlay rotation animation
• TikTok-like LOGO text glitch effect
• Use mix-blend-mode to achieve light and shadow text effects
• CSS WAVE MOVE (stunning water wave effect)
• mix-blend-mode overlays multiple gradient backgrounds
• Use blend mode overlay to achieve text wave effect

3D

• 3D ball animation
• 3D number counting animation
• 3D space time shuttle effect
• 3D Cube Progress Bar
• 3D Cuber Roll 404 Effect
• 3D light and shadow transformation text effect
• 3D infinite extended perspective animation
• 3D line animation
• 3D maze line effects
• 3D rope animation
• 3D spiral number animation
• 3D text appearance animation
• 3D parallax effect with translate3d\perspective
• 3D parallax effect with translate3d\perspective2
• Use translateZ to implement scrolling parallax

Transition/Animation

• Use transition-delay to achieve button border animation effect
• CSS to realize curve motion
• Use animation-delay to achieve text fade effect
• Use animation delay to implement wave animation
• scale works with transfrom-origin to accurately control animation direction
• CSS cleverly controls animation progress
• Positive and negative rotation destructive animation

clip-path

• Use clip-path and border-image to implement rounded gradient borders
• clip-path implements border line animation 2
• clip-path implements border line animation
• clip-path implements glitch art style animation of pictures
• clip-path achieves text cracking effect

Text Class

• Use text-decoration to achieve wave effect

Comprehensive

• Implementation of 1px line under retina screen
• Fieldset and legend implement border inset text
• Use resize to implement picture switching preview function
• Dark Character Rain Animation
• chrome Tab column implementation
• Equiangular Spiral
• Huawei charging animation
• Night room picture
• Pure CSS to implement 360° pie chart
• PURE CSS to implement mouse follow 2
• PURE CSS to implement mouse follow 3
• PURE CSS to implement mouse following
• Use box-reflect to implement artistic graphics
• Use box-reflect to implement light and shadow buttons
• Use box-reflect to achieve 3D photo wall reflection effect
• CSS text break move effect
• CSS text break effect
• CSS text glitch effect

CSS-Doodle

• CSS-Doodle clip-path & drop-shadow to realize pattern art
• CSS-Doodle uses different graphic lines to realize pattern art 2
• CSS-Doodle uses different graphic lines to realize pattern art
• CSS-Doodle background + mask to achieve kaleidoscope effect
• CSS-Doodle background + mask to achieve striped artistic background
• CSS-Doodle fish 🐟 & seaweed 🍀
• CSS-Doodle spotlight🎆
• Summer city sunset picture🌇

svg

• Alipay AR scanning animation
• SVG drawing arc text
• SVG button hover line animation
• SVG uses drop-shadow to achieve line light and shadow effects
• Use SVG feTurbulence filter and filter: blur to implement Harmony LOGO
• SVG feTurbulence filter implements glitch button click effect
• SVG feTurbulence filter to achieve cloud effect
• SVG text hover line animation 2
• SVG text hover line animation