DEV Community

Cover image for Some useful CSS Properties you Never used πŸ˜€
Blogger and Programmer
Blogger and Programmer

Posted on

Some useful CSS Properties you Never used πŸ˜€

CSS is not a complicated language, as long as you understand the basics, everything is alright πŸ‘.

Property Number 1: Box Shadow πŸ‘ˆ

Who doesn't want a 3D website! Or a 3D button when hovered over? Well let me tell you this, you are one line of code away! 😁
Box-Shadow

Well, here is the secret!

box-shadow: 1px 1px 1px 1px;
Enter fullscreen mode Exit fullscreen mode

Now you get a box shadow with a πŸ‘‡

  • Height of 1px
  • Width of 1px
  • Blur of 1px
  • Spread of 1px

Here is a syntax cheat sheet for you! πŸ‘‡

box-shadow: h-offset v-offset blur spread color
Enter fullscreen mode Exit fullscreen mode

H-offset is basically the height, and the v-offset is the width. For the blur, the higher the number, the more blur, and the spread is the distance the shadow goes before starting the blur.

Discussion (0)