These Simple CSS Tricks Will Take Your Website to the Next Level

#css #beginners #webdev #programming

What is CSS?

CSS, or Cascading Style Sheets is a front-end language used to make your website look good. Without CSS, your website would just be a skeleton with no character. CSS enables you to control the layout, colors, fonts, and other visual aspects of a web page.

In this blog, I'm going to share with you some very small and subtle css details that you probably wouldn't think of to add to you website, but once you do, you'll never turn back.

The Cursor

Although it may seem like a miniscule detail, changing the cursor when you hover over certain objects is a game changer! Typically websites are mostly text, so whenever you hover over something, the cursor will be the text cursor.

Default You can use the default cursor for when you're hovering over text, but dont want the text cursor.
Crosshair You can use the crosshair cursor for when you want the user to be able to edit something.
Text You can use the text cursor for when you want the user to be able to select text.
Pointer You can use the pointer cursor for when you want to indicate that the user can click what they are hovering over (button, link, etc.).
Grab You can use the grab cursor for when you want to indicate that the user can grab and move what they are hovering over.
Grabbing You can use the grabbing cursor for when you want to indicate that the user is grabing and/ or moving what they are hovering over.
Move You can use the move cursor for when you want to indicate that the user can move what they are hovering over.
Zoom-In You can use the zoom-in cursor for when you want to indicate that the user can zoom-in on what they are hovering over.
Zoom-Out You can use the zoom-out cursor for when you want to indicate that the user can zoom-out on what they are hovering over.
Not-Allowed You can use the not-allowed cursor for when you want to indicate that the user cannot grab, move or select what they are hovering over.
Help You can use the help cursor for when you want to indicate to the user that there is a helpful link or pop-up if they click what they are hovering over.
Wait You can use the wait cursor for when you want to indicate thot the user that whatever they are hovering over or have clicked on is loading.

Opacity

If you have images or links in your website, opacity can be a great thing to play with as it can give a great effect when the user hovers over the element. You can go one of two ways, have the element default with a lesser opacity (0.5) and change the opacity to full or 1 on hover, or the opposite. When the element is initially dull and you set the hover opacity to 1, the element will come alive when the user hovers over it. On the contrary, if you want your site to pop a bit more, leave the element's opacity alone for the default and set it to 0.5 on hover to indicate that the user is indeed hovering over it.

Here's an example of full opacity to 0.5:



img{
  height: 200px;
  width: 200px;
}
img:hover{
  opacity: 0.5;
  cursor: pointer;
}

And the opposite:



img{
  height: 200px;
  width: 200px;
  opacity: 0.5;
}
img:hover{
  opacity: 1;
  cursor: pointer;
}

Button Click

Another cool thing you can do is simulate a button click! To do this you can translate the button either up and down, left and right, or both!

Here's an example of up and down:



button{
  height: 50px;
  width: 125px;
}
button:hover{
  cursor: pointer;
}
button:active{
  transform: translateY(4px);
}

(Negative numbers makes it go down! If you wanted it to go up, make it a positive.)

Here's an example of left and right:



button{
  height: 50px;
  width: 125px;
}
button:hover{
  cursor: pointer;
}
button:active{
  transform: translateX(-4px);
}

(Negative numbers makes it go left! If you wanted it to go right, make it a positive.)

And here's and example of both:



button{
  height: 50px;
  width: 125px;
}
button:hover{
  cursor: pointer;
}
button:active{
  transform: translate(-4px, 4px);
}

Borders

You can also spice up any element with a border! You can mess with the color, corners, and style.

Color You can make the border and color you want. You can even make each side a different color using border-left, -right, -top, and -bottom.

Here's an example:



button{
  border-left: 5px solid red;
  border-top: 5px solid  orange;
  border-right: 5px solid  pink;
  border-bottom: 5px solid purple;
}

Corners Same with color, you can also make the border radius of each corner different! The value order goes: top-left, top-right, bottom-right, bottom-left.



button{
  border-radius: 15px 50px 30px 5px;
}

Style There are a few styles you can choose for your border, and just like the two properties above, each side can have a different style using border-left, -right, -top, and -bottom.



button{

  border-left: 5px solid red;

  border-top: 5px dotted  orange;

  border-right: 5px dashed  pink;

  border-bottom: 5px double purple;

}

Conclusion

Although there are quite literally thousands of cool things you can do with CSS, using these small tricks like cursors, opacity, button clicks, and borders can help take your website to the next level.