Home » Tutorials

CSS3 Christmas Tree with Snow

Tutorials
Author Reading 12 min Views 867 Published by Modified by

Today we will continue use CSS3 in drawing complex shapes. We will create very nice CSS3 Christmas Tree demonstration. We will be drawing the tree, six colored balls on it, three snow hills and snowfall.

Here are our final result:

CSS3 Christmas Tree

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/slideshow.css
  5. Conclusion
Live Demo
download result

Ok, download the example files and lets start coding !

Step 1. HTML

First, let us create the HTML markup. As you can see – the structure is quite minimal and contains only several DIV elements.

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>CSS3 Christmas Tree with Snow | Script Tutorials</title>
06         <link href="css/layout.css" rel="stylesheet" type="text/css" />
07     </head>
08     <body>
09         <header>
10             <h2>CSS3 Christmas Tree with Snow</h2>
11             <a href="https://www.script-tutorials.com/css3-christmas-tree-with-snow/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
12         </header>
13         <div class="container">
14             <div class="bottom_snow"></div>
15             <div class="tree"></div>
16             <div class="tree_bot"></div>
17             <div class="ball red"></div>
18             <div class="ball green"></div>
19             <div class="ball blue"></div>
20             <div class="ball red rsmall"></div>
21             <div class="ball green gsmall"></div>
22             <div class="ball blue bsmall"></div>
23             <h1>Happy Holidays</h1>
24             <div class="fall_snow"></div>
25         </div>
26     </body>
27 </html>

Step 2. CSS

Now, there are the CSS rules that will turn our boring DIVs into a magical set of Christmas card elements. I have already commented the CSS below, so you can see the major parts of this file.

css/slideshow.css

001 *{
002     margin:0;
003     padding:0;
004 }
005 body {
006     background-color:#eee;
007     color:#fff;
008     font:14px/1.3 Arial,sans-serif;
009 }
010 header {
011     background-color:#212121;
012     box-shadow: 0 -1px 2px #111111;
013     display:block;
014     height:70px;
015     position:relative;
016     width:100%;
017     z-index:100;
018 }
019 header h2{
020     font-size:22px;
021     font-weight:normal;
022     left:50%;
023     margin-left:-400px;
024     padding:22px 0;
025     position:absolute;
026     width:540px;
027 }
028 header a.stuts,a.stuts:visited{
029     border:none;
030     text-decoration:none;
031     color:#fcfcfc;
032     font-size:14px;
033     left:50%;
034     line-height:31px;
035     margin:23px 0 0 110px;
036     position:absolute;
037     top:0;
038 }
039 header .stuts span {
040     font-size:22px;
041     font-weight:bold;
042     margin-left:5px;
043 }
044 /* style the main area */
045 .container {
046     height: 500px;
047     margin: 50px auto;
048     overflow: hidden;
049     position: relative;
050     width: 800px;
051     background-color: #0093d8;
052     background: -moz-linear-gradient(top, #0093d8, #fff);
053     background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #0093d8));
054     -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
055     -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
056     box-shadow: 0 10px 10px rgba(0,0,0,0.5);
057 }
058 /* style the bottom snow */
059 .bottom_snow {
060     position: absolute;
061     z-index: 5;
062     top: 400px;
063     left: 50%;
064     margin-left: -500px;
065     width: 1000px;
066     height: 1000px;
067     background: #e2e2e2;
068     border-radius: 1000px;
069     -moz-border-radius: 1000px;
070     -webkit-border-radius: 1000px;
071 }
072 .bottom_snow:before , .bottom_snow:after {
073     background-color: #fff;
074     content: "";
075     height: 1000px;
076     position: absolute;
077     top: -25px;
078     width: 1000px;
079     border-radius: 1000px;
080     -moz-border-radius: 1000px;
081     -webkit-border-radius: 1000px;
082 }
083 .bottom_snow:before {
084     left: 400px;
085 }
086 .bottom_snow:after {
087     right: 400px;
088 }
089 /* style the label */
090 h1 {
091     color: #FAFAFA;
092     font: bold 80px 'Comic Sans MS',Arial;
093     text-align: center;
094     text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.85), 4px 4px 0 #CFEAED;
095     text-transform: uppercase;
096     -webkit-user-select: none;
097     -khtml-user-select: none;
098     -moz-user-select: none;
099     -o-user-select: none;
100     user-select: none;
101 }
102 /* style the tree */
103 .tree, .tree:before, .tree:after, .tree_bot, .tree_bot:before, .tree_bot:after {
104     height: 0;
105     position: absolute;
106     width: 0;
107     border-radius: 40px;
108     -moz-border-radius: 40px;
109     -webkit-border-radius: 40px;
110 }
111 .tree {
112     border-left: 20px solid transparent;
113     border-right: 20px solid transparent;
114     border-bottom: 20px solid green;
115     left: 390px;
116     top: 135px;
117 }
118 .tree:before {
119     content:'';
120     border-left: 40px solid transparent;
121     border-right: 40px solid transparent;
122     border-bottom: 40px solid green;
123     left: -40px;
124     top: 15px;
125 }
126 .tree:after {
127     content:'';
128     border-left: 60px solid transparent;
129     border-right: 60px solid transparent;
130     border-bottom: 60px solid green;
131     left: -60px;
132     top: 40px;
133 }
134 /* tree, bottom side */
135 .tree_bot {
136     border-left: 80px solid transparent;
137     border-right: 80px solid transparent;
138     border-bottom: 80px solid green;
139     left: 330px;
140     top: 210px;
141 }
142 .tree_bot:before {
143     content:'';
144     border-left: 100px solid transparent;
145     border-right: 100px solid transparent;
146     border-bottom: 100px solid green;
147     left: -100px;
148     top: 40px;
149 }
150 .tree_bot:after {
151     content:'';
152     border-left: 120px solid transparent;
153     border-right: 120px solid transparent;
154     border-bottom: 120px solid green;
155     left: -120px;
156     top: 80px;
157 }
158 /* style the balls */
159 .ball {
160     height: 40px;
161     left: 390px;
162     position: absolute;
163     top: 345px;
164     width: 40px;
165     border-radius: 40px;
166     -moz-border-radius: 40px;
167     -webkit-border-radius: 40px;
168     box-shadow: 0 0 5px #777;
169     -moz-box-shadow: 0 0 5px #777;
170     -webkit-box-shadow: 0 0 5px #777;
171 }
172 .red {
173     background-color: #c8171f;
174     background-image: -webkit-radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
175     background-image: -moz-radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
176     background-image: -o-radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
177     background-image: radial-gradient(50% 50%, circle, #f9d0be, #c8171f 70%);
178     left: 340px;
179     top: 325px;
180 }
181 .blue {
182     background-color: #00a1ee;
183     background-image: -webkit-radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
184     background-image: -moz-radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
185     background-image: -o-radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
186     background-image: radial-gradient(50% 50%, circle, #cde6f9, #00a1ee 70%);
187 }
188 .green {
189     background-color: #4d8d00;
190     background-image: -webkit-radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
191     background-image: -moz-radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
192     background-image: -o-radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
193     background-image: radial-gradient(50% 50%, circle, #d1e5b2, #4d8d00 70%);
194     left: 440px;
195     top: 325px;
196 }
197 .rsmall, .gsmall, .bsmall {
198     height: 25px;
199     width: 25px;
200 }
201 .rsmall {
202     left: 440px;
203     top: 255px;
204 }
205 .bsmall {
206     left: 350px;
207     top: 255px;
208 }
209 .gsmall {
210     left: 395px;
211     top: 275px;
212 }
213 /* style the falling snow */
214 .fall_snow {
215     background-image: url('../images/snow1.png'), url('../images/snow2.png'), url('../images/snow3.png');
216     height: 100%;
217     left: 0;
218     position: absolute;
219     top: 0;
220     width: 100%;
221      -webkit-animation: snow 10s linear infinite;
222      -moz-animation: snow 10s linear infinite;
223      -ms-animation: snow 10s linear infinite;
224      animation: snow 10s linear infinite;
225 }
226 @keyframes snow {
227     0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
228     50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
229     100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
230 }
231 @-moz-keyframes snow {
232     0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
233     50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
234     100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
235 }
236 @-webkit-keyframes snow {
237     0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
238     50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
239     100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
240 }
241 @-ms-keyframes snow {
242     0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
243     50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
244     100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
245 }
Live Demo
download result

Conclusion

Today we have made great Christmas tree with snow with using pseudo-elements like :before and :after. Just one little problem – IE browsers. Even if IE8 has support these pseudo-elements, it totally lacks CSS3 support, so our result will looks not so good. I wish you a Merry Christmas and Happy Holidays!

Rate article
© 2026 Script Tutorials