<!-- Life's Not Complete Without Art. (expand your editor ;)
|
\ ' /
-- (*) --
>*<
>0<@<
>>>@<<*
>@>*<0<<<
>*>>@<<<@<<
>@>>0<<<*<<@<
>*>>0<<@<<<@<<<
>@>>*<<@<>*<<0<*<
\*/ >0>>*<<@<>0><<*<@<<
___\\U//___ >*>>@><0<<*>>@><*<0<<
|\\ | | \\| >@>>0<*<0>>@<<0<<<*<@<<
| \\| | _(UU)_ >((*))_>0><*<0><@<<<0<*<
|\ \| || / //||.*.*.*.|>>@<<*<<@>><0<<<
|\\_|_|&&_// ||*.*.*.*|_\\db//_
""""|'.'.'.|~~|.*.*.*| ___|___
|'.'.'.| ^^^^^^|____|>>TMR>>|
~~~~~~~~ '""""`-------'
|X-Mas Tree & Presents|
!-->
<body>
<div id="bgContainer">
<canvas id="canvasBG" width="800" height="500"></canvas>
<div>
<div id="main_body">
<div class="page">
<div class="content">
<p>Happy Holidays!<br />
</p>
</div>
</div>
</div>
</body>
@import url(https://fonts.googleapis.com/css?family=Mountains+of+Christmas:700);
body {
margin: 0;
padding: 0;
font-family: 'Mountains of Christmas', cursive;
font-weight:bold;
font-size:4vw;
color: #fff;
width:100%;
}
canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#bgContainer {
position: absolute;
height: 100%;
width: 100%;
background-color: #999;
overflow: hidden;
}
#main_body {
position: absolute;
top: 0;
width: 100%;
overflow: auto;
max-height: 100%;
left:50%;
top:50%;
transform:translate(-50%, -50%);
overflow: hidden;
}
p {
line-height: 1.5em;
letter-spacing:2px;
text-align:center;
text-shadow: 0 3px 0 #ccc,
0 4px 0 #c9c9c9,
0 5px 0 #bbb,
0 6px 0 #b9b9b9,
0 7px 0 #aaa,
0 8px 4px rgba(0,0,0,.1),
0 0 8px rgba(0,0,0,.1),
0 4px 6px rgba(0,0,0,.3),
0 6px 8px rgba(0,0,0,.2),
0 8px 13px rgba(0,0,0,.25),
0 13px 13px rgba(0,0,0,.2),
0 22px 22px rgba(0,0,0,.15);
}
.page {
width:100%;
margin: 0 auto;
}
.content {
font-size:2.5em;
opacity:0.5;
filter:alpha(opacity=60);
border: none;
border-radius: 5px;
border-radius: 5px;
margin-bottom: 5px;
}//call AnimateBG();
$(document).ready(function() {
new AnimateBG("canvasBG", "http://sd.uploads.im/t/z7xY4.png").start();
});
//the canvas background animation script (animatebg.js) is included as a seperate file -->
//URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/animatebg.js
//the image used is for the static snowflakes. The js animates the canvas background
External CSS
This Pen doesn't use any external CSS resources.