15 Useful CSS Tips and Tricks Every Developer Should Know

In this post I share the 15 css tips and tricks

1. Docs Layout

Create a responsive documentation-styled layout with only two lines of CSS.

.parent{
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

2. Smooth Scrolling

For implementing smooth scrolling for a page add scroll-behavior: smooth to the html element.

 html {
  scroll-behavior: smooth;
}

3. The Custom Cursors

You can customize your cursor from an arrow pointer to a custom image.

html{
  cursor:url('no.png'), auto;
}

4. Fill Text With Images

You can fill your text content with a beautiful image with a few lines of CSS.

h1{
  background-image: url('images/flower.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}

5. Adding Stroke to Text

Make text more legible and visible using text-stroke property it adds a stroke or outline to text.

h1 {
  -webkit-text-stroke: 5px crimson;
  text-stroke: 5px crimson;
}

6. Paused Pseudo Class

Use :paused selector to style media elements when in paused state likewise :paused we also have :playing.

/* 📢 currently, only supported in Safari */

video:paused {
  opacity: 0.6;
}

7. Style Drop Caps

Avoid unnecessary spans and use pseudo elements instead to style your content likewise first-letter pseudo-element we also have first-line pseudo-element.

 h1::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}

8. Attribute Selector

Select HTML elements based on attributes using the attribute selector.

<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>

/* 🔗 targets all a elements that have a href attribute */

a[href] {
  color: crimson;
}

9. Clipping Elements

Use the clip-path property, to create interesting visual effects, such as clipping an element to a custom shape like a triangle or hexagon.

div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

10. The Clamp Function

Use the clamp()function for responsive and fluid typography.

/* Syntax: clamp(minimum, preferred, maximum) */
h1{
  font-size: clamp(2.25rem,6vw,4rem);
}

11. Word Spacing Property

Use word-spacing property to specify length of white space between words.

p {
  word-spacing: 1.245rem;
}

12. Create Gradient Shadows

This is how you can create gradient shadows for an exclusive user experience.

:root{
  --gradient: linear-gradient(to bottom right, crimson, coral);
}

div {
  height: 200px;
  width: 200px;
  background-image: var(--gradient);
  border-radius: 1rem;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient);
  border-radius: inherit;
  filter: blur(25px) brightness(1.5);
  transform: translateY(15%) scale(0.95);
  z-index: -1;
}

13. Creating Text Columns

Craft nice column layouts for text elements using column properties.

/* 🏛️ divide the content of the "p" element into 3 columns  */

p{
  column-count: 3;
  column-gap: 4.45rem;          
  column-rule: 2px dotted crimson;
}

14. The gradient text

h1{
  background-image: linear-gradient(to right, #C6FFDD, #FBD786, #f7797d);
  background-clip: text;
  color: transparent;
}

15. The comma separated list

This is the code required to craft a comma separated list.

li:not(:last-child)::after{
  content: ',';
}

Follow our blog for usefull content related like web development, coding and free udemy course 

If you like this content: Buy me a coffee