CSS Shadow Effects

Overview

Includes 6 different shadow types written in CSS with an example in HTML. These are a great way to add that extra professionalism to your website. 

To use, link to the css sheet, then add the class name to anything on your web page that you’d like to have a shadow. Some basic knowledge of HTML/CSS may be required to use. 

Features

  • 6 CSS shadow types
  • Example HTML
  • How-to instructions

Requirements

  • Browser
  • Basic Script Editor
  • Basic HTML/CSS Knowledge

Instructions

1. To see a preview of all the shadows, double click the .html document. This should open it in a browser. 

2. To use the css shadow styles in your own website, move shadows.css into your website’s directory. Open your website in a script editing tool. Then, link to the file. Within … copy and paste Look at the shadows.html for an example of this. 

3. Place class=“minimal-shadow” or any of the other shadow classes within an element on your html document. 

The classes included are:

class=”minimal-shadow”

class=”small-shadow”

class=”medium-shadow”

class=”large-shadow”

class=”blurry-shadow”

class=”sharp-shadow”

Look at the shadows.html for an example of this. 

4. Check it out, you did it! Those shadows are looking great. 

Related