CSS tips and tricks

New year is coming and I want to wish all of you Happy Holidays. For this reason, I made a little CSS3 experiment (with absolutely no images) and I hope you’ll enjoy it.

Below you have the demonstration, you may take a look or you can follow the step-by-step tutorial:

View Demo

HTML code

The HTML is quite minimal, we have a div that wraps all the elements.

Further you’ll see that this experiment it’s based on pseudo-elements as-well. This is very helpful when you want less HTML code for your website/web application.

<div id="wrapper">
    <div id="snow"></div>
    <div id="tree"></div>
    <h1>Happy Holidays</h1>
</div>

The Background

As you notice if you’re using Firefox or Chrome, the background it’s a pattern made with gradients. The new stuff is background-size property (with its prefixes for various browsers) when defining CSS gradients.

In this case, the background-size adjust the size of the stripes.

Look Mom! No images!

html
{
    height: 100%;
    background-color: #869EA3;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0,
                        color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                        color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                        to(transparent));
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    -webkit-background-size: 400px 400px;
    -moz-background-size: 400px 400px;
    background-size: 400px 400px;
}

Wrapper

Further you need to add the wrapper within which you’ll draw all the other elements.

#wrapper
{
    position: absolute;
    height: 500px;
    width: 800px;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -400px;
    overflow: hidden;
    background: #0093d8;
    background: -moz-linear-gradient(top, #0093d8, #fff);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #0093d8));
    -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}

#wrapper:before
{
    content: '*';
    font: bold 1000px arial;
    color: #fff;
    color: rgba(255,255,255,0.1);
    position: absolute;
    top: -200px;
    left: -100px
}

The last rule it’s for adding a snowflake to our design without extra HTML markup.

Let’s add some snow

Below you can see how it’s made: by overlapping three huge (2000×2000 px) circles. If you’ll remove overflow: hidden from the #wrapper selector you’ll see the circles full-size.

#snow
{
    position: absolute;
    z-index: 5;
    top: 400px;
    left: 50%;
    margin-left: -1000px;
    width: 2000px;
    height: 2000px;
    background: #fff;
    -moz-border-radius: 2000px;
    border-radius: 2000px;
}

#snow:before
{
    content: '';
    position: absolute;
    left: 400px;
    height: 2000px;
    width: 2000px;
    background: #f2f2f2;
    -moz-border-radius: 2000px;
    border-radius: 2000px;
}

#snow:after
{
    content: '';
    position: absolute;
    right: 400px;
    height: 2000px;
    width: 2000px;
    background: #eaeaea;
    -moz-border-radius: 2000px;
    border-radius: 2000px;
}

Use custom font

There are multiple options to choose for when it’s about custom fonts for your website. For this example I choosed Sniglet font from Google Font API.

h1
{
    font: bold 120px/95px 'Sniglet', Arial;
    color: #fafafa;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 10px 0 #cfeaed, -5px -5px 10px #4ea5b1;
    position: absolute;
    bottom: 80px;
    left: 20px;
}

Fir tree made with CSS triangles

One more thing to add and the design it’s done. Let’s create the fir tree using CSS triangle shapes. This is not CSS3, but it’s cool anyway :).

#tree
{
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 60px solid green;
    height: 0;
    width: 0;
    position: absolute;
    right: 50px;
    top: 240px;
}

#tree:before
{
    content:'';
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 90px solid green;
    height: 0;
    width: 0;
    position: absolute;
    left: -90px;
    top: 30px;
}

#tree:after
{
    content:'';
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
    border-bottom: 120px solid green;
    height: 0;
    width: 0;
    position: absolute;
    left: -120px;
    top: 60px;
}

Final result

In order to see the demo in the right way, note please that you should use one of the following browsers: Firefox, Chrome, Safari. The demo looks OK on Opera and IE9, but without gradients.

View Demo

Happy Holidays

Enjoy your Holidays and let’s hope the next year will be a better one for all of us. See you next year!

If you enjoyed this article, you might also like:

• CSS3 pricing table
• CSS3 tabs with beveled corners
• Feature table design with CSS3
• CSS3 font-face or how to use a custom font for your website
• CSS filter effects in action