Long Shadow Generator

index.html

<aside>
  <div id="top"><h1>Long Shadow</h1><span>Under construction</span></div>
     <div class="group">
       <h2>Shadow size</h2>
   <input id="long" type="range"  min="0" max="200" value="0"  /> 
       
       <p class="longN">0px</p>
     </div> 

   <div class="group">
  
     
     <h2>Shadow direction</h2>
 <div class="knob-out">
<div class="knob-degree">0º</div>
<div id="knob"></div>

</div>
<!-- End "direcional"-->
    
     </div> 


  
  
  
    <div class="group">
       <h2>Colors</h2>

      
       <div class="groupcolor">
   <div class="colorP Bbcolori"></div>
    <input id="Bbcolori" class="colorInput " type="text" value="#c33">
   <label>Background</label>
    </div> 
      
        <div class="groupcolor">
   <div class="colorP textcolori"></div>
       <input id="textcolori" class="colorInput" type="text" value="#fff">
          <label>Text</label>
    </div> 
      
      
        <div class="groupcolor">
   <div class="colorP textShadowColor"></div>
    <input id="textShadowColor" class="colorInput" type="text" value="#232323">
   <label>Shadow</label>
    </div> 
      
      
     </div> 
 
 
   <div class="group">
     <h2>Font</h2>
     <div class="font-selected">Sansita One</div>
  </div>
  
   <div class="group">
    
    <div class="btn-code">Code</div>
  </div>
  
  
  
    



 
  
    
  

  
  <h5 class="g1">By Jordano Aragão</h5>

  
</aside>

<div class="fonts">
  <h2>Select font</h2>
   <div class="close">X</div>
 <ul id="font">
  <li class="family sans-serif">Arial</li>
   <li class="family sans-serif">Helvetica</li>
   <li class="family serif">Georgia</li>
   <li class="family cursive google ">Lobster</li>
   
   <li class="family sans-serif google">Open sans</li>
   <li class="family cursive google">Quintessential</li>
   <li class="family cursive google">Creepster</li>
   <li class="family cursive google ">Courgette</li>
   <li class="family cursive google">Fredoka One</li>
   <li class="family cursive google">Nosifer</li>
   
    <li class="family cursive google">Nova Cut</li>
   <li class="family google cursive">Sansita One</li>
   <li class="family google cursive">Fugaz One</li>
    <li class="family google cursive">Black Ops One</li>
   
   <li class="family cursive google">Sniglet</li>
   <li class="family google cursive">Poller One</li>
   <li class="family google cursive">Trade Winds</li>
    <li class="family google cursive">UnifrakturCook</li>
   
    <li class="family cursive google">Passero One</li>
   <li class="family google cursive">Racing Sans One</li>
   <li class="family google cursive">Kavoon</li>
    <li class="family google cursive">Sonsie One</li>
   
   <li class="family cursive google">Vampiro One</li>
   <li class="family google cursive">Audiowide</li>
   <li class="family google cursive">Luckiest Guy</li>
    <li class="family google cursive">Bangers</li>
   

 </ul> 
  
</div>


<div id="codigo" class="code">


  

<p class="import">
  @import url(http://fonts.googleapis.com/css?family=Sansita+One);
</p>
  <p class="font-family">font-family:'Sansita One',cursive;</p>
  
  
  
 <p class="codeshadow"></p>

  
  
</div>











<p class="text"contenteditable="true" >
  <label>Click to edit</label>
  
  Editable text</p>


<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script>

Long-Shadow-Generator.markdown

Long Shadow Generator

This pen still is under construction... but works.

A Pen by Jordano Aragão on CodePen.

License.

script.js

$("input").on('change', function() {
 
 Bbcolor = $("#Bbcolori").val();
  ttcolor = $("#textcolori").val();
  textShadowColor = $("#textShadowColor").val();
  
  $('<style>.Bbcolori:after{background:'+ Bbcolor +';}</style>').appendTo('aside');
  $('body').css('background', Bbcolor);

  $('<style>.textcolori:after{background:'+ ttcolor +';}</style>').appendTo('aside');
   $('<style>.textShadowColor:after{background:'+ textShadowColor +';}</style>').appendTo('aside');
  
  $('.text').css('color', ttcolor);
  
  
  
  
  textShadowLoop = $("#long").val();
    textShadow = '';

  
  	var angle1 = $(".knob-degree").text();
  
  
   for(var i = 1; i < textShadowLoop; i++){
      if(i === 1){  
       textShadow = textShadow + i + 'px ' + i + 'px 0px ' + textShadowColor; 
      
     } 
     

     else {
       
       y = '';
       x = '';
       
       if( angle1 == "45º" || angle1 == "90º" || angle1 == "0º" || angle1 == "360º" || angle1 == "315º" || angle1 == "270º" ){ y = '-';}
       
       if(angle1 == "225º" ||  angle1 == "315º" || angle1 == "270º" ){ x = '-';}
   
if(angle1 == "0º" || angle1 == "180º" || angle1 == "360º"){
  textShadow = textShadow  +','  + '0px ' + y + i + 'px 0px ' + textShadowColor  ;
}
  
if(angle1 == "90º" || angle1 == "270º" ){
textShadow = textShadow + ','   + x   + i + 'px 0px 0px ' + textShadowColor ;
}       

if(angle1 == "45º" | angle1 == "135º" | angle1 == "225º"| angle1 == "315º"){
textShadow = textShadow +','  + x + i + 'px ' + y + i + 'px 0px ' + textShadowColor ;
}
 
 

     
   }
    }
  

 
 $(".longN").html($("#long").val() + "px");
 $(".codeshadow").html('<b>text-shadow:</b> ' +  textShadow + ';');
 document.querySelectorAll('.text')[0].style.textShadow = textShadow;
    });







$(".family").load( function () {
 var font = $(this).text();
$(this).css("font-family", font );
  
});

$(window).load(function(){
$(".family").trigger("load");
 });


$(".family").click( function () {

 var family = $(this).text();
 var familyPlus = family.replace(/\s/g, '+');
$(".text").css("font-family", family );
  $(".font-selected").text( family );
  $(".font-selected").css("font-family", family);
  

    
  
 if ($(this).hasClass("serif")){
 var type = 'serif';}
  
  if ($(this).hasClass("sans-serif")){
 var type = "'sans serif'";}
  
  if ($(this).hasClass("cursive")){
 var type = 'cursive';}
  
  

   if ($(this).hasClass("google")){
     $(".font-family").html("<b>font-family:</b>" + "'" +family +"'" + "," +type+";");
     
 $(".import").html("@import url(http://fonts.googleapis.com/css?family="+familyPlus+");");

   }
  
  
    if (! $(this).hasClass("google")){
     $(".font-family").html("<b>font-family:</b>" + "'" +family +"'" + "," +type+";");
     
 $(".import").html("");

   }
  
  

});



$(".font-selected").click( function () {
$(".fonts").toggleClass( "active");
  $(".code").removeClass( "active");
  $(".btn-code").removeClass( "active-btn");
 });

$(".btn-code").click( function () {
 $(".code").toggleClass( "active");
   $(".fonts").removeClass( "active");
 $(".btn-code").toggleClass( "active-btn");
});


$(".close").click( function () {
 $(".fonts").removeClass( "active");
});


$(".text").focus( function () {
{$(".text label").css("display", "none");}
  });



















var num = 8;
var array = [];
var angle;

for(var i = 0; i < num + 1; i++) {
	array.push(i*(360/num));
}

//console.log(array);

Draggable.create("#knob", {
	type: "rotation",
	onDrag: function() {
		angle = $("#knob")[0]._gsTransform.rotation;

		if (angle < 0) angle += 360;
		else if (angle > 360) angle -= 360;
		else if (angle == 360) angle = 360;
		//console.log("ANGLE:", angle);
	},
	onDragEnd: function() {
		TweenMax.to("#knob", .1, {rotation:closest(array, angle) + "_short"});
 $("input").trigger("change");
	}
     
            
});

function closest(array, num, ans) {
	var i = 0;
	var minDiff = 1000;
	var ans;
	for(i in array) {
		var m = Math.abs(num-array[i]);
		if(m < minDiff){
			minDiff = m;
			ans = array[i];
		}
	}
  
    $(".knob-degree").text( ans + 'º'); 
	return ans;
 
  
}

style.css

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@import url(http://fonts.googleapis.com/css?family=Lato|Sansita+One|Quintessential|Courgette|Creepster|Fredoka+One|Nosifer|Nova+Cut|Fugaz+One|Black+Ops+One|Sniglet|Poller+One|Trade+Winds|UnifrakturCook|Passero+One|Racing+Sans+One|Kavoon|Sonsie+One|Vampiro+One|Audiowide|Luckiest+Guy|Bangers);


body{margin:0;}

.text label{ border:solid 1px #333; padding:5px 15px; border-radius:10px; position: absolute; background: rgba(0, 0, 0, .2); 
margin:0 auto; font-size:13px; line-height:16px; top:-40px; font-family: Lato, helvetoca, arial; text-shadow:0 0 0 !important; }

.text label:after{content:""; border:solid 10px; border-color: #333 transparent transparent transparent; width: 0; height: 0; position: absolute; bottom:-20px; left:0; right: 0; margin:auto;}



aside{background: #323F4C; width:240px; padding:0 0 30px 0;  position:absolute; top:0; bottom:0;  overflow:auto; font-family: 'Lato', sans-serif;  font-weight: 100; z-index:9;}

.group{margin:0 auto;  width:200px; border:1px  #fff; overflow:hidden; position:relative;}

h2{font-size:16px; color: rgba(255, 255, 255, .5); font-weight: 100;}
#long + p{font-size:34px; text-align: center; margin:30px 0 10px 0}

/*---------------------------------------------------
top
-----------------------------------------------------*/

#top{ width:100%; background:#232323; position: relative;}
#top h1{font-family: 'Sansita One'; font-size:26px; overflow:hidden; color:#fff; line-height:80px; margin:0;text-align:center; 

  
  
 text-shadow: 93px 93px 0px #111, 92px 92px 0px #111, 91px 91px 0px #111, 90px 90px 0px #111, 89px 89px 0px #111, 88px 88px 0px #111, 87px 87px 0px #111, 86px 86px 0px #111, 85px 85px 0px #111, 84px 84px 0px #111, 83px 83px 0px #111, 82px 82px 0px #111, 81px 81px 0px #111, 80px 80px 0px #111, 79px 79px 0px #111, 78px 78px 0px #111, 77px 77px 0px #111, 76px 76px 0px #111, 75px 75px 0px #111, 74px 74px 0px #111, 73px 73px 0px #111, 72px 72px 0px #111, 71px 71px 0px #111, 70px 70px 0px #111, 69px 69px 0px #111, 68px 68px 0px #111, 67px 67px 0px #111, 66px 66px 0px #111, 65px 65px 0px #111, 64px 64px 0px #111, 63px 63px 0px #111, 62px 62px 0px #111, 61px 61px 0px #111, 60px 60px 0px #111, 59px 59px 0px #111, 58px 58px 0px #111, 57px 57px 0px #111, 56px 56px 0px #111, 55px 55px 0px #111, 54px 54px 0px #111, 53px 53px 0px #111, 52px 52px 0px #111, 51px 51px 0px #111, 50px 50px 0px #111, 49px 49px 0px #111, 48px 48px 0px #111, 47px 47px 0px #111, 46px 46px 0px #111, 45px 45px 0px #111, 44px 44px 0px #111, 43px 43px 0px #111, 42px 42px 0px #111, 41px 41px 0px #111, 40px 40px 0px #111, 39px 39px 0px #111, 38px 38px 0px #111, 37px 37px 0px #111, 36px 36px 0px #111, 35px 35px 0px #111, 34px 34px 0px #111, 33px 33px 0px #111, 32px 32px 0px #111, 31px 31px 0px #111, 30px 30px 0px #111, 29px 29px 0px #111, 28px 28px 0px #111, 27px 27px 0px #111, 26px 26px 0px #111, 25px 25px 0px #111, 24px 24px 0px #111, 23px 23px 0px #111, 22px 22px 0px #111, 21px 21px 0px #111, 20px 20px 0px #111, 19px 19px 0px #111, 18px 18px 0px #111, 17px 17px 0px #111, 16px 16px 0px #111, 15px 15px 0px #111, 14px 14px 0px #111, 13px 13px 0px #111, 12px 12px 0px #111, 11px 11px 0px #111, 10px 10px 0px #111, 9px 9px 0px #111, 8px 8px 0px #111, 7px 7px 0px #111, 6px 6px 0px #111, 5px 5px 0px #111, 4px 4px 0px #111, 3px 3px 0px #111, 2px 2px 0px #111, 1px 1px 0px #111;

}

#top >span{ position:absolute; bottom:0; color:#fff; font-size:11px; text-align:right; width: 95%; color:#aaa; font-weight:300;line-height:21px}
/*---------------------------------------------------
Range
-----------------------------------------------------*/

/* Desperate to remove focus outline in firefox */
::-moz-focus-inner {
  outline:0;
}

:focus {
  outline:0;
}




#long {
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
  float:right;
}


/* 
  Declarations get duplicated because an invalid selector
  invalidates the entire declaration block
*/


#long::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
}


#long::-moz-range-thumb {
  cursor: pointer;
}


#long {
  border-radius: 0px;
  border: 1px solid #a5a8a8;
  background: rgba(0,0,0,.5);
  height: 1rem;
  border-radius: 0;
  box-shadow: inset 0 2px 1px rgba(0,0,0,.1);
}


#long::-moz-range-track {
  border-radius: 0;
  border: 1px solid #a5a8a8;
  background: rgba(0,0,0,.5);
  height: 1rem;
  border-radius: 0px;
}

#long {
  height: 14px;
}

#long::-moz-range-track {
  height: 14px;
}

/* 
  Declarations get duplicated because an invalid selector
  invalidates the entire declaration block
*/


#long::-webkit-slider-thumb {
  height: 26px;
  width: 26px;
  border: 1px solid rgba(0,0,0,0.36);
  border-radius: 0px;
  background:url("http://db.tt/q5LHtPKx") center center no-repeat #e5e9e8;
  background-size: 7px 18px;
  box-shadow: inset 0 1px white;
}

#long::-webkit-slider-thumb {
  height: 26px;
  width: 26px;
  background: #e5e9e8;
  border-radius:0px;
}


#long::-moz-range-thumb {
  height: 26px;
  width: 26px;
  border: 1px solid rgba(0,0,0,0.36);
  border-radius: 0px; 
  background:url("http://db.tt/q5LHtPKx") center center no-repeat #e5e9e8;
  background-size: 7px 18px;
  box-shadow: inset 0 1px white;
}

#long::-moz-range-thumb {
  height: 26px;
  width: 26px;
  background: #e5e9e8;
  border-radius:0px;
}



/*
  Active state
*/

input[type=range]:active::-webkit-slider-thumb {
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

input[type=range]:active::-moz-range-thumb {
  border: 1px solid #0940fd;
  box-shadow: 0 0 0 2px #6fb5f1;
}

#long{ display:; margin: 18px 25px; padding:0px 0; float:left;  width:150px}




/*---------------------------------------------------
body
-----------------------------------------------------*/
.text{ margin:auto; top:0; right:0; bottom:0; left:0; position:fixed; height:100px; line-height: 100px;text-align: center; font-size: 68px; font-family: 'Sansita One'; padding-left:240px; color:#ccc; }




/*---------------------------------------------------
colors
-----------------------------------------------------*/
.groupcolor{  overflow:hidden; position:relative; margin:10px 0 15px 15px; height:42px }

.colorInput{height:40px; line-height:40px; margin:0; width:0px; padding:0 0 0 40px; border:1px solid #666; transition: all .3s linear; -webkit-transition: all .3s linear; text-indent:5px; border-radius:4px; }
.colorP:hover + .colorInput, .colorInput:hover{ width:140px;}




.colorP{float:left; width:0;height:40px; position:relative; }
.colorP:after{content:''; position:absolute; width:34px; height:34px; left:3px; top:3px; display:block; border:1px solid #666; background: #09c; border-radius:3px;}


.colorInput + label{ line-height:40px; font-weight: 300; opacity:.8; }

.g1{ color:rgba(255, 255, 255, .5);  font-size:11px; position:fixed; bottom:-22px; text-decoration:none; left:0; z-index:99; line-height:21px;
background:#232323; width:240px; line-height:26px; text-indent:20px;}




.Bbcolori:after{background:#c33;}
.textcolori:after{background:#fff;}
.textShadowColor:after{background:#232323;}
.text{color:#fff}
body{background:#c33;   overflow:hidden;}










.fonts{background: #232323; width:240px; padding:0 0px;  position:absolute; left:0px; top:0; bottom:0;   font-family: 'Lato', sans-serif;  font-weight: 100; z-index:3; transition:all .5s linear; overflow:hidden; border-left:1px solid #000 }


.font-selected, .close{color:#fff; font-size:21px; line-height:30px; cursor: pointer;}
.font-selected{ font-family:Sansita One; border:1px solid rgba(0, 0, 0, .3); padding:3px 5px}
.fonts .close{top: 30px; right: 20px; position: absolute; line-height:21px;}

.fonts ul{padding:0px  20px; margin: 0; width: 200px; list-style:none; overflow:scroll; height: calc(100% - 90px)}
.fonts .family{padding:0; margin:5px 0;   height: 30px; line-height:30px; font-size:21px; color:#fff; cursor:pointer }

.active{left: 240px !important;}
.active-btn{background: #333 !important;}

.fonts h2{ margin:0;line-height:80px; width: 100%; text-indent:20px;box-shadow: 0 3px 3px #000}



.code{background:  #232323;; width:360px; padding:0 0px;  position:absolute; left:-200px; top:0; bottom:0;   font-family: 'Lato', sans-serif;  font-weight: 100; z-index:3; transition:all .5s linear; overflow:scroll ;border-left:1px solid #000}

.code pre{width: 100%;}

.import,.font-family, .codeshadow{width:300px; margin:10px; font-weight:400; font-size:13px; color:#ccc }






.btn-code{ width: 100%; height: 50px; line-height:50px; background: #c33; text-align:center; margin-top:20px; cursor:pointer; color:#fff;}










/*---------------------------------------------------
knob
-----------------------------------------------------*/
.knob-out{width: 120px; height: 120px; display:block; margin:0 auto; position: relative;}

#knob{width: 100%; height: 100%; background: rgba(255, 255, 255, .1);
border-radius:50%; position: relative; cursor:pointer;



 box-shadow:inset 0 0 0 4px #000, inset 0 0 0 8px rgba(0, 0, 0, .4);}


#knob:after{content: ''; width: 8px; height: 8px; background: #c33; position: absolute; top: 12px; left: 0; right: 0; margin:auto; border-radius:50%; box-shadow: 0 0 0 1px } 


.knob-degree{position: absolute; top: 0; bottom: 0; left: 0; right:0; margin:auto; width: 50px; height: 50px; text-align:center; line-height:50px; font-size:21px; font-weight:300;}