CSS

Tips, Examples and Resources

Recently discovered…

env()

Can I use env()

Example, accounting for the safari toolbar in iOS versions 14 and 15, this css may be useful.

  #modal {
    /* overflow: scroll; */
    width: 100vw;
    position: fixed;
    height: calc(100vh - env(safe-area-inset-bottom));
  }

Reference

Absolute Position Recipes

Aspect Ratio

Hover Border Enlargement

This example shows how to modify an elements border without changing the size of the element in the DOM. This can be accomplished by using the box-shadow css property to create the added border width on hover. Unlike a border, the box-shadow does not take size in the DOM, and therefore will not affect the positioning.

Sass

A collection of Sass tips & resources.

Flexbox

Flexbox tips, tricks and properties overview.

VW Units

Responsive Sidebar

This code sample shows how to create responsive sidebars that can be toggled open or closed in wider desktop layouts. In a mobile layout, they become columns below the article content.

Element Count

This code sample shows a CSS only solution to define different styles for an element based on the total number of elements. This is handy when you have dynamic list content and want to style it differently for a certain number of list items.

Animation

This code sample shows how to animate a background image using CSS.

Responsive Hotspots

This code sample shows how to create hotspots for a responsive image entirely in CSS and HTML. When the image scales according to changes in viewport width, the hotspots and their respective tool tips will move accordingly.