CSS Tricks Worth Knowing

2 Minutes

charlie beemy profile picture
By
  • code
  • css
CSS pofo

Positioning

Position Absolute Center

Transitions

Slide Elements In and Out (Like an Accoridan)

Draw Underline

Note: this is a common pattern in CSS that enables you to insert a div :before or :after an element. Highly recommend taking advantage of it!

Expand Border Out (With box shadows)

Note: the regular transition with border is not clean (goes from out to in and is not smooth), so it is recommended to use box-shadow transitions instead. This trick makes use of drawing a border with a box shadow. 

Note: I utilize this website to visualize my box shadows.

Box Shadow Lift

Push Button Down

Typography

Clamp Text to x lines

Hyphenates word if it goes off the page - great for article-like content!

Custom Text Highlight Color

Text Shadow (make your text pop on top of a background color!)

Text Sizing using clamp (this can also be used for spacing)

Misc

Image No Drag

Made with