Manjit Baishya
My Coding Roadmap

My Coding Roadmap

Day 06: Opacity, Shadow and Border Radius in CSS

Day 06: Opacity, Shadow and Border Radius in CSS

Manjit Baishya's photo
Manjit Baishya
·Sep 29, 2022·

2 min read

So, in this blog, we will be talking about three sperate but specific topics in CSS. For explaining the three different topics, we will be using a simple blue box and a text within it:

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Opacity, Shadow and Border in CSS</h1>
      <hr>

      <div style="width:150px; height:45px; background-color:blue">
      </div>

      <div style="position:relative; bottom:32px; left:36px; color:white;">
        <strong>Read More</strong>
      </div>

    </header>
  </body>
</html>

Output>>>

image.png

Opacity

Opacity is well known to everyone. It adds a special effect to our designs when incorporated right. We will be demonstrating it by adding an opacity to the blue box.

Now, opacity ranges from 0.0 being completely transparent to 1.0 being completely opaque.

      <div style="opacity: 0.5;width:150px; height:45px; background-color:blue">
      </div>

image.png

Shadow

Shadow is basically the fake hovering effects which notches up designs to a new level. There are basically two types of shadow in CSS, one for text and another for objects and images.

Box Shadow

This shadow is used for boxes and objects. The syntax for a box-shadow is:

box-shadow: h-offset v-offset blur spread color;

h-offset give the horizontal shift, v-offset gives the vertical shift, blur gives the amount of blur, spread gives the spread of the shadow and color defines the color to be used. The color values can be in rbg, hex or predefined names.

<div style="box-shadow:3px 3px 7px 1px grey; width:150px; height:45px; background-color:blue">
</div>

Output>>>

image.png

Text Shadow

This type of shadow is used for texts only. It can be applied in the same way as the above.

<div style="text-shadow:2px 2px 2px black; position:relative; bottom:32px; left:36px; color:white;">
     <strong>Read More</strong>
</div>

Output>>>

image.png

Border Radius

Border radius can be applied to objects. We can see things are not squared anymore, even phone are getting curved around the edges. Here is an example of a rounded corner.

<div style="border-radius:22.5px; width:150px; height:45px; background-color:blue">
</div>

Output>>>

image.png

There are several other modifications that can be done. Please refer to W3Schools<\a> for further information.

That is all for the day! Thank You!

 
Share this