Long Shadow Effect Using CSS

The long shadow effect is common these days, its trend has bought it to reign in terms of icon and web designing making long shadows as most popular and common design element nowadays.
Despite being really popular in image and banner designing (have a look at the first image), long shadow effect still faces issues. Implementing it on a website without using images is possible but requires a geeky mind to do with just codes.

Why and Where to use it?

The long shadow effect is one of the aspects of flat designing, which is very common when it comes to the web designing. Though flat designing allows you to do a lot withing in the boundaries of simplicity but still looks flat and to give a website even more decent look we have to use it haha! kidding it's all up to you as long as it looks good and blends well with the design it can be used.

The long shadow effect can be used anywhere ranging from logo text to social media icons to a simple anchor element to glorify it (high self-esteem issues) or to make anything look catchy.

After such a long convo, let us create our own long shadow effect in our browser and begin by making a checklist of this that we'll need throughout the tutorial.

Things we'll need

  • Basic knowledge of HTML and CSS
  • Basic knowledge of JavaScript and jQuery
Tutorial

Step 1 : HTML 

In this step, we'll create an element on which our jQuery function will work to create a long shadow effect. Typically a span element with class "longshadow" would work great. 
<span class="longshadow">TheMindSpeaks</span>

Step 2: CSS

Some basic styling which includes background, color, font-size and padding are absolutely optional but don't forget to set overflow to hidden and display property to inline-block.

.longshadow {
background: rgb(0, 188, 212);
color: #fff;
font-size: 50px

padding: 50px;
display: inline-block;
overflow: hidden;

}

Step 3: jQuery

Now, this is the final part of our tutorial and is a bit geeky. Getting back on the tutorial in this step we'll create a function that will generate long shadows but the point is how the function will generate shadows. Typically long shadows are multiple differently positioned shadows of same text which can be achieved by using CSS's text-shadow property. The only work of our function is to generate values for text-shadow property
So lets being, and first we'll declare our function and will name it as longshadow. Our function will have 4 parameters
  1. $selector - jQuery selector of the element on which shadow will be applied.
  2. $color - Color of shadow unlike like real world shadows we can have colorful shadows.
  3. $xAxis - Sign of the x-axis coordinate of shadow.
  4. $yAxis - Sign of the y-axis coordinate of shadow.

So this is how our function will look like.

function longshadow($selector, $color, $xAxis, $yAxis) { }

Next inside the function, we will select the element or elements based on jQuery selectors provided by the user in first parameter i.e $selector and then we will loop through them using jQuery's each method.



Inside each() aka our loop we'll declare two most important variable namely $length and $shadow, $shadow variable will store the value for the text-shadow property but is currently as an empty string mean while $length will store the length of shadow or total number of shadows(multiple shadow). $length is set to total height of current element represented by $(this) including padding divided by 2.

Next we'll need to write a for loop which will progress by one and will execute till it gets equal to $length. Every time the loop will execute it will add new shadow value to the $shadow variable preserving the last ones by concatenating them and values will be added as follows

but this isn't over every shadow that we will define must be separated by a comma for this will add an if block which will concatenate a comma to shadow as long as loop is less than $length.

 Once loop completes we'll apply text shadow property to the element.
function longshadow($selector,$color,$xAxis,$yAxis){
$($selector).each(function(){
$length = $(this).innerHeight()/2;
$shadow='';
for($i=1;$i <= $length;$i++){
$shadow += $xAxis + $i + 'px ' + $yAxis + $i + 'px ' + $color;
if($i < $length){
$shadow += ',';
}
}
$(this).css('text-shadow',$shadow);
})
}

See the Pen vxKJXW by Sudhanshu Rathore (@sidtheangel) on CodePen.