CSS3 Box Shadow Generator for Great Looking Box Shadows

Udemy Editor

Cascading Style Sheets allow web developers to create engaging, great looking websites that are interactive and functional for their users. CSS3 has a number of new elements that include more powerful options as far as creating styles and graphics for your websites are concerned. Style elements, boxes, box shadows and animation allow web developers to create sites that rival the top glossy magazines but which are simple to use and quick to load. If you want to learn to harness the new powerful features offered by CSS3, the HTML5 & CSS3 Site Design course has all the tips and tricks you need. This course will teach you how to design and set up a website using step by step tutorials that include various industry secrets and must-tries. The course will show you how to format your pages, how to make your sites more attractive and how to test your websites before they go live.

Box shadows are a great way to add depth to your web page columns and elements. Creating box shadows in CSS is really easy, and there are a number of online CSS3 box shadow generators available that will even provide you with the necessary CSS3 codes to use in your HTML. Here are some of the CSS3 box shadow generators we found to help you create the box shadow effects you want for your web pages:

1. The Weebly CSS Box Shadow Generator

2. The CSSmatic Box Shadow Generator

The Weebly CSS Box Shadow Generator

Our first choice for an online box shadow generator is the box shadow generator available from Weebly. This generator is really simple to use and allows you to choose the colors of the box and the shadow. It also allows you to adjust the angle depth and spread of the shadow using really simple sliders, and you can see the effects of your changes on the preview screen as you make the changes.

This is what the generator looks like:

Preview and once you are happy with the results, all you need to do is to copy and use the CSS3 code in your HTML:

For instructions on how to use the code in your HTML, enroll in the HTML5 Beginners Crash Course and learn how to implement CSS in your HTML pages. This course contains over forty six lectures that introduces HTML to beginners. It teaches you how to access the HTML canvas for drawing. It includes lectures on how to use geolocation and local storage. It will also show you how to create advanced forms and how to embed audio and video into your web pages.

The CSSmatic Box Shadow Generator

The next box shadow generator we’ve chosen is the CSSmatic box shadow generator. This box shadow generator is also extremely simple to use and provides you with the code for your box shadow requirements. The generator also relies on sliders to set the properties of the shadow you want to generate and the preview window updates as you adjust the properties of your shadow. The generator has an inset option to create shadows within your elements instead of creating a shadow behind your element.

This is what the CSSmatic box shadow generator looks like:

You can adjust the shadow properties to suit your requirements using the length sliders and blur radius. You can set the shadow color and box color and you can immediately see the results.

Once again, when you are happy with your box shadow, then you need to select and copy the code to use the code in your own HTML. If you would like to learn how to set up the HTML, check out the HTML Tutorial: HTML & CSS for Beginners course from Udemy. This course will teach you all about HTML document structure, what text markup is and how to implement basic HTML markup. The course includes information on CSS typography and how to use HTML lists. It will show you how to create internal, external and anchor link. The course will teach you about displaying and styling and how to use the CSS box model and layout to create stunning interactive web pages that keep your users coming back for more.

Animate Your Shadows

Once you have the CSS code for your shadows, why not take your shadows to the next level by animating your shadows.

The box-shadow property can be animated using CSS3. To animate the shadow, you need to create an element using the @keyframes selector.

Take a look at the following code:

<!DOCTYPE html>

<html>

<head>

<style>

#myAnimatedBox

{

width:200px;

height:100px;

background-color:blue;

color:white;

animation:myAnimation 5s infinite;

/*Safari and Chrome:*/

-webkit-animation:mymove 5s infinite;

}

@keyframes myAnimation

{

50% {box-shadow:10px 20px 30px blue;}

}

/*Safari and Chrome:*/

@-webkit-keyframes myAnimation

{

50% {box-shadow:10px 20px 30px blue;}

}

</style>

</head>

<body>

<p>Gradually change the box-shadow property:<p>

<h1>Animated Shadow</h1>

</div>

</br>

<p>The box-shadow property can be <em>animated</em> in CSS.</p>

</body>

</html>

The code above creates a box and a shadow and then creates an animation for the shadows. The shadow disappears and reappears over a five second period. The animation relies on the following code:

animation:myAnimation 5s infinite;

“Animation” tells CSS we want to animate something on the page. We then define the element we want to animate – in this case we called our animation “myAnimation”. We then specify the time it should take to complete the animation. In our case we have chosen five seconds. And finally we tell the page to repeat the animation indefinitely by specifying infinite.

Harness the Power of CSS3 In Your Websites Today

HTML5 and CSS3 have really taken website design to the next level. The canvas elements of HTML and the animations effects included in CSS3 make interactive websites easy to create.

If you would like to learn how to really take advantage of HTML5 and CSS3 in your web designs, then sign up for the Become a Web Developer from Scratch! (Complete Course) today. This course contains over two hundred and sixty seven lectures that will teach you all the skills and techniques you need to become a web developer. The course includes HTML, XHTML, CSS, JavaScript, PHP, MySQL, XML, jSON. jQuery and much much more.