CSS

Including Normalize.css

npm i normalize.css

If a build tool is used (Webpack, Parcel, etc.) normalize can simply be imported into an CSS or JS file

import "normalize.css"

For simple html/css projects without builder copy the normalize.css from the node_modules into the css folder

Alternative without npm but with CDN link to include in the HTML file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

Importing local fonts

@font-face {
   font-family: Albert;
   src: url("Fonts/FSAlbert-Regular.ttf");
}

body {
   padding: 20px 20px;
   font-family: Albert;
}

Responsive gallery with grid

.container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* alternative: auto-fill */
}

/* For flexible min width */
.grid {
   display: grid;
   grid-template-columns: #{"repeat(auto-fit, minmax(min(300px, 100%), 1fr))"};
}

Vertical align on position absolute (height is required)

{
   top: 0;
   bottom: 0;
   margin: auto;
}

Underline animation

transform-origin defines if the animation starts from left, right or (if not defined) from the center

a {
   position: relative;
   color: #000;
   text-decoration: none;
}

a:hover {
   color: #000;
}

a::before {
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: #000;
   transform: scaleX(0);
   transform-origin: top left;
   transition: transform 0.3s ease;
}

a:hover::before {
   transform: scaleX(1);
}

Opacity variation

To fix issues for chrome and other browsers add “transform: translateZ(0);” to the parent element

blend-mode: multiply;

Responsive square (place content with position:absolute)

.square {
   width: 50%;
}

.square:after {
   content: "";
   display: block;
   padding-bottom: 100%;
}

Square image (responsive)

.container {
   position: relative;
   width: 37%; /* The size you want */
}

.container:after {
   content: "";
   display: block;
   padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.container img {
   position: absolute; /* Take your picture out of the flow */
   top: 0;
   bottom: 0;
   left: 0;
   right: 0; /* Make the picture taking the size of its parent */
   width: 100%; /* This is for the object-fit */
   height: 100%; /* This is for the object-fit */
   object-fit: cover; /* Equivalent to background-size: cover; of a background-image */
   object-position: center;
}

Gradient background for text

.textcolor {
   background-image: linear-gradient(90deg, blue, yellow, red, purple);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

Flip image

transform: scale(-1);

Smooth scrolling

html {
   scroll-behaviour: smooth;
}

Resize Element

div {
   overflow: auto;
   resize: both;
}

Truncate text (show only specific number of lines)

p {
   display: -webkit-box;
   -webkit-inline-clamp: 3; /* Number of lines to be shown */
   -webkit-box-orient: vertical;
   overflow: hidden; /* Remove to make all text visible */
}

Disable selecting elements

pointer-events: none;

Dynamic text effects depending on parents background

.container {
   background-color: blue;
   color: white;
}

.child {
   mix-blend-mode: difference;
}

Light/Dark Mode

Adapts to browser settings for light/dark mode

.container{
color-scheme: light dark;
background-color: light-dark(#000, #fff) // first for light, second for dark mode
}

// Switch modes from an input
:root {
  color-scheme: dark;
  :has(input:checked) {
    color-scheme: light;
  }
}