CSS Styling

Make a box with rounded corners:
	You can see that the box has a rounded corner, which we can do by using the CSS code below. In this case, "box" is the class name for the div. .box { height: 120px; width: 120px; background-color: #06d590; color: black; border-radius: 15px; }

Create a box with a shadow effect using only CSS:
	You can see that the box has a shadow effect, which we can do by using the CSS code below. In this case, "boxShadow" is the class name for the div. .boxShadow { height: 120px; width: 120px; background-color: #cf6a22; color: black; box-shadow: 10px 10px 18px 0px #808080; }
	Box shadows take five values and are applied to the outside portion of tags by default. first value for the X index, second value for the Y index, third value for the blur option, fourth value for the spread, and last value for the shadow's color
Create a box with a Linear Gradient using only CSS:
	You can see that the box has a linear background color, which we can do by using the CSS code below. In this case, "boxLinearGradient" is the class name for the div. .boxLinearGradient { height: 120px; width: 120px; background:linear-gradient(blue, #cf6a22,green);// Default it put color from top to bottom background:linear-gradient(to right,blue, #cf6a22,green);// This will start color from right background:linear-gradient(to left,blue, #cf6a22,green);// This will start color from left background:linear-gradient(45deg,blue, #cf6a22,green);// This will rotate the color with 45deg color: black; }
	Multiple colors are added to the background using a linear gradient. By default, the order is top to bottom. We are also able to adjust the order to "left," "right," and "60 degrees."

Using text shadow in CSS, create a text shadow:
Text shadow effect	You can see that the text shadow effect , which we can do by using the CSS code below. In this case, "Shadoweffect"is the class name for the div. .Shadoweffect color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

Using loader in CSS, create a loader:
	You can see the loader , which we can do by using the CSS code below. In this case, "loader"is the class name for the div. .loader { width: 50px; height: 50px; border-radius: 50%; border: 10px solid white; border-top: 10px solid blue; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Using filter: drop-shadow in CSS, create a image shadow:
	You can see that the image shadow , which we can do by using the CSS code below. In this case, "image"is the class name. .image{ width: 100px; filter: drop-shadow(10px 10px 2px #1a1a1a)!important; } .image>img{ width: 100%; border: none; background:none; }

Using this code to ensure that the image size will always fit within the div even if the div size changes.
	You can see the image that we were able to create with the CSS code below."Photo" is the class name in this instance. .photo{ height: 100px; width: 150px; display: flex; justify-content: center; align-items: center; } .photo>img{ width: 100%; height: 100%; background: none; border: none; }