css.md

CSS

• Material Design Components
• Creating Non-Rectangular Headers
• CSS clip-path maker
• List Animations
• Staggered Animations with CSS Custom Properties
• CSS Tricks
• CSS Reference
• Can I use? - Check if browser supports some feature
• sanitize.css - CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults
• Even more CSS secrets
• Using @font-face
• Hot CSS tips
• Content CSS property - none, normal, string, image, counter, attr, open-quote
• :target pseudo selector
• transform-origin property
• object-fit property - style images
• Seamless Responsive Photo Grid
• flex properties
• Jonas' Resources for Building Beautiful Websites with HTML5, CSS3 and JavaScript
• modern-normalize
• Blueprint CSS - A lightweight layout library for building great responsive mobile first UIs that work everywhere
• Responsive Grid System
• Fancy CSS Button Hover Animations
• Fancy CSS Button Hover Animations
• Social Media Accordion With CSS3 Transitions
• Animista - Create CSS Animations
• Pattern.css - CSS Patterns
• 98.css - Windows 98 Style UI
• Guide to Responsive-Friendly CSS Columns
• What CSS to prefix?
• all property - resets all of the selected element’s properties
• Normalize CSS or CSS Reset?! - code to reset most important elements
• perspective property - gives an element a 3D-space by affecting the distance between the Z plane and the user
• backface-visibility property - rotate an element so what we think of as the front of an element no longer faces the screen
• Cascading image using position sticky
• :target pseudo selector - matches when the hash in the URL and the id of an element are the same
• 100% Pure HTML/CSS Page Navigation - :target
• How to Create Image Slider Using HTML and CSS
• CSS Card Tricks - Cool transition cards and CSS-Tricks like avatars
• CSS Frosted glass credit card
• :is() pseudo class
• display: flow-root - replacement for clearfix
• shape-outside - wrap text in circle, ellipse or other shape
• 1-Line Layouts
• My Custom CSS Reset

Gradients

• Fun ways to animate CSS gradients

Patterns

• css-doodle - Web component for drawing patterns with CSS

Tips & Tricks

CSS Variables

:root {
  --primary: #0f0;
  --secondary: #fff;
}
html {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--primary);
}

Apply a natural box layout model to all elements, but allowing components to change

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

modern-normalize already applies this.

Reset margin and padding

* {
  margin: 0;
  padding: 0;
}

text-rendering

p.legibility {
  text-rendering: optimizeLegibility;
}
p.speed {
  text-rendering: optimizeSpeed;
}
/* maybe not performant */
body {
  text-rendering: optimizeLegibility;
}

The 1140 grid fits perfectly into a 1280 monitor

.row {
  max-width: 1140px;
}

Align icons and text

.icon-small {
  display: inline-block;
  width: 30px;
  text-align: center;
  font-size: 120%;
  margin-right: 10px;
  /* trick */
  line-height: 120%;
  vertical-align: middle;
  margin-top: -5px;
}

Fixed background image (cool effect)

.section-with-bg-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(img/bg.jpg);
  background-size: cover;
  color: white;
  background-attachment: fixed;
}

White box with hollow text over a background image

h1.white {
  background: white;
  color: black;
  mix-blend-mode: screen;
}

Black box with hollow text over a background image

h1.black {
  background: black;
  color: white;
  mix-blend-mode: multiply;
}

Title with image as text color

h1.image {
  background-image: url(//unsplash.it/800);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Center text on page

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Render QR or thumbnails

img {
  image-rendering: pixelated;
}

Fluid font size

:root {
  font-size: calc(1vw + 1vh + 0.5vmin);
}

Clearfix

/* old way */
.clearfix {
  overflow: auto;
}
/* new way */
.clearfix::after {
  content: '';
  clear: both;
  display: table;
}
/* future way */
.clearfix {
  display: flow-root;
}

H1 with logo (SEO)

<h1 class="logo">My Company and what we do</h1>

.logo {
  position: relative;
  height: 50px;
  width: 50px;
  overflow: hidden;
}
.logo:after {
  content: url(logo.jpg);
  position: absolute;
  top: 0;
  left: 0;
}

Image tips

• img width and height in percentage units does not work if img is inside an inline element. Wrapping element has to be changed to inline-block
• if img does not fit well in the wrapping div (white stripe at the bottom), use vertical-align: bottom or modify the wrapping tag to be displayed as inline-block or block.

Responsive design without queries (using grid)

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  /* grid-gap: 1rem; */
}

Block element only properties

• width
• margin: auto

Screen readers only content

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

Shorter way to make responsive width

width: 70%;
max-width: 500px;

can be done shorter way:

width: min(500px, 70%);

Besides min(), there are also max() and clamp() functions.

Problem with no background color after inside elements set to float

This happens because a wrapping block element collapses when all inside block elements are float (to left or right). Solution for this is to set overflow: auto to the parent container.

Properly display image in any rectangle area (show image central area not disturbing aspect ratio)

object-fit: cover;

Push footer to the page bottom

On a short page, html actually may not occupy the whole viewport height so when using percentages, it is important to use them for html element as well. Using percentages in this case gives better compatibility with smaller devices compared to wh.

html {
  height: 100%;
}
body {
  min-height: 100%;
}
footer {
  margin-top: auto;
}

Common bootstrap

@import url(//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css);

:root {
  font-size: calc(1vw + 1vh + 0.5vmin);
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  /* max-width: 1140px; */
  display: flex;
  justify-content: center;
  align-items: center;
  text-rendering: optimizeLegibility;
}

Selective load of CSS (HTML media Attribute)

<link rel="stylesheet" type="text/css" href="print.css" media="print">
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width: 768)">

Smooth Scroll-to-top Button

html {
  scroll-behavior: smooth;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

<button
  onClick={() => {
    window.scrollTo(0, 0);

    // focus management
    const title = document.getElementById('article-title');
    title.focus();
  }}
>
  Scroll to top
</button>