CSS.md

Awesome CSS Tips

Contents

• Cursors
• Smooth Scrolling
• Truncate Text
• Truncate Text To The Specific Number Of Lines
• Calc Function
• CSS-only modals
• Center anything
• Sticky sections
• :empty selector

Cursors

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

div {
    cursor: url('path-to-image.png'), url('path-to-fallback-image.png'), auto;
}

Link to Codepen

Smooth Scroll

Smooth scrolling without #javascript, with just one line of CSS.

html {
    scroll-behavior: smooth;
}

Link to Codepen

Truncate Text

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

.overflow-truncate {
    text-overflow: ellipsis;
}

Link to Codepen

Truncate Text To The Specific Number Of Lines

You can use -webkit-line-clamp property to truncate the text to the specific number of lines. An ellipsis will be shown at the point where the text is clamped.

.overflow-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

Link to Codepen

Calc Function

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

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

CSS-only modals

You can use the :target pseudo-class to create modals with zero JavaScript.

.modal {
    visibility: hidden;
}

/*
    Selects an element with an id matching the current URL's fragment
    Example: example.com#demo-modal
*/
.modal:target {
    visibility: visible;
}

Link to Codepen

Center anything

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

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

Sticky sections

You can create sticky section headers with 2 lines of CSS.

.sticky {
    position: sticky;
    top: 0;
}

Link to Codepen

:empty selector

You can use the :empty selector to style an element that has no children or text at all:

.box {
  background: #999;
}

.box:empty {
  background: #fff;
}

Link to Codepen