A Pen by Michael Dobekidis on CodePen.
Created
December 23, 2013 10:12
-
-
Save netgfx/8094540 to your computer and use it in GitHub Desktop.
X-Mas 2013
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href='http://fonts.googleapis.com/css?family=Lobster|Francois+One' rel='stylesheet' type='text/css'> | |
| <div id="bg"></div> | |
| <div class="textContainer"> | |
| <h1 class='wish'>Merry Christmas</h1> | |
| <h2 class='logo'>7Linternational.com</h2> | |
| </div> | |
| <div class='decorations'> | |
| <div class='gift1 decorationItem'></div> | |
| <div class='tree decorationItem'></div> | |
| <div class='gift2 decorationItem'></div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| snowFall.snow($("#bg"), { | |
| minSize: 1, | |
| maxSize: 8, | |
| flakeIndex: 999999, | |
| round: true, | |
| minSpeed: 1, | |
| maxSpeed: 20, | |
| flakeCount: 200 | |
| }); | |
| $(".tree").append(tree); | |
| $(".gift1").append(gift1); | |
| $(".gift2").append(gift2); | |
| var h = $(".decorations").position().top+$(".decorations").height(); | |
| $(".textContainer").css("margin-top",h+80); | |
| $(window).resize(function(){ | |
| window.console.log("resize"); | |
| var h = $(".decorations").offset().top+$(".decorations").height(); | |
| $(".textContainer").css("margin-top",h+100); | |
| }); | |
| }); | |
| var tree = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="125px" height="130px" viewBox="0 0 125 130" enable-background="new 0 0 125 130" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="#00440E" d="M40,125.667h5V117h5v8.667h10v-4.334h5v4.334h5V117h5v8.667h5v-13h5V130H35v-17.333h5V125.667z M73.799,20.583l-5.2-0.129c-2.1-0.044-3.896-1.214-4.6-2.947L62.5,13.607l-1.499,3.899c-0.703,1.733-2.5,2.903-4.6,2.947l-5.2,0.129l4.297,2.99c1.602,1.083,2.251,2.86,1.704,4.551l-1.45,4.375l3.799-2.382c0.898-0.521,1.899-0.825,2.949-0.825s2.051,0.305,2.949,0.825l3.799,2.382l-1.45-4.375c-0.547-1.691,0.103-3.468,1.704-4.551L73.799,20.583z M96.152,86.667l28.848,26H0l28.848-26H10l31.25-26H30l17.451-18.632l-0.4,1.299l14.497-9.101L40.85,56.333H52.5l-30.049,26H40l-28.252,26h101.504L85,82.333h17.549l-30.049-26h10L63.301,34.146l14.648,9.188L62.5,33.625l-15.449,9.708l5.352-16.379L37.5,16.553l18.75-0.432L62.5,0l6.25,16.121l18.75,0.432L72.598,26.954l4.951,15.08L95,60.667H83.75l31.25,26H96.152z"/></svg>'; | |
| var gift1 = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="96.735px" height="86.111px" viewBox="0 0 96.735 86.111" enable-background="new 0 0 96.735 86.111" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFAA00" d="M93.511,21.528c0-1.508-1.159-2.706-2.677-2.982L74.841,33.829h15.445c1.773,0,3.225-1.384,3.225-3.075V21.528z M52.27,33.829h17.992l16.123-15.377H68.392L52.27,33.829z M50.367,18.452l2.838,10.118l10.607-10.118H50.367z M54.816,3.075c-3.545,0-6.449,2.769-6.449,6.151s2.904,6.151,6.449,6.151c3.546,0,6.449-2.769,6.449-6.151S58.362,3.075,54.816,3.075z M47.014,18.452h-0.517l-3.482,12.425l-3.127-0.769l2.289-8.211L29.698,33.829H47.69l3.19-3.045l-0.385,0.093L47.014,18.452z M46.725,14.269c-0.259,0.399-0.551,0.769-0.871,1.108h1.805C47.336,15.038,47.014,14.668,46.725,14.269z M38.694,3.075c-3.547,0-6.449,2.769-6.449,6.151s2.902,6.151,6.449,6.151c3.547,0,6.448-2.769,6.448-6.151S42.241,3.075,38.694,3.075z M23.249,18.452L7.126,33.829h17.993l16.123-15.377H23.249z M6.449,18.452c-1.773,0-3.225,1.385-3.225,3.076v9.226c0,0.676,0.29,1.292,0.677,1.784L18.67,18.452H6.449z M9.673,56.249l20.283-19.344H12.898c-1.773,0-3.225,1.384-3.225,3.075V56.249z M9.673,79.961c0,0.275,0.096,0.492,0.161,0.738l45.918-43.794H34.534L9.673,60.615V79.961z M12.898,83.035h27.054l-1.774-1.691l46.435-44.286c-0.259-0.06-0.485-0.153-0.775-0.153H60.33L12.124,82.883C12.382,82.941,12.608,83.035,12.898,83.035z M62.201,83.035l24.86-23.711V39.98c0-0.276-0.094-0.493-0.16-0.739L40.983,83.035H62.201z M83.837,83.035c1.773,0,3.225-1.385,3.225-3.074v-16.27L66.779,83.035H83.837z M90.286,36.905v43.056c0,3.381-2.903,6.15-6.449,6.15H12.898c-3.547,0-6.449-2.77-6.449-6.15V36.905C2.902,36.905,0,34.136,0,30.754v-9.226c0-3.382,2.902-6.151,6.449-6.151h25.086c-1.548-1.631-2.515-3.784-2.515-6.151c0-5.105,4.32-9.226,9.674-9.226c3.354,0,6.319,1.661,8.062,4.15C48.496,1.661,51.463,0,54.816,0c5.354,0,9.674,4.121,9.674,9.226c0,2.367-0.967,4.52-2.513,6.151h28.309c3.546,0,6.449,2.769,6.449,6.151v9.226C96.735,34.136,93.832,36.905,90.286,36.905z"/></svg>'; | |
| var gift2 = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="84px" viewBox="0 0 90 84" enable-background="new 0 0 90 84" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="#0e8ef7" d="M87,21c0-1.649-1.351-3-3-3H57v15h27c1.649,0,3-1.351,3-3V21z M51,3c-3.299,0-6,2.7-6,6s2.701,6,6,6s6-2.7,6-6S54.299,3,51,3z M43.471,13.92c-0.24,0.39-0.511,0.75-0.81,1.08h1.679C44.041,14.67,43.74,14.31,43.471,13.92z M40.02,30.12l-2.909-0.75L40.14,18H36v15h18V18h-7.14l3.029,11.37l-2.909,0.75L43.74,18h-0.48L40.02,30.12z M36,3c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6S39.3,3,36,3z M6,18c-1.649,0-3,1.351-3,3v9c0,1.649,1.351,3,3,3h27V18H6z M9,78c0,1.649,1.351,3,3,3h21V36H12c-1.649,0-3,1.351-3,3V78z M36,81h18V36H36V81z M57,81h21c1.649,0,3-1.351,3-3V39c0-1.649-1.351-3-3-3H57V81z M84,36v42c0,3.299-2.701,6-6,6H12c-3.3,0-6-2.701-6-6V36c-3.3,0-6-2.7-6-6v-9c0-3.3,2.7-6,6-6h23.339C27.899,13.411,27,11.31,27,9c0-4.98,4.02-9,9-9c3.12,0,5.88,1.62,7.5,4.05C45.12,1.62,47.88,0,51,0c4.98,0,9,4.02,9,9c0,2.31-0.899,4.411-2.338,6H84c3.299,0,6,2.7,6,6v9C90,33.3,87.299,36,84,36z"/></svg>'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| margin:0; | |
| padding:0; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Lobster !important; | |
| font-weight: normal; | |
| overflow:hidden; | |
| } | |
| #bg{ | |
| overflow:hidden; | |
| background: rgb(169,3,41); /* Old browsers */ | |
| background: -moz-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 12+ */ | |
| background: -ms-radial-gradient(center, ellipse cover, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */ | |
| background: radial-gradient(ellipse at center, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
| width:100%; | |
| height:100%; | |
| top:0px; | |
| position:fixed; | |
| } | |
| .textContainer{ | |
| margin:0 auto; | |
| width:100%; | |
| } | |
| .wish{ | |
| font-family: 'Lobster', cursive; !important; | |
| font-weight: normal; | |
| margin:0 auto; | |
| color:#fff; | |
| position:relative; | |
| float:left; | |
| font-size:100px; | |
| width:100%; | |
| text-align:center; | |
| top:40%; | |
| color: whitesmoke; | |
| text-shadow: 0 1px 0 #ccc, | |
| 0 2px 0 #c9c9c9, | |
| 0 3px 0 #bbb, | |
| 0 4px 0 #b9b9b9, | |
| 0 5px 0 #aaa, | |
| 0 6px 1px rgba(0,0,0,.1), | |
| 0 0 5px rgba(0,0,0,.1), | |
| 0 1px 3px rgba(0,0,0,.3), | |
| 0 3px 5px rgba(0,0,0,.2), | |
| 0 5px 10px rgba(0,0,0,.25), | |
| 0 10px 10px rgba(0,0,0,.2), | |
| 0 20px 20px rgba(0,0,0,.15); | |
| } | |
| .logo{ | |
| font-family: 'Francois One', sans-serif; | |
| font-weight: normal; | |
| margin:0 auto; | |
| color: whitesmoke; | |
| position:relative; | |
| float:left; | |
| font-size:40px; | |
| width:100%; | |
| text-align:center; | |
| top:50%; | |
| margin-left:155px; | |
| text-shadow: 1px 2px 4px #fff6e5, 0px 0px 0px black, 0px 0px 2px white; | |
| } | |
| .decorations{ | |
| width:100%; | |
| position:absolute; | |
| top:20%; | |
| left:50%; | |
| margin-left:-190px; | |
| } | |
| .decorationItem{ | |
| float:left; | |
| position:relative; | |
| margin-left:20px; | |
| } | |
| .gift1, .gift2{ | |
| vertical-align:bottom; | |
| top:50px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment