CSS Tips

By Marko Denic

CSS tips and tricks you won’t see in most of the tutorials.

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is the main technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file and reduce complexity and repetition in the structural content.

When you work with transparent images you can use `drop-shadow()` filter function to create a shadow on the image’s content, instead of `box-shadow` property which creates a rectangular shadow behind an element’s entire box: filter:

drop-shadow(2px 4px 8px #585858);

See the Pen drop-shadow by Marko (@denic) on CodePen.

Easily center anything, horizontally and vertically, with 3 lines of CSS:

.center { display: flex; align-items: center; justify-content: center; }  

Did you know that you can use your own image, or even emoji as a cursor?

See the Pen Cursors by Marko (@denic) on CodePen.

Did you know that you can truncate text with plain CSS?

See the Pen Ellipsis by Marko (@denic) on CodePen.

The `::selection` CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

See the Pen ::selection pseudo-element by Marko (@denic) on CodePen.

Did you know that you can make any element resizable, just like `<textarea>`?

.resize { resize: both; }  

The `calc()` CSS function lets you perform calculations when specifying CSS property values:

.calculated-width: { width: calc(100% - 30px); }  

See the Pen Custom Scrollbar by Marko (@denic) on CodePen.

You can use the CSS Scroll Snap feature to create well-controlled scroll experiences:

See the Pen CSS Scroll Snap by Marko (@denic) on CodePen.

You can change the color of the text input cursor.

Caret Color example codepen preview.