10 Useful CSS Tips To Make Your Next Project Easier

Posted by TotalDC

These are 10 CSS tips that can help you in projects.

Prevent <textarea> From Resizing

You can use the resize property to prevent a element from being resized.

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}

Drop Shadow

You can use the drop-shadow() filter effect on transparent images. It will give a much better shadow effect than using the box-shadow property.

img {
  filter: drop-shadow(0 0 3px #000);
}

Center Any <div> Element

It can sometimes be difficult to center a <div> element on the page, but not with this tip. You can center any <div> element on the page using a few lines of CSS code.

body {
  display: grid;
  place-items: center;
}

Prevent Highlighting

This one is similar to #2, but you can use the user-select property to prevent an element from being highlighted by the user.

.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

Input Range Pseudo Classes

The lesser-known :in-range and :out-of-range pseudo-classes can help you validate an <input> element whose current value is within the range specified by its min and max attributes.

input:in-range {
  background: rgba(0, 255, 0, .25);
}

input:out-of-range {
  background: rgba(255, 0, 0, .25);
}

Image Overlay

You can create an image overlay using the object-fit property. This can prove to be useful when you want to create a hero image on your website.

.image-overlay img:only-of-type:nth-child(1) {
  object-fit: cover;
  opacity: .6;
}

The transition Property

The transition property allows you to define the transition between two states of an element. It is mostly used for hover animations.

a {
  color: #0d6efd;
  text-decoration: none;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}

a:hover {
  color: #0a58ca;
}

Smooth Scrolling

When you visit some websites and try to go to different sections, it scrolls smoothly to that section. You can achieve this feature on your website by using one line of CSS.

html {
  scroll-behavior: smooth;
}

Drop Cap

You can add a drop cap to a paragraph by using the ::first-letter pseudo-element.

::first-letter {
  font-size: 250%;
}

Input Caret Color

You can use the caret-color property to change the color of the input field caret.

input {
  caret-color: red;
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: