Cascading Style Sheets

lastmod 2025-05-28created 2018-06-18129 edits

Cascading Style Sheets (CSS) is a language that describes how a markup language is actually displayed. It is mainly used with HTML and XHTML, and can also be used with XML. It is a W3C standard and offers a high degree of freedom when defining layout and style.

If the markup language is the body of a website, CSS can be said to play the decorating role, like clothes and accessories. In other words, by changing only the CSS file while leaving the HTML structure as is, you can make it look like an entirely different website.

CSS3, currently under development, adds features that can replace images made with graphics editing programs, such as shadow effects, gradients, and transforms. It also adds various animation features, replacing Adobe Flash to some extent.

Categories

• CSS:Libraries
• CSS:MediaQuery - Media queries
• CSS:Selectors (CSS:RuleSet) - How to use selectors. (Rule Set)
• CSS:AtRule - Selectors that start with @.
• CSS:Background
• CSS:Animation - How to apply animations.
• CSS:Gradients - How to apply gradations/gradients.
• CSS:Color - About CSS colors.
• CSS:Units - Explanation of CSS units. (e.g. vw, vh, ex, rem, ...)
• CSS:box-sizing - Specifies how the width and height of an element are calculated.
• CSS:backdrop-filter - Effect where the background shows through
• CSS:easing-function
• CSS:transition
• CSS:flexbox - Explanation of CSS display: flex.
• CSS:margin
  • Includes content on Negative margins.
• CSS:grid
• CSS:float
• CSS:block
• CSS:position
• CSS:important
• CSS:filter
• CSS:overflow
  • Includes how to make the scroll area 100% in size when using overflow
• CSS:cursor - Cursors.
• CSS:object-fit - Adjusts to fit the size of the container. Used on objects such as <img> or <video>

  and the like. Using cover preserves the aspect ratio (aspect-ratio).

• CSS:prefers-color-scheme - Used to detect whether the user's system uses a light theme or a dark theme.
• CSS:@font-face - Font settings.
• CSS:Example:HideScrollbar - How to remove the scrollbar.
• CSS:PseudoClasses (Korean: 가상 클래스; Korean: 의사 클래스; Pseudo-classes) - Written with a single colon (:) and used to select a specific state of an element. Typical examples are :root, :hover, :active, and the like.
• CSS:PseudoElements (Korean: 가상 요소; Pseudo-elements) - Written with a double colon (::); creates a virtual element that does not exist in the document tree and applies styles to it. Typical examples are ::after, ::before, and the like.
• CSS:ContainingBlock - The element that affects an element's size and position. If positioning with position does not work properly, look at this page.
• CSS:CircularProgress - How to make a Circular Progress with CSS.
• CSS-in-JS
• CSS-in-CSS
• WAI-ARIA

Projects

• [Recommended] Sorted CSS Colors - A color chart that sorts CSS colors by Hue and then by Lightness/Saturation, showing their English names/RGB/HSL
  • https://enes.in/sorted-colors/
• Github - Pokémon Cards Holographic effect in CSS - Holographic Pokémon cards made with CSS
  • Pokémon Cards CSS Holographic Effect
  • Applies various CSS effects that make the holographic effect of collectible Pokémon cards look real
    • 3d transforms, filters, blend modes, css gradients
  • Flare/glare effect at the mouse position
  • Vertical Beam effect to represent Holofoil cards
  • Galaxy Holofoil / Radiant Holofoil effects, etc.
• Scrollbar.app - Interactive CSS scrollbar designer
• Lenis - Smooth scrolling library
• superwhite - Display very bright white on HDR-capable devices
• Lightning CSS - Ultra-fast CSS parser written in Rust
• mo.js - Open-source motion graphics library for the web
• WebTUI - CSS library that brings the beauty of terminal UIs to the browser
• Critical CSS - The minimum CSS needed to render the "initially visible area (above the fold)" of a web page
• CSS Minecraft - Minecraft made with pure CSS

Rule Set

• CSS: Understanding selectors (Selector)

CSS precedence

• CSS precedence - ofcourse

For reference, when styles are applied via classes and the rank is the same, the one applied first seems to take precedence.

Sample code

body { color:#009933; }

Changes the color of all text inside the <body> TAG.

.class-style { /* ... */ }

Style for a class (class).

#id-style { /* ... */ }

Style for an id.

p { height:100px; width:100px; }

Fixes the width and height of the <p> block to 100px and 100px respectively.

td { text-align: center; }

Aligns strings horizontally to the center. Same as align="center" on a td block.

p:nth-child(odd){ color: green; }

Applies green as the font color of odd

tags.

p:nth-child(even){ color: red; }

Applies red as the font color of even

tags.

p:nth-child(4){ color: blue; }

Applies blue as the font color of the fourth

tag.

p[name]{ color: blue; }

Applies blue as the font color of

tags that have a name attribute.

p[name="test"]{ color: blue; }

Applies blue as the font color of

tags whose name attribute value is test.

p[name^="test"]{ color: blue; }

Applies blue as the font color of

tags whose name attribute starts with the string test.

p[name$="test"]{ color: blue; }

Applies blue as the font color of

tags whose name attribute ends with the string test.

p[name*="test"]{ color: blue; }

Applies blue as the font color of

tags whose name attribute contains test.

word-break:break-all;

A property that breaks a sentence by character rather than at the spaces between words. Sentences that grow past the size of <td> (text without spaces) are broken by character, so they automatically wrap to fit the width.

word-space:nowrap;

Does not wrap automatically even if the cell width is specified.

float

Used to align an Object, i.e. a block.

display

Takes the value liline, block, or hidden. A property related to output (positional relationships).

Set to block, it breaks the line; set to inline, it does not.

Set to block, top/bottom margin and padding properties can be used,

but set to inline, top/bottom margin and padding cannot be used.

Set to block, the width and height properties can be used,

but set to inline, the width and height properties cannot be used.

Align a block with float and an inline with text-align.

Center a block with margin:0 auto;; the block must have a width value.

Defensive CSS

• Defensive CSS - Ahmad Shadeed

A collection of snippets that prevent specific CSS problems:

• Flexbox wrapping -> flex-wrap: wrap;
• Leave spare space -> margin-right: 1rem;
• Long content that should not wrap -> text-overflow: ellipsis; white-space:nowrap; overflow: hidden;
• Prevent stretched/squashed images -> object-fit: cover;
• Lock scroll chaining -> overscroll-behavior-y: contain;
• Give CSS variables a fallback value -> max-width: calc(100% - var(--actions-width, 70px));
• Fixed height -> use min-height rather than height
• Fixed width -> use min-width rather than width
• Remove background repetition -> background-repeat: no-repeat;
• Use vertical media queries -> when using something like position:sticky, apply it only above a certain height @media (min-height:600px) {}
• When arranging Flexbox items, use gap: 1rem; instead of justify-content: space-between;
• Handle failed image loading when placing white text over an image -> use background-color: grey;
• Be careful with fixed values in CSS Grid -> always use media queries
• Show scrollbars only when needed -> overflow-y: auto;
• Avoid layout shift when a scrollbar appears -> scrollbar-gutter: stable;
• Set the minimum content size in Flexbox -> min-width: 0; (the default is auto, which causes overflow )
• Set the minimum content size in CSS Grid -> use minmax()
• Auto Fit vs. Auto Fill in CSS Grid -> auto-fill is better in most cases
• Set the maximum image width -> max-width: 100%
• When using postition: sticky on a child of a grid container, apply align-self: start
• Grouped selectors may not work in other browsers, so split them into separate ones

Tips for better CSS transitions & animations

• Tips for better CSS transitions & animations | GeekNews
  • [Recommended] [Original] Ten tips for better CSS transitions and animations - Josh Collinsworth blog

Ten tips for better CSS transitions and animations

• Make it shorter than you think
  • 0.15–0.4 seconds for a single transition
  • Speed it up until you think it's too fast, then dial it back little by little
• Match the action to the curve
  • Motion is as subjective as color, but just as important
  • Think about real-world motion and compare
• Acceleration and deceleration
  • If an animation looks unnatural, it is because it starts or ends abruptly
  • Even if subtle, it is good to add easing-in/out to the cubic-bezier curve
  • "Inertia" also helps it look real
• Less is more
  • The more an element changes during an animation, the greater the risk of it looking excessive
  • If opacity goes from 0 to 1, try 0.4 instead of 1. If you change the size, try starting from a size just slightly smaller
  • In most cases, an animation that moves an element into place should move it between 5 and 40 pixels
• Avoid browser defaults
  • Browsers have built-in curves such as linear, ease, ease-in, ease-out, ease-in-out
  • They are convenient and useful in certain situations, but so common that everything looks the same (just as sites built with Bootstrap/Tailwind all look alike)
  • Try the cubic-bezier curve autocomplete values in VS Code
  • Or open the browser developer tools and try the curve editor
• Multiple properties, multiple easings
  • Not always useful, but when you need to change several properties at once (transform and opacity at the same time)
    • Applying the same cubic-bezier curve sometimes looks fine, but sometimes it doesn't
    • A curve that works well for transform may not suit a fade
    • In such cases, it is better to choose a different easing for each CSS property
  • You can split @keyframes animations by property, or specify multiple transitions
    • linear for opacity, cubic-bezier(.5, 0, .5, 1) for transform
• Use staggered delays
  • When transitioning multiple elements, don't underestimate the effect of animation-delay or transition-delay
• In is for going out, Out is for coming in
  • There are three kinds of easing curves
    • ease in (starts slowly)
    • ease out (ends slowly)
    • in-out (fast only in the middle, slow at the start and end)
  • The tricky part of transitions is that you often want the in to ease-out and the out to ease-in
    • An animation where one thing leaves and another enters looks like a single transition to the user, but internally it is two transitions
    • You want the leaving one to go slowly, so it needs ease-in, and the entering one should be ease-out
• Rely on hardware acceleration
  • Not every CSS property runs smoothly on every device & browser
  • Properties that are always hardware-accelerated
    • transform (all translate, scale, rotate, and even their 3D versions)
    • opacity
  • Properties that are hardware-accelerated in some cases
    • Certain SVG properties
    • filter (depending on the browser and the filter)
  • Canvas and WebGL are also hardware-accelerated but are not covered here
  • In other words, to move, resize, or rotate, always use the CSS tranform property
  • Whatever you do, don't change an element's size or position directly
    • Directly changing properties that affect page layout, such as height, width, border, margin, padding, risks noticeably slowing down the page
• Use will-change when needed
  • If an animation should in theory be smooth and performant but looks janky, use the will-change property
  • It tells the browser in advance what will change, so other calculations can be skipped
• Bonus: respect user preferences
  • Users can specify in device settings whether they prefer "reduced motion"
  • You can detect this value with a media query or through JavaScript and respond accordingly

Various alignment methods

• margin: auto - Centers content.
• text-align: center - Applies to inline elements inside a block element.
  • big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea
• position: absolute - Often used when the cases above don't apply. Set position: absolute, then set left: 50%.
• Using flex
  • flex-direction: row; justify-content: center; align-items: center;
  • flex-direction: column; justify-content: center; align-items: center;
  • Put flex-grow: 1; between two divs of the same size

Vertical alignment methods (Vertical Align)

• Professional Guide: How to Vertically Align Elements Using CSS
• 6 Methods For Vertical Centering With CSS
• [Recommended] 15 ways to implement vertical alignment with CSS - LogRocket Blog ¹
• (CSS) Vertical centering, vertical center alignment vertical align

Background: why height: 100%; doesn't work

• 100% height doesn't work within a flex item in a flex-item child (Chrome / Safari) · Issue #197 · philipwalton/flexbugs

If you set a div's height to 100% with height: 100%;, the size is applied relative to the div's parent element. However, it may not work properly if the parent element's height is not explicitly set or it does not have a relative size.

Because height: 100%; depends on the size of the parent element, the parent must have an explicit height or a relative size set. If the parent's height is not set, it is treated as the default auto and the height is not inherited.

So height: 100%; works correctly only if you also set a height on the parent element or, when the parent is relatively positioned, give it a relative size.

<div class="flex">
    <div class="flex-item">
        <div class="element">
            The orange element should be as tall as the blue element
        </div>
    </div>
</div>

When using flex-grow: 1;, you must also add height: 0; to that element for the child element's height: 100% to work properly.

.flex {
    height: 100px;
    display: flex;
    flex-direction: column;
}
.flex-item {
    background-color: steelblue;
    flex-grow: 1;
    height: 0px;    /* <--- right here! */
}
.element {
    height: 100%;
    background-color: orange;
}

display: table | table-cell

Center by applying display:table to the parent element and display:table-cell, vertical-align:middle to the child element.

.contentBox{
  display:table;
  table-layout:fixed;
  width:100%;
  height:200px;
  background:#ddd;
  text-align:center;
}
.contentBox__item{
  display:table-cell;
  vertical-align:middle;
}

display: flex | grid

Align using flex and grid. (direction is based on row) However, when using flex and grid, be mindful of support in older browsers.

.flexBox{
  display:flex;
  align-items:center; /* 방향이 row 기준: 세로 중앙 정렬*/
  height:200px;
  background:green;
}

.gridBox{
  display:grid;
  align-items:center; /* 방향이 row 기준: 세로 중앙 정렬*/
  margin-top:30px;
  height:200px;
  background:orange;
}

.boxItem{
  display:inline-block;
  background:blue;
  color:#fff;
}

position: absolute

There are two ways to center an element by setting its position value to absolute. Apply position:relative to the parent element (or rather, the element that serves as the reference), then center it using margin or the transform: translate property.

Since the element is moved 50% from its leftmost and top edges, you pull the element itself back left and up by half using negative values.

Before the negative values are applied, that point sits at the exact center.

.contentBox{
  position:relative;
  height:200px;
  background:#ddd;
}
.contentBox__item{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-25px;
  margin-left:-50px;
  width:80px;
  height:50px;
  background:blue;
  color:#fff;
}

transform

.contentBox{
  position:relative;
  height:200px;
  background:#ddd;
}
.contentBox__item{
  position:absolute;
  top:50%;
  left:50%;
  width:80px;
  height:50px;
  background:blue;
  color:#fff;
  transform:translate(-50%,-50%); /* translate(x축,y축) */
}

before

A method that applies the pseudo-selector before to the parent element. It creates a virtual element wrapping the elements to align and centers that element.

.contentBox{
  height:200px;
  background:#ddd;
}
.contentBox:before{
  content:'';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.contentBox__item{
  background:blue;
  color:#fff;
}

margin: auto | auto 0

Applying 0 auto to margin for horizontal centering is a widely known styling technique.

With a slight change, using auto or auto 0 also centers vertically. Until a few years ago it was hard to use because it was incompatible with older browsers, but browsers have been updated a lot recently, so this method is added too.

Still, I think care and checking are needed when using it.

.contentBox {
  display: flex;
  height: 200px;
  background: #ddd;
}
.contentBox__item {
  margin: auto;
  width: 80px;
  height: 50px;
  background: blue;
  color: #fff;
}

Or

.container{
  position:relative;
}
.element{
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  height: 20px; /*requires explicit height*/
}

@supports

Tells whether the browser supports a CSS feature @supports (display: grid) { ... }

Snap Scroll

Applies Snap Scroll. Scrolls like a mobile screen.

• scroll-snap-type
• scroll-snap-align

Flexbox gap

See CSS:flexbox#gap for details. In short, it adjusts the spacing between items.

aspect ratio

img {
  aspect-ratio: 16 / 9;
}

position: stiky

Can be applied so that an element sticks to the top of the screen.

html:

<div>
  <section>
    <aside>Header</aside>
  </section>
<div>

css:

section {
  height: 70%;
}
aside {
  position: sticky;
}

It used to require javascript to implement, but now it can be done with CSS alone.

is Pseudo Selector

Old-style code:

header button,
nav button,
form button {
  background-color: tomato;
}

With :is:

:is(header, nav, form) button {
  background-color: tomato;
}

height 100%

• About height:100%

This means matching the height of the parent element. If you need 100% of the screen, use height: 100vh;. (Viewport Height)

point-events

• CSS event control (pointer-events) property

Insert CSS Gradient

• Adding gradients with CSS

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Added 2012.01.01:

background: -webkit-gradient(linear, left top, left bottom, from(#ffc400), to(#e59302));

This is gradient source that works in mobile browsers (WebKit browsers on iPhone, Android, etc.). The from and to properties must be included. On mobile pages you don't need properties such as -moz- or filtter. Because it's WebKit.

Gradient animation

• CSS Gradient Animator

background: linear-gradient(270deg, #246655, #246655, #246655, #246655);
background-size: 800% 800%;

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Responsive Image

• Images not responsive by default in Twitter Bootstrap 3?

The CSS that automatically adjusts image size for a responsive web is as follows.

.image-responsive {
  width: 100%;
  height: auto;
  display: block;
}

clear attribute

The clear property has the following values. When float: left; is used on a div, the following divs are not laid out properly; use it in that case.

• clear:left: clear for elements floated to the left.
• clear:right: clear for elements floated to the right.
• clear:both: clear on both sides.
• clear:inherit: inherits the clear value of the parent element.
• clear:none: removes the clear value.

Animation

• w3schools - CSS3 Animations

 /* The animation code */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Ease-out/in

• Google developers - Web Fundamentals - The basics of easing

.toast-popup {
    /* ... */
    transition: transform 500ms ease-out;
}

not so boring fade-in

Fade-in animation that is not so boring:

{
  0% { opacity: 0; filter: brightness(1) blur(20px) }
  10% { opacity: 1; filter: brightness(2) blur(10px) }
  100% { opacity: 1; filter: brightness(1) blur(0) }
}

• Preview result: https://twitter.com/i/status/1552438750470340610

Remove scrollbar

• Stackoverflow - Disable browsers vertical and horizontal scrollbars

    <style type='text/css'>
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
    </style>

React Default Global CSS

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}

Dark mode media query

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
}

Applying line breaks

• html - How to line-break from css, without using
  ? - Stack Overflow
• white-space - CSS: Cascading Style Sheets | MDN

How to make characters such as \n produce line breaks as they are:

p {
  white-space: pre;
}

How to wrap automatically when text goes past the end of the component:

p {
  white-space: pre-wrap;
}

Others:

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

How to remove the outline when an Input has focus

• css - How to remove focus border (outline) around text/input boxes? (Chrome) - Stack Overflow

*:focus {
    outline: none;
}

A surprising way to increase CSS selector specificity

• A surprising way to increase CSS selector specificity | GeekNews
  • [Original] Double your specificity with this one weird trick | Cirrus's Realm

In short, repeat the selector.

For example, .checkbox__icon.checkbox__icon has higher specificity than a single .checkbox__icon.

This may feel like a CSS hack, but the CSS Selectors Level 4 specification explicitly states: "Repeated occurrences of the same simple selector are allowed and do increase specificity."

Types of values

Specified Value

• Specified value - CSS: Cascading Style Sheets | MDN

The specified value of a CSS property is set in one of three ways.

• If the document's stylesheet specifies a value for the property, that value is used. For example, if the color property is set to green, the text color of the corresponding element (element) will be green.
• If the document's stylesheet does not specify a value, it is inherited from the parent element (if possible). For example, if inside a

  there is a paragraph (

  ), the

  's CSS font property value is "Arial", and the

  has no font property defined, the Arial font is inherited.

• If none of the above is available, the element's initial value as specified in the CSS spec is applied.

Computed Value

• Computed value - CSS: Cascading Style Sheets | MDN

The computed value of a CSS property is the value passed from parent to child during inheritance. The computed value is obtained from the specified value as follows.

• By handling the special values inherit, initial, unset, revert.
• By performing the computation indicated by the "Computed value" entry in each property's definition table.

The computation needed to obtain the computed value usually involves converting relative values (em units, percentages, etc.) to absolute values. For example, if an element has font-size: 1px and padding-top: 2em, the computed value of padding-top is 32px, twice the font size.

However, for properties such as width, margin-right, text-index, top, where layout must be computed before the percentage value can be determined, a specified percentage value becomes a percentage computed value. Additionally, a unitless value of the line-height property also becomes the computed value as is. These remaining relative computed values become absolute when the used value is determined.

Used Value

• Used value - CSS: Cascading Style Sheets | MDN

The used value of a CSS property is the result after all calculations have been performed on the computed value.

Every CSS property has a used value once the user agent finishes its calculations. Sizes (width, line-height, etc.) are determined in pixels. The values of shorthand properties (background, etc.) match those of their components (background-color, background-size, etc.) and the values that position and float will have.

CSS with JavaScript

• Controlling CSS with Javascript (1) - CSSOM : CSS Object Model

Compatibility

Compat2021 - Solving the top 5 browser compatibility concerns

A project in which Google works with browser vendors to solve the 5 compatibility problems web developers find most troublesome

• CSS Flexbox
• CSS Grid
• position: sticky
• aspect-ratio
• CSS Transform

Variable composition

• The power of composition with CSS variables | TOAST UI :: Make Your Web Delicious!
  • [Original] The Power of Composition with CSS Variables

Time-based CSS animation techniques

• Time-based CSS animation techniques | GeekNews
  • [Original] Time-based CSS Animations ²
• Using a time-based approach for CSS animations
  • With math functions now supported in CSS, time-based CSS animations can be tried again
    • mod(), round(), trigonometric functions, etc. are supported
    • You may need to enable experimental feature flags to see the demos
• Basic idea
  • With the CSS Houdini API you can define a custom variable that tracks time (in milliseconds)
    • Define the --t variable with the @property rule and set its initial value to 0
    • Use the @keyframes rule to increase the --t variable linearly over 24 hours (86,400,000ms)
    • Other values based on --t change along with it, creating the animation effect
    • The value of the --t variable can be displayed with the counter() function
• Controlling frame rate
  • Keeping an update rate of 60 frames per second (FPS) is enough for smooth animation
  • If needed, the frame rate can be controlled manually with the step() function
    • Use the step() function in the animation-timing-function property to compute the desired FPS value
• Time conversion
  • Since the --t value keeps increasing in one direction, it may not suit some CSS properties
  • The min() function can stop the animation when it reaches a certain value
  • The mod() function can restart the animation
  • The sin() function can create a back-and-forth effect
• Custom Easing functions
  • Custom easing functions can be built with math functions and the --t variable
  • Can create effects that are hard to achieve with cubic-bezier()
  • Examples: ease-out-cubic, ease-out-elastic, etc.
• CSS Doodle experiments
  • In complex expressions, var() and calc() can make code less readable
  • In css-doodle, the @t function can represent the --t variable
  • The latest version of css-doodle directly accepts simple math expressions inside arguments
  • @T and @TS functions are also provided
    • @T represents time since the start of the day
    • @TS is shorthand for @t(/1000) and tracks time in seconds
  • Examples such as a clock and a jumping motion can be implemented with css-doodle
• Conclusion
  • This approach of using time as a variable is interesting
  • Using Keyframes may be more intuitive, but in demo scenes with lots of math and input variables, using time as a variable can produce a wider variety of results
• GN⁺'s opinion
  • Time-based animation techniques in CSS seem likely not only to widen the range of animations achievable with CSS alone, but also to open up more possibilities for combining it with other technologies such as shaders and WebGL
  • Used together with tools such as CSS Houdini and CSS Doodle, even more flexible and varied expression seems possible
  • However, there will be things to consider when applying it to real projects, such as browser compatibility and performance issues. It would be good to compare its pros and cons against the existing Keyframe approach and use it selectively
  • Its pros and cons compared with dedicated animation libraries such as GSAP also need to be analyzed. Looking for ways to use them complementarily could also be good
  • Hopefully more examples and use cases of time-based CSS animation will be shared so that front-end developers can try it more easily
• Hacker News comments
  • In CSS you can control animation progress with JavaScript by using negative animation-delay values. For example, setting animation-delay: -1500ms starts immediately but jumps to the 1.5-second point. By manipulating this value with JavaScript you can scrub CSS animations and make every animation compatible with a game-engine-style compute-update-render tick loop.
  • Once you go beyond simple easing functions or basic keyframes on one or two channels, you quickly run into the limits of this approach. The Theatre.js library consists of a studio UI with a timeline for editing keyframes and Bézier curves, plus a runtime that takes those keyframes and interpolates values relative to the timeline, which is useful when you need coordinated animations.
  • This article uses custom CSS @property, which has 88% browser support. Note that browsers differ in how they set initial values. Chrome uses the initial value when the value is undefined or invalid, but Firefox uses it only when it is undefined. This won't matter for most projects, but resolving the cross-browser implementation inconsistency may require setting Firefox's default value with JavaScript.
  • CSS supports plenty of math functions, such as mod(), round(), and trigonometric functions. CSS can't start a timer the way JavaScript can, but these days you can define custom variables with the CSS Houdini API to track time in milliseconds. But why do we need all this when we have JavaScript? Shouldn't the drawing layer care only about drawing primitives? Why keep stuffing in more and more higher-level layers?
  • The clock you made looks very polished. A well-written article. Chrome hasn't shipped CSS support for mod() yet, so most of the examples on the page don't animate unless you use a preview release.
  • If you want smooth CSS animations in every browser without needing to control ticks, the FLIP method is useful.
  • I wanted to do something like 'box breathing', where each inhale-hold-exhale-hold phase can be customized to fit your own body and produce the effect you want, but I couldn't find a way to do it without methods like those on this page (without JS or huge complexity). This page has really creative demos!
  • Interestingly, the demos before mod() is used work, but mod() and sin() do nothing in the latest Chrome for Android.
  • The animation at the bottom of the page is very impressive. It looks like a <video> rather than <div> elements.
  • Very impressive, but in a way it feels like we've reached a point close to what you could do with Flash decades ago. I don't want Flash to come back, but I'd like more user-friendly tools for building CSS animations.

Awesome Web Effect - Collection of web page effects

• Github - awesome-web-effect ³

🚀 A series of exquisite and compact web page cool effects

Background decoration, mouse effects, CSS 3D effects, image effects, input effects, transition effects, Rain & Snow, button effects, loading effects, audio effects, WebCam effects, SVG Animation, fireworks, etc.

Glassmorphism

• Everything about Glassmorphism (with CSS examples)
• Glassmorphism CSS Generator

How to implement Glassmorphism

Light theme

/* Background styles */
body {
    background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100');
    background-position: center;
}

/* Glassmorphism card effect */
.card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
}

/* Generated by https://generator.ui.glass/ */

Dark theme

/* Background styles */
body {
    background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100');
    background-position: center;
}

/* Glassmorphism card effect */
.card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(17, 25, 40, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
}

/* Generated by https://generator.ui.glass/ */

New front-end features for designers in 2025

• New front-end features for designers in 2025 | GeekNews
  • [Original] New Front-End Features For Designers In 2025 — Smashing Magazine

CSS container queries and style queries

• Enables component-driven styling
  • Applies CSS styles by querying the container's width and style information
  • Useful for styling reusable components with multiple variants
  • See: Introduction to CSS style queries

Text balancing (text-wrap: balance)

• Keeps typographic balance
  • Automatically calculated so that text is distributed evenly in headings, card titles, etc.
  • See: Ahmad Shadeed's guide

Automatic sizing of form input fields

• Automated input sizing
  • The size of a text input or select menu adjusts automatically to fit its content
  • Can be implemented with a single simple line of CSS
  • See: Adam Argyle's explanation

=== Searchable hidden content (hidden=until-found) ===

• Improved UI accessibility
  • Hidden content such as collapsed accordion sections becomes findable through in-page search and search engines
  • See: Joey Arhar's guide

High-definition color support (OKLCH, OKLAB)

• Supports 50% more colors
  • A new color spec designed around human color perception
  • Suitable for design systems and gradients
  • See: Vitaly Friedman's explanation

CSS relative colors

• Computing colors based on existing colors
  • The from keyword lets you adjust a color's lightness, compute complementary colors, etc.
  • See: Adam Argyle's code snippets

View Transitions API

• Smooth screen transitions
  • Implements seamless transitions with CSS animations when moving from an existing screen to a new one
  • Supports transitions within a single document or between two documents
  • See: Bramus Van Damme's guide

CSS scroll snap

• Provides a precise scrolling experience
  • Scroll containers can be configured so that the user snaps to specific content items
  • See: Ahmad Shadeed's guide

Parent styling (:has)

• Style a parent element based on the state of its child elements
  • Styles can be adjusted based on the state of other elements, beyond parent-child relationships
  • See: Josh W. Comeau's guide

Other notable features

• Better input state styling: :user-valid, :user-invalid give feedback after the user changes the input
• Mobile keyboard optimization: improve virtual keyboards with inputmode and enterkeyhint
• <dialog> HTML element: implements accessible modals and popovers

Troubleshooting

Scoped style not applied in a Vue component

See Vue Loader#Deep Selector for details.

See also

• Bootstrap
• HTML
• Javascript
• TerminalTextEffects (TTE) - Terminal text effects engine

Favorite site

• Wikipedia (en) explanation of CSS
• Button UI using css3
• CSS coding methodology, the four bubbles model
• HelloWorld blog responsive web redesign
• [Recommended] Introduction to CSS3
• [Recommended] Why CSS became difficult, seen through the history of CSS ⁴

Article

• (Translation) The evolution of scalable CSS | Ykss

Guide

• CSS basics
• w3schools: CSS Tutorial
• Mozilla foundation: border-top-right-radius CSS Tag
• CSS basics course
• Centering in the Unknown ⁵
• Compass Border Radius
• How to apply styles to an html document
• Applying CSS height 100%
• Let's learn CSS layout: box-sizing
• Mozilla: Scaling background images
• [Recommended] Vertical Centering With CSS ⁶
  • CSS vertical centering (without tables) ⁷
• [Recommended] (Translation) Deep dive into CSS: font metrics, line-height and vertical-align ⁸
  • Original: Deep dive CSS: font metrics, line-height and vertical-align
• CSS Backgrounds and Borders Module Level 3
• CSS3 basics – box-shadow
• HTML/CSS basics - Fixed Width layout
• What does 100% mean in CSS
• Layered Image Hover Effects with HTML & CSS | Isometric Design | Plantpot

Examples

• 8 Stunning CSS Snippets for Creating the Glassmorphism Effect - Glassmorphism effect (glass window glare)
• 93 Beautiful CSS box-shadow examples - CSS Scan - Collection of shadow effects

Tools

• Ultimate CSS Gradient Generator
• Code Beautifier: CSS Formatter and Optimiser
• Devices.css - Modern devices crafted in pure CSS - Modern devices drawn in pure CSS only
  • The exteriors of commonly used devices expressed in pure CSS only (mostly just the frame, without the wallpaper)
  • Phones: iPhone 14 Pro/14/X/8 and 3G, Google Pixel 6 Pro/2XL, Samsung Galaxy S8
  • Computers: MacBook Pro, iMac, MacBook Pro 2018, MacBook, Surface Book, Surface Studio
  • Tablets: iPad Pro, iPad Pro 2017, Surface Pro
  • Watches: Apple Watch Ultra, Apple Watch Series 8
  • Accessories: HomePod, Pro Display XDR
• Open-Source UI elements - made with CSS and HTML - Free UI elements made with HTML/CSS
  • 636 components including buttons/loaders/checkboxes/switches/inputs/cards
  • 5232 contributors
  • Completely free. Usable for both personal and commercial purposes

Tip

• The CSS background-image property as an anti-pattern (bad for SEO)
• 100 Bytes of CSS to look great everywhere - 100 bytes of CSS code that make text easier to read
• Two lines of CSS that boosts 7x rendering performance! - 2 lines of CSS that make rendering performance 7x faster

  *

/* Suitable when loading huge data lists/grids when the application runs */ {

content-visibility: auto;
contain-intrinsic-size: 1px 5000px;

}

</syntaxhighlight>

• 3 modern CSS properties your website must have | GeekNews
  • [Original] Three modern CSS properties your website must have - Bejamas
  • color-scheme - Even when a website supports dark mode, the scrollbar glares bright white
  • text-wrap: balance - Lets you make website headings balanced
  • scroll-margin - When using anchor links on a web page, the target element gets hidden behind a fixed header
• Tips for better CSS transitions & animations | GeekNews
  • [Original] Ten tips for better CSS transitions and animations - Josh Collinsworth blog
• My favorite animation trick: exponential smoothing (2023) | GeekNews
  • [Original] My favourite animation trick: exponential smoothing | lisyarus blog

References