wlippold/css-drop-shadow.markdown

## css-drop-shadow.markdown

      
    Raw
  

              css-drop-shadow.markdown
            
          
    CSS Drop Shadow

A Pen by Wayne Lippold on CodePen.
License.

  
## index.html
<html>

<head>
  <title>How to create a drop shadow in Cascading Style Sheets?</title>
  <link rel="stylesheet" href="/css/style.css">
  <!-- Go to http://www.google.com/fonts (change font)-->
  <style>
@import url('https://fonts.googleapis.com/css?family=Henny+Penny|Lora');
</style>
</head>

<body style="font-family:Henny Penny, cursive; background-color:black;">

  <div style="text-align:center">
    <h1 style="font-size:150px; color:black;">Wayne Lippold</h1>


  </div>
</body>

</html>

## style.css
h1 {
  -webkit-transition: all 0, 2s ease;
  -moz-transition: all 0, 2s ease;
  -o-transition: all 0, 2s ease;
  -ms-transition: all 0, 2s ease;
  transition: all 0, 2s ease;
  -webkit-filter: drop-shadow(3px 3px 10px white);
}
	<html>

	<head>
	<title>How to create a drop shadow in Cascading Style Sheets?</title>
	<link rel="stylesheet" href="/css/style.css">
	<!-- Go to http://www.google.com/fonts (change font)-->
	<style>
	@import url('https://fonts.googleapis.com/css?family=Henny+Penny\|Lora');
	</style>
	</head>

	<body style="font-family:Henny Penny, cursive; background-color:black;">

	<div style="text-align:center">
	<h1 style="font-size:150px; color:black;">Wayne Lippold</h1>


	</div>
	</body>

	</html>
	h1 {
	-webkit-transition: all 0, 2s ease;
	-moz-transition: all 0, 2s ease;
	-o-transition: all 0, 2s ease;
	-ms-transition: all 0, 2s ease;
	transition: all 0, 2s ease;
	-webkit-filter: drop-shadow(3px 3px 10px white);
	}