Scale-able Snowflakes, with text!

HTML

<div class="snowflake" style="font-size:12pt;">
      <span>It's Snowing!</span>
    </div>
<div class="testpane">
    <input type="range" step="1" min="1" max="100" value="16" id="size" onchange = "document.getElementsByClassName('snowflake')[0].style.fontSize = this.value+'pt';document.getElementById('pt').innerHTML=this.value"/> Font-size is <span id="pt">12</span>pt
</div>

CSS

.snowflake{
    display:inline-block;
      background:url("http://i.imgur.com/4M9MH1Q.png") scroll no-repeat center/contain;
    }
/*This is for setting the height the same as the width, a 1:1 ratio. more info http://www.mademyday.de/css-height-equals-width-with-pure-css.html#outer_wrap */
    .snowflake:after{
    	content: "";
    	display: block;
    	padding-top: 100%;
    }
    .snowflake span{
        display:inline-block;
        -webkit-transform: translateY(110%);
            -ms-transform: translateY(110%);
                transform: translateY(110%);
        width:100%;
        text-align:center;
       padding-top:20%;
      }
 .snowflake span:before, .snowflake span:after{
     content:"aaa";
     visibility:hidden;
     opacity:0;
  }

.testpane{
    position:fixed;
    top:0;
    left:0;
}