Halloween CSS tricks

Here is a treat for you:

Happy
Halloween

 

Here’s how it is done.

First, create a div of equal width and height.

<div
style="width: 200px; height: 200px;" >
</div>

Then add rounded corners of half the width:

<div
style="width: 200px; height: 200px;
-moz-border-radius: 100px; 
-webkit-border-radius: 100px; 
border-radius: 100px; " >
</div>

Now you have a round div. The property -moz-border-radius is for Firefox, -webkit-border-radius is for Chrome and Safari, and border-radius is the actual CSS3 property. IE does not support this property, so if you have been wondering what the treat was, look at this post in Firefox, Chrome, or Safari.

Next, supply a solid black border of 1px.

<div
style="width: 200px; height: 200px;
-moz-border-radius: 100px; 
-webkit-border-radius: 100px; 
border-radius: 100px; 
border: 1px solid black;" >
</div>

You now have a round div with a border. How about the color? That’s a radial gradient.

<div style="width: 200px; height: 200px; 
-moz-border-radius: 100px; 
-webkit-border-radius: 100px; 
border-radius: 100px; 
border: 1px solid black;
background-image: -ms-radial-gradient(center, circle contain, 
#FECCB1 0%, #EA5507 100%); 
background-image: -moz-radial-gradient(center, circle contain, 
#FECCB1 0%, #EA5507 100%); 
background-image: -o-radial-gradient(center, circle contain, 
#FECCB1 0%, #EA5507 100%); 
background-image: -webkit-gradient(radial, center center, 
0, center center, 143, color-stop(0, #FECCB1), 
color-stop(1, #EA5507)); 
background-image: -webkit-radial-gradient(center, circle contain, 
#FECCB1 0%, #EA5507 100%); 
background-image: radial-gradient(center, 
circle contain, #FECCB1 0%, #EA5507 100%);">

All those different radial-gradient variations support different browsers. Won’t it be nice when everyone supports CSS3?

As for the text, that is done with the google font ‘Mountains of Christmas’. I added the line:

@import 
url(http://fonts.googleapis.com/css?family=Mountains+of+Christmas);

to my child theme’s style sheet, so I can now use the font. The text is in it’s own div, like so:

<div style="font-family: 'Mountains of Christmas', cursive; 
font-size: 3em; text-align: center; padding-top: 20px;">
Happy <br />
Halloween</div>

And this div is nestled inside the previous div.

Here is an image for those of you who might be stuck using a non-compliant browser.

image of css example for non-compliant browsers

And one further note. If you want to use this trick within a wordpress blog post, DO NOT use the Visual editor. It will lose half the css. Stick with the HTML editor—it is much better.