Rarely Used CSS Properties

The Column-Rule Property

CSS columns is a layout method which can divide an element into columns. A common usecase is to divide a paragraph text into two or more columns. The interesting bit is that we can add borders between the columns. The column-rule property name might not reflect it’s purpose, but you can imagine it as a border right!

Code

Background Repeat Round

This property repeats the background in both directions but it never crops the image unless a single image is too large to fit. If multiple tiles can fit, it squishes or stretches appropriately.


Styling List Markers

It’s a perfectly reasonable to want to style the marker of list items. You know: blue bullets with black text in an unordered list. Or red counters with knockout white numbers in an ordered list.


Display: inline-flex

Useful for displaying inline elements with flex functionality.

CSS
HTML

Object Fit

Object fit is used to specify how an img or video should be resized to fit it’s container.


Margin: Auto with Flexbox

Combined with flexbox, margin: auto can easily center a flex item horizontally and vertically

HTML
CSS

View source code for all above examples here: Link

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: