Techumber

Amazing Christmas Tree Using Pure CSS3 And HTML Elements

Github avatar
Dimpu
December 21, 2012. 18 min read

Hi guys! How are you? As you know from last fee days I have been working on Christmas related items. See Amazing Snow Fall Effect Using Pure CSS3 explained how to create snow fall effect using CSS3 another post Make Your Blog Ready For Christmas Using ShowStrome.js. When I am working on these i have been working creating Christmas tree using css3. I did different models for the the tree but i  feel they are taking too much time to create them. Amazing Christmas Tree Using Pure CSS3 And HTML Elements

Demo

Download

Finally I found this amazing guy HAKIM EL HATTAB. He did very good experiments with css3 and html. One of his experiment //hakim.se/experiments/domtree. He simply did a wonderful job by creating a DOM Tree. In this tutorial I am not completely using his code but I have taken some of the generated HTML% and modified it according to our need. HTML

<div class="tree" style="width: 500px; height: 600px; ">
<input type="text" value="techumber" style="width: 33.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 69pxundefined 0px) rotateX(0deg) rotateY(96.1932323500514deg) rotateZ(-12.722581884590909deg);">
<button style="width: 64.16666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 142pxundefined 0px) rotateX(0deg) rotateY(346.21661310084164deg) rotateZ(-9.109818855067715deg);">
techumber.com
</button>
<input type="submit" value="techumber" style="width: 137.08333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 317pxundefined 0px) rotateX(0deg) rotateY(286.68756413273513deg) rotateZ(-6.710696116788313deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="19" style="width: 215.83333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 506pxundefined 0px) rotateX(0deg) rotateY(133.69367863051593deg) rotateZ(-9.775352269643918deg);">
<input type="text" value="techumber" style="width: 109.58333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 251pxundefined 0px) rotateX(0deg) rotateY(6.1619151290506124deg) rotateZ(-7.037352388724685deg);">
<button style="width: 120.83333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 278pxundefined 0px) rotateX(0deg) rotateY(217.30383340269327deg) rotateZ(-4.104890255257487deg);">
techumber.com
</button>
<input type="text" value="techumber:jquery" style="width: 103.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 237pxundefined 0px) rotateX(0deg) rotateY(103.89078682288527deg) rotateZ(-1.0584978747647256deg);">
<button style="width: 240.83333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 566pxundefined 0px) rotateX(0deg) rotateY(277.2090165037662deg) rotateZ(-14.467366207391024deg);">
techumber.com
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="4" style="width: 18.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 33pxundefined 0px) rotateX(0deg) rotateY(265.21692705340683deg) rotateZ(-3.012448421213776deg);">
<input type="text" value="techumber" style="width: 19.166666666666664px; height: 26px; -webkit-transform: translate3d(250pxundefined 34pxundefined 0px) rotateX(0deg) rotateY(147.95233821496367deg) rotateZ(-2.841015636222437deg);" max="100" value="61">
<button style="width: 123.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 285pxundefined 0px) rotateX(0deg) rotateY(118.1765194516629deg) rotateZ(-12.028974336571991deg);">
techumber.com
</button>
<input type="text" value="techumber.com:css3-widgets" style="width: 99.16666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 226pxundefined 0px) rotateX(0deg) rotateY(23.722933502867818deg) rotateZ(-8.678969383472577deg);">
<input type="submit" value="techumber" style="width: 16.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 27pxundefined 0px) rotateX(0deg) rotateY(332.5293662119657deg) rotateZ(-1.464213776635006deg);">
<input type="text" value="techumber" style="width: 134.16666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 310pxundefined 0px) rotateX(0deg) rotateY(202.24201859906316deg) rotateZ(-11.298910507466644deg);" max="100" value="32">
<input type="text" value="techumber.com:css3-widgets" style="width: 167.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 390pxundefined 0px) rotateX(0deg) rotateY(66.7737225908786deg) rotateZ(-10.91302886721678deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="38" style="width: 96.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 219pxundefined 0px) rotateX(0deg) rotateY(84.14981782436371deg) rotateZ(-0.834541943622753deg);">
<input type="text" value="Sretni praznici" style="width: 247.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 582pxundefined 0px) rotateX(0deg) rotateY(282.39870328456163deg) rotateZ(-6.911833455087617deg);">
<button style="width: 132.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 306pxundefined 0px) rotateX(0deg) rotateY(180.83403959870338deg) rotateZ(-13.442462923703715deg);">
techumber:html5
</button>
<input type="submit" value="techumber" style="width: 37.08333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 77pxundefined 0px) rotateX(0deg) rotateY(158.44327960163355deg) rotateZ(-4.122283186297864deg);">
<input type="text" value="techumber" style="width: 187.91666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 439pxundefined 0px) rotateX(0deg) rotateY(269.02250739745796deg) rotateZ(-12.71152512403205deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="65" style="width: 221.66666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 520pxundefined 0px) rotateX(0deg) rotateY(127.29139281436801deg) rotateZ(-7.19895378802903deg);">
<input type="text" value="God Jul" style="width: 172.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 402pxundefined 0px) rotateX(0deg) rotateY(51.67588287033141deg) rotateZ(-0.5550527572631836deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="21" style="width: 59.16666666666667px; height: 26px; -webkit-transform: translate3d(250pxundefined 130pxundefined 0px) rotateX(0deg) rotateY(225.83800381980836deg) rotateZ(-10.58881139033474deg);">
<button style="width: 63.333333333333336px; height: 26px; -webkit-transform: translate3d(250pxundefined 140pxundefined 0px) rotateX(0deg) rotateY(189.54553219489753deg) rotateZ(-2.5984610756859183deg);">
techumber.com
</button>
<button style="width: 150px; height: 26px; -webkit-transform: translate3d(250pxundefined 348pxundefined 0px) rotateX(0deg) rotateY(90.8171740360558deg) rotateZ(-6.774084008065984deg);">
techumber.com
</button>
<input type="text" value="techumber" style="width: 167.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 390pxundefined 0px) rotateX(0deg) rotateY(315.089397104457deg) rotateZ(-6.285740572493523deg);" max="100" value="11">
<input type="radio" style="-webkit-transform: translate3d(250pxundefined 131pxundefined 0px) rotateX(0deg) rotateY(184.78310965932906deg) rotateZ(-7.4708716361783445deg);">
<button style="width: 29.166666666666668px; height: 26px; -webkit-transform: translate3d(250pxundefined 58pxundefined 0px) rotateX(0deg) rotateY(14.304151693359017deg) rotateZ(-0.5777733726426959deg);">
techumber.com
</button>
<input type="radio" style="-webkit-transform: translate3d(250pxundefined 54pxundefined 0px) rotateX(0deg) rotateY(182.14410633780062deg) rotateZ(-1.0420413280371577deg);">
<button style="width: 121.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 279pxundefined 0px) rotateX(0deg) rotateY(33.833583667874336deg) rotateZ(-8.538516622502357deg);">
techumber:html5
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="15" style="width: 96.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 219pxundefined 0px) rotateX(0deg) rotateY(186.33006624877453deg) rotateZ(-3.916212912881747deg);">
<input type="text" value="techumber" style="width: 59.16666666666667px; height: 26px; -webkit-transform: translate3d(250pxundefined 130pxundefined 0px) rotateX(0deg) rotateY(61.91580184735358deg) rotateZ(-11.67221653740853deg);">
<input type="radio" checked="" style="-webkit-transform: translate3d(250pxundefined 488pxundefined 0px) rotateX(0deg) rotateY(214.04028785414994deg) rotateZ(-3.9263553370255977deg);">
<input type="radio" checked="" style="-webkit-transform: translate3d(250pxundefined 447pxundefined 0px) rotateX(0deg) rotateY(161.08079756610096deg) rotateZ(-12.60087643400766deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="15" style="width: 250.41666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 589pxundefined 0px) rotateX(0deg) rotateY(224.2887934204191deg) rotateZ(-1.229980835923925deg);">
<input type="text" value="techumber:javascript" style="width: 88.33333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 200pxundefined 0px) rotateX(0deg) rotateY(49.75027699023485deg) rotateZ(-1.8291273806244135deg);">
<input type="text" value="techumber" style="width: 241.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 567pxundefined 0px) rotateX(0deg) rotateY(182.10086678154767deg) rotateZ(-1.1573775589931756deg);" max="100" value="63">
<input type="submit" value="techumber" style="width: 20px; height: 26px; -webkit-transform: translate3d(250pxundefined 36pxundefined 0px) rotateX(0deg) rotateY(339.72390490584075deg) rotateZ(-2.2831380064599216deg);">
<input type="text" value="techumber.com" style="width: 165.83333333333331px; height: 26px; -webkit-transform: translate3d(250pxundefined 386pxundefined 0px) rotateX(0deg) rotateY(336.74033403396606deg) rotateZ(-8.112559849396348deg);">
<input type="submit" value="techumber" style="width: 137.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 318pxundefined 0px) rotateX(0deg) rotateY(252.10352319292724deg) rotateZ(-8.571064774878323deg);">
<button style="width: 63.333333333333336px; height: 26px; -webkit-transform: translate3d(250pxundefined 140pxundefined 0px) rotateX(0deg) rotateY(349.9945018161088deg) rotateZ(-1.3301361515186727deg);">
techumber:css3
</button>
<button style="width: 249.16666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 586pxundefined 0px) rotateX(0deg) rotateY(113.60773446969688deg) rotateZ(-9.176301722181961deg);">
techumber.com
</button>
<button style="width: 82.91666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 187pxundefined 0px) rotateX(0deg) rotateY(112.51611999236047deg) rotateZ(-12.700275188544765deg);">
techumber.com
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="70" style="width: 167.91666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 391pxundefined 0px) rotateX(0deg) rotateY(192.64927768148482deg) rotateZ(-14.826560067012906deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="55" style="width: 100.41666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 229pxundefined 0px) rotateX(0deg) rotateY(278.1082566641271deg) rotateZ(-7.662766200955957deg);">
<input type="text" value="techumber.com" style="width: 212.08333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 497pxundefined 0px) rotateX(0deg) rotateY(52.69066756591201deg) rotateZ(-7.863340977346525deg);">
<input type="text" value="techumber.com" style="width: 35.833333333333336px; height: 26px; -webkit-transform: translate3d(250pxundefined 74pxundefined 0px) rotateX(0deg) rotateY(67.18612463213503deg) rotateZ(-6.343825156800449deg);">
<input type="text" value="techumber" style="width: 29.166666666666668px; height: 26px; -webkit-transform: translate3d(250pxundefined 58pxundefined 0px) rotateX(0deg) rotateY(227.0612331200391deg) rotateZ(-8.573182829422876deg);" max="100" value="3">
<button style="width: 12.916666666666668px; height: 26px; -webkit-transform: translate3d(250pxundefined 19pxundefined 0px) rotateX(0deg) rotateY(217.92426958680153deg) rotateZ(-9.899742234265432deg);">
techumber.com
</button>
<input type="text" value="Sretni praznici" style="width: 62.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 138pxundefined 0px) rotateX(0deg) rotateY(116.32516868412495deg) rotateZ(-0.731216361746192deg);">
<input type="submit" value="techumber"style="width: 71.66666666666667px; height: 26px; -webkit-transform: translate3d(250pxundefined 160pxundefined 0px) rotateX(0deg) rotateY(26.885153828188777deg) rotateZ(-8.891211210284382deg);">
<button style="width: 61.666666666666664px; height: 26px; -webkit-transform: translate3d(250pxundefined 136pxundefined 0px) rotateX(0deg) rotateY(87.77100132778287deg) rotateZ(-8.298356761224568deg);">
techumber.com:css3-widgets
</button>
<input type="radio" style="-webkit-transform: translate3d(250pxundefined 524pxundefined 0px) rotateX(0deg) rotateY(314.2933180555701deg) rotateZ(-3.915175166912377deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="92" style="width: 173.33333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 404pxundefined 0px) rotateX(0deg) rotateY(160.56090909987688deg) rotateZ(-1.8339853396173567deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="84" style="width: 219.58333333333331px; height: 26px; -webkit-transform: translate3d(250pxundefined 515pxundefined 0px) rotateX(0deg) rotateY(250.6522603612393deg) rotateZ(-7.437413240550086deg);">
<button style="width: 11.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 15pxundefined 0px) rotateX(0deg) rotateY(235.24226557463408deg) rotateZ(-9.756377813173458deg);">
techumber:javascript
</button>
<button style="width: 173.33333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 404pxundefined 0px) rotateX(0deg) rotateY(136.34612442925572deg) rotateZ(-11.81932202540338deg);">
techumber.com
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="55" style="width: 248.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 585pxundefined 0px) rotateX(0deg) rotateY(229.57621629349887deg) rotateZ(-7.083270738366991deg);">
<input type="text" value="techumber" style="width: 217.91666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 511pxundefined 0px) rotateX(0deg) rotateY(148.81624965928495deg) rotateZ(-13.614233918488026deg);">
<input type="submit" value="techumber" selected="techumber:javascript" style="width: 198.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 465pxundefined 0px) rotateX(0deg) rotateY(225.0601084716618deg) rotateZ(-2.3015794053208083deg);">
<input type="submit" value="techumber" selected="techumber.com:css3-widgets" style="width: 83.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 189pxundefined 0px) rotateX(0deg) rotateY(199.94845747947693deg) rotateZ(-9.911043603206053deg);">
<input type="submit" value="techumber" style="width: 81.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 183pxundefined 0px) rotateX(0deg) rotateY(351.49478629231453deg) rotateZ(-6.916564326966181deg);">
<input type="radio" checked="" style="-webkit-transform: translate3d(250pxundefined 124pxundefined 0px) rotateX(0deg) rotateY(254.42942513152957deg) rotateZ(-12.99477333552204deg);">
<input type="text" value="techumber.com" style="width: 60px; height: 26px; -webkit-transform: translate3d(250pxundefined 132pxundefined 0px) rotateX(0deg) rotateY(291.15887529216707deg) rotateZ(-6.953992479247972deg);">
<input type="text" value="techumber.com" style="width: 210.41666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 493pxundefined 0px) rotateX(0deg) rotateY(48.71346456930041deg) rotateZ(-5.265603755833581deg);">
<input type="text" value="techumber.com:css3-widgets" style="width: 101.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 231pxundefined 0px) rotateX(0deg) rotateY(37.48944126069546deg) rotateZ(-12.02080745715648deg);">
<button style="width: 223.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 525pxundefined 0px) rotateX(0deg) rotateY(4.771373821422458deg) rotateZ(-6.400695423362777deg);">
techumber:html5
</button>
<button style="width: 50.416666666666664px; height: 26px; -webkit-transform: translate3d(250pxundefined 109pxundefined 0px) rotateX(0deg) rotateY(79.21531934291124deg) rotateZ(-3.0429772404022515deg);">
techumber.com
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="70" style="width: 39.583333333333336px; height: 26px; -webkit-transform: translate3d(250pxundefined 83pxundefined 0px) rotateX(0deg) rotateY(114.18588504195213deg) rotateZ(-6.316341762430966deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="48" style="width: 210.41666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 493pxundefined 0px) rotateX(0deg) rotateY(246.6635783482343deg) rotateZ(-10.304927582619712deg);">
<input type="submit" value="techumber" selected="techumber:jquery" style="width: 152.91666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 355pxundefined 0px) rotateX(0deg) rotateY(82.630195626989deg) rotateZ(-13.270597828086466deg);">
<input type="text" value="techumber" style="width: 145px; height: 26px; -webkit-transform: translate3d(250pxundefined 336pxundefined 0px) rotateX(0deg) rotateY(73.94425006583333deg) rotateZ(-5.376627951627597deg);" max="100" value="18">
<input type="submit" value="techumber.com" min="0" max="100" value="61" style="width: 30px; height: 26px; -webkit-transform: translate3d(250pxundefined 60pxundefined 0px) rotateX(0deg) rotateY(5.008674385026097deg) rotateZ(-13.455583008471876deg);">
<input type="submit" value="techumber" style="width: 253.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 597pxundefined 0px) rotateX(0deg) rotateY(24.443468051031232deg) rotateZ(-2.0634347631130368deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="10" style="width: 160.41666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 373pxundefined 0px) rotateX(0deg) rotateY(50.55757898837328deg) rotateZ(-10.519312344258651deg);">
<input type="submit" value="techumber" style="width: 104.58333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 239pxundefined 0px) rotateX(0deg) rotateY(345.56185126304626deg) rotateZ(-9.54015216557309deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="21" style="width: 51.66666666666667px; height: 26px; -webkit-transform: translate3d(250pxundefined 112pxundefined 0px) rotateX(0deg) rotateY(180.45699711889029deg) rotateZ(-0.8236609306186438deg);">
<input type="submit" value="techumber" selected="techumber:jquery" style="width: 178.33333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 416pxundefined 0px) rotateX(0deg) rotateY(91.921201441437deg) rotateZ(-4.408849028404802deg);">
<input type="submit" value="techumber" selected="techumber.com:css3-widgets" style="width: 145px; height: 26px; -webkit-transform: translate3d(250pxundefined 336pxundefined 0px) rotateX(0deg) rotateY(141.4665059465915deg) rotateZ(-4.759867287939414deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="55" style="width: 49.166666666666664px; height: 26px; -webkit-transform: translate3d(250pxundefined 106pxundefined 0px) rotateX(0deg) rotateY(239.33659007772803deg) rotateZ(-12.88310582167469deg);">
<input type="submit" value="techumber" selected="Jie Ri Yu Kuai" style="width: 144.58333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 335pxundefined 0px) rotateX(0deg) rotateY(309.54763317480683deg) rotateZ(-13.8089971721638deg);">
<input type="text" value="techumber:html5" style="width: 72.08333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 161pxundefined 0px) rotateX(0deg) rotateY(199.01778367348015deg) rotateZ(-6.852701688185334deg);">
<input type="text" value="God Jul" style="width: 132.08333333333331px; height: 26px; -webkit-transform: translate3d(250pxundefined 305pxundefined 0px) rotateX(0deg) rotateY(9.988885503262281deg) rotateZ(-6.245526638813317deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="49" style="width: 212.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 498pxundefined 0px) rotateX(0deg) rotateY(332.68364226445556deg) rotateZ(-12.675560874631628deg);">
<button style="width: 152.08333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 353pxundefined 0px) rotateX(0deg) rotateY(255.36962748505175deg) rotateZ(-14.996432700427249deg);">
techumber.com
</button>
<input type="radio" style="-webkit-transform: translate3d(250pxundefined 42pxundefined 0px) rotateX(0deg) rotateY(241.87205065973103deg) rotateZ(-7.231924150837585deg);">

<input type="text" value="techumber.com:css3-widgets" style="width: 253.33333333333331px; height: 26px; -webkit-transform: translate3d(250pxundefined 596pxundefined 0px) rotateX(0deg) rotateY(129.45939210243523deg) rotateZ(-13.256708839908242deg);">
<input type="text" value="techumber" style="width: 133.33333333333331px; height: 26px; -webkit-transform: translate3d(250pxundefined 308pxundefined 0px) rotateX(0deg) rotateY(328.43795106746256deg) rotateZ(-11.75168106565252deg);" max="100" value="34">

<input type="text" value="Sretni praznici" style="width: 83.33333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 188pxundefined 0px) rotateX(0deg) rotateY(79.91784621030092deg) rotateZ(-12.889183389488608deg);">

<input type="text" value="techumber" style="width: 160.83333333333331px; height: 26px; -webkit-transform: translate3d(250pxundefined 374pxundefined 0px) rotateX(0deg) rotateY(65.00343538820744deg) rotateZ(-13.040293988306075deg);">

<input type="radio" checked="" style="-webkit-transform: translate3d(250pxundefined 398pxundefined 0px) rotateX(0deg) rotateY(51.35539820417762deg) rotateZ(-10.501571672502905deg);">
<input type="radio" style="-webkit-transform: translate3d(250pxundefined 130pxundefined 0px) rotateX(0deg) rotateY(333.02958553656936deg) rotateZ(-5.686504020122811deg);">
<input type="text" value="techumber" style="width: 147.91666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 343pxundefined 0px) rotateX(0deg) rotateY(144.2766670603305deg) rotateZ(-11.99287025607191deg);">
<input type="text" value="God Jul" style="width: 161.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 375pxundefined 0px) rotateX(0deg) rotateY(227.1975568961352deg) rotateZ(-10.701175185386091deg);">
<input type="text" value="techumber" style="width: 166.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 387pxundefined 0px) rotateX(0deg) rotateY(349.3817566148937deg) rotateZ(-0.6751537194941193deg);" max="100" value="52">
<input type="text" value="techumber.com" style="width: 222.91666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 523pxundefined 0px) rotateX(0deg) rotateY(202.65978497453034deg) rotateZ(-8.322150005260482deg);">
<input type="radio" checked="" style="-webkit-transform: translate3d(250pxundefined 431pxundefined 0px) rotateX(0deg) rotateY(351.8402533046901deg) rotateZ(-11.541197021724656deg);">
<input type="text" value="Sretni praznici" style="width: 49.166666666666664px; height: 26px; -webkit-transform: translate3d(250pxundefined 106pxundefined 0px) rotateX(0deg) rotateY(322.59953079745173deg) rotateZ(-4.494873080402613deg);">
<input type="text" value="Sretni praznici" style="width: 91.66666666666667px; height: 26px; -webkit-transform: translate3d(250pxundefined 208pxundefined 0px) rotateX(0deg) rotateY(27.613608855754137deg) rotateZ(-13.61597032751888deg);">
<input type="text" value="techumber.com" style="width: 49.583333333333336px; height: 26px; -webkit-transform: translate3d(250pxundefined 107pxundefined 0px) rotateX(0deg) rotateY(77.67782717943192deg) rotateZ(-11.374098127707839deg);">
<input type="submit" value="techumber" selected="Sretni praznici" style="width: 155.41666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 361pxundefined 0px) rotateX(0deg) rotateY(86.55969922430813deg) rotateZ(-4.74554366664961deg);">
<input type="radio" checked="" style="-webkit-transform: translate3d(250pxundefined 453pxundefined 0px) rotateX(0deg) rotateY(59.78125071153045deg) rotateZ(-13.257647847058252deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="13" style="width: 202.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 474pxundefined 0px) rotateX(0deg) rotateY(229.75503975525498deg) rotateZ(-5.8285177568905056deg);">
<button style="width: 234.58333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 551pxundefined 0px) rotateX(0deg) rotateY(258.9992044586688deg) rotateZ(-5.916554688010365deg);">
techumber.com
</button>
<input type="radio" style="-webkit-transform: translate3d(250pxundefined 467pxundefined 0px) rotateX(0deg) rotateY(91.3631044048816deg) rotateZ(-4.797508763149381deg);">
<input type="radio" style="-webkit-transform: translate3d(250pxundefined 47pxundefined 0px) rotateX(0deg) rotateY(283.2308388501406deg) rotateZ(-8.53629803750664deg);">
<button style="width: 8.333333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 8pxundefined 0px) rotateX(0deg) rotateY(23.61765654757619deg) rotateZ(-1.6463751113042235deg);">
techumber.com:css3-widgets
</button>
<input type="radio" checked="" style="-webkit-transform: translate3d(250pxundefined 468pxundefined 0px) rotateX(0deg) rotateY(347.4167526047677deg) rotateZ(-1.866682581603527deg);">
<button style="width: 128.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 297pxundefined 0px) rotateX(0deg) rotateY(104.61149957031012deg) rotateZ(-12.501518946373835deg);">
techumber.com:css3-widgets
</button>
<input type="text" value="techumber.com:css3-widgets" style="width: 210.41666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 493pxundefined 0px) rotateX(0deg) rotateY(149.4148495607078deg) rotateZ(-7.501492687733844deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="20" style="width: 145px; height: 26px; -webkit-transform: translate3d(250pxundefined 336pxundefined 0px) rotateX(0deg) rotateY(282.1758226957172deg) rotateZ(-7.082904152339324deg);">
<button style="width: 8.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 9pxundefined 0px) rotateX(0deg) rotateY(251.91091418266296deg) rotateZ(-5.8543806918896735deg);">
techumber.com
</button>
<input type="radio" style="-webkit-transform: translate3d(250pxundefined 396pxundefined 0px) rotateX(0deg) rotateY(197.50685635954142deg) rotateZ(-3.5718325653579086deg);">
<input type="text" value="techumber" style="width: 210.83333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 494pxundefined 0px) rotateX(0deg) rotateY(206.2665014807135deg) rotateZ(-8.837100552627817deg);" max="100" value="79">
<input type="text" value="techumber" style="width: 42.083333333333336px; height: 26px; -webkit-transform: translate3d(250pxundefined 89pxundefined 0px) rotateX(0deg) rotateY(277.974948361516deg) rotateZ(-2.945894307922572deg);" max="100" value="17">
<input type="text" value="techumber" style="width: 196.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 459pxundefined 0px) rotateX(0deg) rotateY(80.08421776816249deg) rotateZ(-7.340023691067472deg);" max="100" value="9">
<input type="text" value="techumber:jquery" style="width: 211.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 495pxundefined 0px) rotateX(0deg) rotateY(35.399885941296816deg) rotateZ(-8.292701641330495deg);">
<button style="width: 60px; height: 26px; -webkit-transform: translate3d(250pxundefined 132pxundefined 0px) rotateX(0deg) rotateY(17.431414956226945deg) rotateZ(-7.360087798442692deg);">
Sretni praznici
</button>
<button style="width: 210px; height: 26px; -webkit-transform: translate3d(250pxundefined 492pxundefined 0px) rotateX(0deg) rotateY(353.64224773831666deg) rotateZ(-10.414897743612528deg);">
techumber:javascript
</button>
<input type="text" value="techumber" style="width: 87.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 198pxundefined 0px) rotateX(0deg) rotateY(165.59925818815827deg) rotateZ(-3.987113640177995deg);" max="100" value="9">
<input type="submit" value="techumber" selected="Jie Ri Yu Kuai" style="width: 25px; height: 26px; -webkit-transform: translate3d(250pxundefined 48pxundefined 0px) rotateX(0deg) rotateY(237.60918896645308deg) rotateZ(-7.358303528744727deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="71" style="width: 50px; height: 26px; -webkit-transform: translate3d(250pxundefined 108pxundefined 0px) rotateX(0deg) rotateY(23.548436276614666deg) rotateZ(-10.064008010085672deg);">
<button style="width: 84.58333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 191pxundefined 0px) rotateX(0deg) rotateY(89.07982712611556deg) rotateZ(-8.854453641688451deg);">
techumber.com:css3-widgets
</button>
<input type="text" value="techumber.com" style="width: 84.58333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 191pxundefined 0px) rotateX(0deg) rotateY(148.54987336322665deg) rotateZ(-2.491812212392688deg);">
<input type="text" value="techumber" style="width: 197.08333333333331px; height: 26px; -webkit-transform: translate3d(250pxundefined 461pxundefined 0px) rotateX(0deg) rotateY(137.13975897990167deg) rotateZ(-3.659575469791889deg);" max="100" value="31">
<input type="text" value="techumber.com" style="width: 99.58333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 227pxundefined 0px) rotateX(0deg) rotateY(244.8918129131198deg) rotateZ(-0.2249654126353562deg);">
<input type="text" value="techumber.com" style="width: 211.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 495pxundefined 0px) rotateX(0deg) rotateY(124.29513006471097deg) rotateZ(-6.591870132833719deg);">
<input type="text" value="techumber.com:css3-widgets" style="width: 94.16666666666667px; height: 26px; -webkit-transform: translate3d(250pxundefined 214pxundefined 0px) rotateX(0deg) rotateY(233.8276134710759deg) rotateZ(-0.23383680847473443deg);">
<input type="text" value="techumber.com" style="width: 223.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 525pxundefined 0px) rotateX(0deg) rotateY(216.7409499641508deg) rotateZ(-8.998263976536691deg);">
<button style="width: 81.66666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 184pxundefined 0px) rotateX(0deg) rotateY(324.72223796881735deg) rotateZ(-5.701169891981408deg);">
techumber:javascript
</button>
<input type="text" value="techumber.com" style="width: 144.16666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 334pxundefined 0px) rotateX(0deg) rotateY(138.89456070028245deg) rotateZ(-4.037527358159423deg);">
<input type="submit" value="techumber" style="width: 68.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 153pxundefined 0px) rotateX(0deg) rotateY(18.744833702221513deg) rotateZ(-4.177966652205214deg);">
<input type="text" value="Beannachtaí na Féile" style="width: 187.91666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 439pxundefined 0px) rotateX(0deg) rotateY(127.76681117713451deg) rotateZ(-3.1763904984109104deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="91" style="width: 227.91666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 535pxundefined 0px) rotateX(0deg) rotateY(102.25863086991012deg) rotateZ(-1.4340552838984877deg);">
<input type="submit" value="techumber" selected="Vesele Praznike" style="width: 183.33333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 428pxundefined 0px) rotateX(0deg) rotateY(339.73822362720966deg) rotateZ(-0.4691067268140614deg);">
<input type="submit" value="techumber" style="width: 15.833333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 26pxundefined 0px) rotateX(0deg) rotateY(281.12363040447235deg) rotateZ(-0.044767765793949366deg);">
<input type="submit" value="techumber" selected="Beannachtaí na Féile" style="width: 150.83333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 350pxundefined 0px) rotateX(0deg) rotateY(6.771386442705989deg) rotateZ(-9.420884780120105deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="35" style="width: 85.41666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 193pxundefined 0px) rotateX(0deg) rotateY(103.44624646939337deg) rotateZ(-6.98259683791548deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="21" style="width: 138.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 321pxundefined 0px) rotateX(0deg) rotateY(295.96283418126404deg) rotateZ(-3.6526092526037246deg);">
<button style="width: 189.58333333333331px; height: 26px; -webkit-transform: translate3d(250pxundefined 443pxundefined 0px) rotateX(0deg) rotateY(118.43568940646946deg) rotateZ(-3.8801645336207002deg);">
techumber:css3
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="4" style="width: 156.66666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 364pxundefined 0px) rotateX(0deg) rotateY(337.1782142110169deg) rotateZ(-12.907195942243561deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="2" style="width: 210px; height: 26px; -webkit-transform: translate3d(250pxundefined 492pxundefined 0px) rotateX(0deg) rotateY(15.056640319526196deg) rotateZ(-13.905436297645792deg);">
<input type="text" value="techumber:javascript" style="width: 48.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 105pxundefined 0px) rotateX(0deg) rotateY(348.90614664182067deg) rotateZ(-1.4845291280653328deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="9" style="width: 85px; height: 26px; -webkit-transform: translate3d(250pxundefined 192pxundefined 0px) rotateX(0deg) rotateY(295.378100881353deg) rotateZ(-6.281841943273321deg);">
<button style="width: 120px; height: 26px; -webkit-transform: translate3d(250pxundefined 276pxundefined 0px) rotateX(0deg) rotateY(146.30548023618758deg) rotateZ(-10.860624199267477deg);">
techumber:javascript
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="92" style="width: 63.333333333333336px; height: 26px; -webkit-transform: translate3d(250pxundefined 140pxundefined 0px) rotateX(0deg) rotateY(244.82555815950036deg) rotateZ(-3.847105822060257deg);">
<input type="text" value="techumber.com:css3-widgets" style="width: 19.166666666666664px; height: 26px; -webkit-transform: translate3d(250pxundefined 34pxundefined 0px) rotateX(0deg) rotateY(69.80901684612036deg) rotateZ(-11.27356373006478deg);">
<input type="submit" value="techumber"style="width: 166.66666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 388pxundefined 0px) rotateX(0deg) rotateY(97.9530103225261deg) rotateZ(-10.62002077116631deg);">
<input type="text" value="Jie Ri Yu Kuai" style="width: 197.08333333333331px; height: 26px; -webkit-transform: translate3d(250pxundefined 461pxundefined 0px) rotateX(0deg) rotateY(28.44609403051436deg) rotateZ(-5.053795978892595deg);">
<input type="text" value="Jie Ri Yu Kuai" style="width: 38.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 81pxundefined 0px) rotateX(0deg) rotateY(300.635028462857deg) rotateZ(-8.253726601833478deg);">
<input type="submit" value="techumber" style="width: 246.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 579pxundefined 0px) rotateX(0deg) rotateY(126.63119388744235deg) rotateZ(-0.7224503962788731deg);">
<input type="text" value="techumber.com:css3-widgets" style="width: 97.08333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 221pxundefined 0px) rotateX(0deg) rotateY(355.0515099428594deg) rotateZ(-12.805819956120104deg);">
<input type="submit" value="techumber" selected="Sretni praznici" style="width: 155px; height: 26px; -webkit-transform: translate3d(250pxundefined 360pxundefined 0px) rotateX(0deg) rotateY(183.46453336067498deg) rotateZ(-1.9407466531265527deg);">
<input type="submit" value="techumber" selected="Beannachtaí na Féile" style="width: 214.16666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 502pxundefined 0px) rotateX(0deg) rotateY(235.66105202771723deg) rotateZ(-11.830562723334879deg);">
<input type="submit" value="techumber" style="width: 102.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 234pxundefined 0px) rotateX(0deg) rotateY(135.87213928811252deg) rotateZ(-0.13827627059072256deg);">
<input type="submit" value="techumber" style="width: 99.58333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 227pxundefined 0px) rotateX(0deg) rotateY(45.821146219968796deg) rotateZ(-1.175105336587876deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="42" style="width: 102.08333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 233pxundefined 0px) rotateX(0deg) rotateY(204.35333082452416deg) rotateZ(-6.558654913678765deg);">
<input type="submit" value="techumber" selected="techumber:jquery" style="width: 150.83333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 350pxundefined 0px) rotateX(0deg) rotateY(97.20099527388811deg) rotateZ(-5.281361164525151deg);">
<input type="text" value="techumber.com" style="width: 216.66666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 508pxundefined 0px) rotateX(0deg) rotateY(71.62657840177417deg) rotateZ(-8.122216158080846deg);">
<button style="width: 15.833333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 26pxundefined 0px) rotateX(0deg) rotateY(261.24290079809725deg) rotateZ(-10.522110150195658deg);">
techumber:javascript
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="14" style="width: 251.66666666666669px; height: 26px; -webkit-transform: translate3d(250pxundefined 592pxundefined 0px) rotateX(0deg) rotateY(346.3307280186564deg) rotateZ(-13.57521271915175deg);">
<input type="text" value="techumber" style="width: 245.83333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 578pxundefined 0px) rotateX(0deg) rotateY(154.2531533818692deg) rotateZ(-0.6560407066717744deg);" max="100" value="83">
<input type="text" value="techumber.com" style="width: 131.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 303pxundefined 0px) rotateX(0deg) rotateY(39.97894017957151deg) rotateZ(-6.673522655619308deg);">
<input type="submit" value="techumber" selected="techumber.com:css3-widgets" style="width: 118.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 273pxundefined 0px) rotateX(0deg) rotateY(225.44357165694237deg) rotateZ(-13.954826246481389deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="89" style="width: 12.916666666666668px; height: 26px; -webkit-transform: translate3d(250pxundefined 19pxundefined 0px) rotateX(0deg) rotateY(241.75462782382965deg) rotateZ(-0.8807745657395571deg);">
<input type="submit" value="techumber"style="width: 51.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 111pxundefined 0px) rotateX(0deg) rotateY(32.04573696479201deg) rotateZ(-9.967230762122199deg);">
<input type="text" value="techumber" style="width: 183.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 429pxundefined 0px) rotateX(0deg) rotateY(241.59199400804937deg) rotateZ(-5.9478088351897895deg);" max="100" value="43">
<input type="text" value="techumber:javascript" style="width: 142.08333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 329pxundefined 0px) rotateX(0deg) rotateY(39.84396630898118deg) rotateZ(-12.525585726834834deg);">
<button style="width: 146.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 339pxundefined 0px) rotateX(0deg) rotateY(339.20749383978546deg) rotateZ(-3.3383543172385544deg);">
techumber:html5
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="14" style="width: 135.83333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 314pxundefined 0px) rotateX(0deg) rotateY(310.90645811520517deg) rotateZ(-4.3848089897073805deg);">
<input type="text" value="techumber" style="width: 113.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 261pxundefined 0px) rotateX(0deg) rotateY(191.81219327263534deg) rotateZ(-0.5264050362166017deg);" max="100" value="58">
<button style="width: 221.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 519pxundefined 0px) rotateX(0deg) rotateY(122.6669248379767deg) rotateZ(-8.555991570465267deg);">
techumber.com
</button>
<button style="width: 145.41666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 337pxundefined 0px) rotateX(0deg) rotateY(49.25860217772424deg) rotateZ(-1.3660571223590523deg);">
techumber:css3
</button>
<input type="text" value="techumber" style="width: 139.58333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 323pxundefined 0px) rotateX(0deg) rotateY(257.0909421611577deg) rotateZ(-5.958171525271609deg);">
<button style="width: 142.08333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 329pxundefined 0px) rotateX(0deg) rotateY(10.809800801798701deg) rotateZ(-8.98841941379942deg);">
techumber:jquery
</button>
<input type="submit" value="techumber" selected="God Jul" style="width: 182.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 426pxundefined 0px) rotateX(0deg) rotateY(33.5376210976392deg) rotateZ(-4.537140000611544deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="92" style="width: 19.166666666666664px; height: 26px; -webkit-transform: translate3d(250pxundefined 34pxundefined 0px) rotateX(0deg) rotateY(228.49620019085705deg) rotateZ(-11.639021054143086deg);">
<button style="width: 132.5px; height: 26px; -webkit-transform: translate3d(250pxundefined 306pxundefined 0px) rotateX(0deg) rotateY(308.3559173159301deg) rotateZ(-13.716965586645529deg);">
techumber:html5
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="3" style="width: 80.83333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 182pxundefined 0px) rotateX(0deg) rotateY(186.06880241073668deg) rotateZ(-8.363406748976558deg);">
<input type="submit" value="techumber" selected="techumber.com:css3-widgets" style="width: 33.33333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 68pxundefined 0px) rotateX(0deg) rotateY(179.0315172728151deg) rotateZ(-9.764759419485927deg);">
<button style="width: 73.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 165pxundefined 0px) rotateX(0deg) rotateY(16.114399200305343deg) rotateZ(-4.641051309881732deg);">
techumber:jquery
</button>
<input type="submit" value="techumber" selected="Sretni praznici" style="width: 206.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 483pxundefined 0px) rotateX(0deg) rotateY(270.82791494205594deg) rotateZ(-13.625870801042765deg);">
<input type="submit" value="techumber"style="width: 225px; height: 26px; -webkit-transform: translate3d(250pxundefined 528pxundefined 0px) rotateX(0deg) rotateY(284.9116171337664deg) rotateZ(-13.916288682958111deg);">
<button style="width: 233.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 549pxundefined 0px) rotateX(0deg) rotateY(14.483106918632984deg) rotateZ(-13.293925108155236deg);">
Vesele Praznike
</button>
<input type="text" value="techumber:html5" style="width: 102.08333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 233pxundefined 0px) rotateX(0deg) rotateY(282.22446254454553deg) rotateZ(-9.825937582645565deg);">
<button style="width: 60px; height: 26px; -webkit-transform: translate3d(250pxundefined 132pxundefined 0px) rotateX(0deg) rotateY(313.99375956505537deg) rotateZ(-11.147171695483848deg);">
techumber.com
</button>
<input type="submit" value="techumber" selected="Sretni praznici" style="width: 238.33333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 560pxundefined 0px) rotateX(0deg) rotateY(293.4345007315278deg) rotateZ(-8.069390669697896deg);">
<input type="submit" value="techumber" style="width: 29.583333333333332px; height: 26px; -webkit-transform: translate3d(250pxundefined 59pxundefined 0px) rotateX(0deg) rotateY(295.40817263536155deg) rotateZ(-8.813373787561432deg);">
<input type="text" value="God Jul" style="width: 113.33333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 260pxundefined 0px) rotateX(0deg) rotateY(147.31898493133485deg) rotateZ(-1.3499982375651598deg);">
<input type="text" value="techumber.com" style="width: 52.08333333333333px; height: 26px; -webkit-transform: translate3d(250pxundefined 113pxundefined 0px) rotateX(0deg) rotateY(204.16227229870856deg) rotateZ(-11.434998392360285deg);">
<input type="submit" value="techumber" style="width: 86.25px; height: 26px; -webkit-transform: translate3d(250pxundefined 195pxundefined 0px) rotateX(0deg) rotateY(246.36128392070532deg) rotateZ(-4.600405554519966deg);">
<input type="text" value="techumber" style="width: 121.66666666666667px; height: 26px; -webkit-transform: translate3d(250pxundefined 280pxundefined 0px) rotateX(0deg) rotateY(315.32497418113053deg) rotateZ(-8.857912989333272deg);">
<input type="submit" value="techumber" selected="techumber:javascript" style="width: 58.333333333333336px; height: 26px; -webkit-transform: translate3d(250pxundefined 128pxundefined 0px) rotateX(0deg) rotateY(151.68012276291847deg) rotateZ(-14.952757033752277deg);">
<button style="width: 215px; height: 26px; -webkit-transform: translate3d(250pxundefined 504pxundefined 0px) rotateX(0deg) rotateY(147.40688586607575deg) rotateZ(-7.880282445112243deg);">
techumber.com
</button>
<input type="submit" value="techumber.com" min="0" max="100" value="34" style="width: 64.58333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 143pxundefined 0px) rotateX(0deg) rotateY(141.90303470939398deg) rotateZ(-5.916487360373139deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="70" style="width: 150.41666666666666px; height: 26px; -webkit-transform: translate3d(250pxundefined 349pxundefined 0px) rotateX(0deg) rotateY(201.56551703810692deg) rotateZ(-12.731468898709863deg);">
<input type="text" value="techumber.com" style="width: 188.75px; height: 26px; -webkit-transform: translate3d(250pxundefined 441pxundefined 0px) rotateX(0deg) rotateY(44.7369446977973deg) rotateZ(-3.739860167261213deg);">
<input type="submit" value="techumber.com" min="0" max="100" value="12" style="width: 25.416666666666668px; height: 26px; -webkit-transform: translate3d(250pxundefined 49pxundefined 0px) rotateX(0deg) rotateY(37.16564130038023deg) rotateZ(-6.086371229030192deg);">
<input type="text" value="techumber" style="width: 202.08333333333334px; height: 26px; -webkit-transform: translate3d(250pxundefined 473pxundefined 0px) rotateX(0deg) rotateY(285.80057236365974deg) rotateZ(-2.1237460314296186deg);">
<input type="submit" value="techumber" style="width: 42.91666666666667px; height: 26px; -webkit-transform: translate3d(250pxundefined 91pxundefined 0px) rotateX(0deg) rotateY(293.3394021727145deg) rotateZ(-2.061029872857034deg);">

This is the html code I have taken form domtree. If we want we can create it manually but it will take 1 or 2 days. So prefer use existing code. Styling

body{
background: #212121;
font-family: Androgyne;
background-image: url('img/s1.png')undefined url('img/s2.png')undefined url('img/s3.png');
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;

-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-perspective: 3000px;
-o-perspective: 3000px;
perspective: 3000px;

-webkit-perspective-origin: 0 20%;
-moz-perspective-origin: 0 20%;
-ms-perspective-origin: 0 20%;
-o-perspective-origin: 0 20%;
perspective-origin: 0 20%;

}

@keyframes snow {
0% {
background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;
}
50% {
background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;
}
100% {
background-position: 500px 1000pxundefined 200px 400pxundefined -100px 300px;
}
}
@-moz-keyframes snow {
0% {
background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;
}
50% {
background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;
}
100% {
background-position: 400px 1000pxundefined 200px 400pxundefined 100px 300px;
}
}
@-webkit-keyframes snow {
0% {
background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;
}
50% {
background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;
}
100% {
background-position: 500px 1000pxundefined 200px 400pxundefined -100px 300px;
}
}
@-ms-keyframes snow {
0% {
background-position: 0px 0pxundefined 0px 0pxundefined 0px 0px;
}
50% {
background-position: 500px 500pxundefined 100px 200pxundefined -100px 150px;
}
100% {
background-position: 500px 1000pxundefined 200px 400pxundefined -100px 300px;
}
}

.tree {
margin: 0 auto;
position: relative;

-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.tree * {
position: absolute;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}

Most of this code is form the previous post snow fall effect using Pure CSS3. That’s it hope you like it. Stay tuned for more Christmas gifts.


...