[CSS] Shadow Box

One simple code with which you can add a shadow below a field in CSS.

You can change everything in this Code as you see fit.

To get started, open Notepad (I recommend Notepad ++).

Ok, if so, let's start:

First:

 We add <style> </style> where we define the look in between, ie. we insert the CSS Code

<style>
.box {
    color: #fff; /* text color */
    text-align: center; /* text on the center */
    position:fixed; /* we put box fixed on scroll */
    width:50px;
    height:40px;
    bottom:50%; /* distance from bottom */
	left: 50%; /* distance from left */
	font-size: 20px; /* size of text */
	font-weight: Bold; /* text is bold */
    padding: 30px; /* text padding from all distances */
    background:rgba(0,0,0,0.8); /* background, numbers 1,2,3 are RGB colors, number 4. is opacity */
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow:    0px 0px 15px rgba(0, 0, 0, 0.75);
    box-shadow:         0px 0px 15px rgba(0, 0, 0, 0.75);
}
</style>

0px 0px 15px rgba(0, 0, 0, 0.75);

• The first number represents how much the shadow will be moved RIGHT (put minus so that the shadow goes LEFT)
• The second number represents how much the shadow will be moved DOWN (Put minus so that the shadow goes UP)
• The third number represents how blurry the shadow will be a number - a larger shadow.

Then:

Below all this we add a <div> tag;

<div class=“box“> test </div>

Now we have "invoked" that CSS Code and we can write some text or add a link. Everything you put between <div> and </div> will be in that field.

And finally, it would look like this:

<style>
.box {
    color: #fff;
    text-align: center;
    position:fixed;
    width:50px;
    height:40px;
    bottom:50%;
	left: 50%;
	font-size: 20px;
	font-weight: Bold;
    padding: 30px;
    background:rgba(0,0,0,0.8);
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
    -moz-box-shadow:    0px 0px 15px rgba(0, 0, 0, 0.75);
    box-shadow:         0px 0px 15px rgba(0, 0, 0, 0.75);
}
</style>
<div class="box"> test </div>