CSS Snippets

Quick find useful CSS snippets.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Remember to wrap all CSS snippets in <style></style> tags. This should always be in the Head Code.

Other libraries

Corey Moen

Nikolai Bain

Timothy Ricks

@media Rule

Media queries for tablet, mobile landscape and mobile.

// Tablet
@media only screen and (max-width: 991px) {
  body {
    background-color: lightblue;
  }
}

// Mobile landscape
@media only screen and (max-width: 767px) {
  body {
    background-color: lightblue;
  }
}

// Mobile
@media only screen and (max-width: 478px) {
  body {
    background-color: lightblue;
  }
}
Copied!

Clamp()

Add a max and minimum size to your responsive font

font-size: clamp(1rem, calc(1rem + 10vw), 3rem);

‍

Copied!

Custom select dropdown arrow

Hide the default select arrow to add your own custom one

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
Copied!

Hide Scrollbar

Hide scrollbars on all browsers.

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
Copied!

Style ordered list

Style the number in your ordered list

 ol {
   list-style: none;
   counter-reset: item;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li:before {
   margin-right: 10px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }
Copied!

Truncate text

Force ellipses after defined number of lines of text

/* Must be a paragraph text, change the 3 to desired number of lines */
.example {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Copied!

Want to submit a resource?

Contact us