Easy Way To Create Shadow Effect With CSS

By | June 12, 2022

Are you learning to create a website with CSS? on this occasion the author will make a tutorial on how to easily and simply create a shadow effect with css. Here the author will of course use web technologies such as html and css. Make sure you already know about basic css web technology so you can understand the css code that the author has made.

DEFINITION OF CSS

CSS stands for Cascading Style Sheets, this file is a web technology to beautify the website you create, even if you want to become a web designer or front end web developer , it is very mandatory to learn this technology. The author will give a case study, for example, if you want to create an online store website or a game website such as the grand theft auto v game, of course you must need an attractive appearance. So, if you use css you will have a beautiful website. When you use css, of course the website you create will have an attractive appearance, even if there are visitors to your website, visitors will be happy to see the appearance of your website. Okay, let’s start the tutorial!

HOW TO CREATE A SHADOW EFFECT WITH CSS

1. Open your text editor software  such as notepad++.

2. Create an html file with the name index.html  . You are free to save it anywhere in the folder you want. The code can be seen below:

<html><font></font>
<head><font></font>
<title>Cara Mudah Dan Sederhana Membuat Efek Bayangan Dengan Css</title>   <font></font>
  <link rel="stylesheet" href="style.css"><font></font>
</head><font></font>
<font></font>
<body><font></font>
    <h1>GALIH ANGGORO PRASETYA</h1><font></font>
</body><font></font>
</html>

EXPLANATION OF THE HTML CODE ABOVE

The author makes an html structure, where in the <body> </body>  tag there is a <h1>GALIH ANGGORO PRASETYA</h1> tag, so this is an example of creating a shadow effect with the author’s name to be displayed later in the html document. Ouh yes on line 4 there is a <link rel=”stylesheet” href=”style.css”> tag  where this is to call the css file.

3. To create the css file, you can first create it with the name style.css  for the code, see below:

body{<font></font>
    background-color: black;<font></font>
}<font></font>
<font></font>
h1{<font></font>
   color: white;<font></font>
   text-shadow: 10px 1px 10px white; <font></font>
   text-align: center;<font></font>
}

EXPLANATION OF THE CSS CODE ABOVE

4. The author makes a css code, namely the body  where on line 1 in the code there is a background-color: black; the purpose of the code is to turn the web page black. On line 5, namely h1 in the code there is color: white; to change the text to white, text-shadow: 10px 1px 1px white; to create a shadow effect, text-align: center; to center the text .

FORMULA FOR REMEMBERING TEXT-SHADOW

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

For the results, you can open the index.html file . The results can be seen below:

5. Done, you can see the results of the image above because there is a white shadow effect that overshadows the text  of the author’s name and is accompanied by a black background color .

That’s a tutorial on how to easily and simply create a shadow effect with CSS. How? easy and simple right? You can make your own too for your learning needs, hopefully it’s useful.

Disclaimer:- For Educational Purposes Only.

Leave a Reply

Your email address will not be published.