Dripping Blood Text for Halloween

Halloween is a time for telling urban legends about Bloody Mary, drinking fake blood, mistaking real blood for fake blood, and donning a Sexy Pile of Blood costume. There’s blood everywhere – except your web page. Now, you can finally enjoy the bloodcurdling thrill of Halloween on your website! Spook your homepage visitors by giving your site’s text a dripping blood effect. Just follow these 7 easy steps, and you’ll be giving your visitors the creeps in no time:

1. Open Adobe Dreamweaver. Create a new CSS file by clicking on File > New > CSS > OK. Save the CSS file and name it “style.” Now create a new HTML file by clicking on File > New > CSS > OK. Save this HTML file with the title “halloween.” Make sure that both of these files exist in the same folder on your computer so that they can easily communicate with each other.

1

2. Create a new class entitled “.blood” in style.css. This will add the dripping blood effect to your text. The effect looks best with a colorful font, so I opted for red. Make your font red by typing “color: red;” in the succeeding line.

2

3. The dripping blood effect looks best with a bold, sans-serif font like Arial Black. Make your font Arial Black by typing “font-family: arial black;” under the line that defines the font color.

3

4. Now it’s time to make the dripping blood effect! It’s actually an elongated shadow that fades from black to red, so type “text-shadow:” under the line that defines the font family. In the succeeding lines, type the following code:

4px 4px 1px #300000,
4px 6px 1px #400000,
4px 8px 1px #500000,
4px 10px 1px #600000,
4px 12px 1px #700000,
4px 14px 1px #800000,
4px 16px 1px #900000,
4px 18px 1px #A00000,
4px 20px 1px #B00000,
4px 22px 1px #C00000,
4px 24px 1px #D00000,
4px 26px 1px #E00000,
4px 28px 1px #F00000,
4px 30px 1px #FA0000,
4px 32px 1px #FB0000,
4px 34px 1px #FC0000,
4px 36px 1px #FD0000,
4px 38px 1px #FE0000,
4px 40px 2px #FF0000;
}

4

5. Now you need to attach your CSS style sheet to your HTML file. In halloween.html, go to Format > CSS Styles > Attach Style Sheet. Click Browse and find “style.css.” This line will appear within your HTML code: <link href=”style.css” rel=”stylesheet” type=”text/css”>

5

6. In between your <body> tags in halloween.html, type the following code on its own line: “<1 class=”blood”>Spooky Blood</h1>”. This will apply the .blood class to the words “Spooky Blood,” but you can change it to say whatever you please.

6

7. In halloween.html, preview your dripping font by clicking on the world icon in the top left corner and selecting your browser of choice. Enjoy your scary new text effect, and have a happy Halloween! 🙂

7

Here are the CSS and HTML codes that you can cut and paste into Dreamweaver:

CSS:

.blood {
color: red;
font-family: arial black;
text-shadow:
4px 4px 1px #300000,
4px 6px 1px #400000,
4px 8px 1px #500000,
4px 10px 1px #600000,
4px 12px 1px #700000,
4px 14px 1px #800000,
4px 16px 1px #900000,
4px 18px 1px #A00000,
4px 20px 1px #B00000,
4px 22px 1px #C00000,
4px 24px 1px #D00000,
4px 26px 1px #E00000,
4px 28px 1px #F00000,
4px 30px 1px #FA0000,
4px 32px 1px #FB0000,
4px 34px 1px #FC0000,
4px 36px 1px #FD0000,
4px 38px 1px #FE0000,
4px 40px 2px #FF0000;
}

HTML:

<html>
<head>
<meta charset=”UTF-8″>
<title>Untitled Document</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>

<body>
<h1 class=”blood”>Spooky Blood</h1>
</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s