#main-container
// Titles
#title
h1 LONG SHADOW GENERATOR
// Values
#val-container
h3 Values
ul#values
li: label
p Length:
input#length(name="length",
type="range",
min="0",
max="1000",
step="1",
value="50"
)
p.note *Amount of pixels that the shadow should extend
li: label
p Smoothing:
input#smooth(name="smooth",
type="range",
min="0",
max="10",
step="1",
value="0"
)
p.note *determines how smooth the shadow should be (check the learn more for more info)
li: label
p Color:
input#colora.color(name="colora",
type="text",
value="#3ccec2"
)
button#link-colors.fa.fa-link(value="on",
title="Link color values"
)
input#colorb.color(name="colorb",
type="text",
value="#82FFE0")
p.note *color value, any acceptable css color system will work (rgb, hsl, hex, etc.)
li: label
p Angle:
button#angle1: .fa.fa-long-arrow-right.btn-text.btn-text1
button#angle2: .fa.fa-long-arrow-right.btn-text.btn-text2
button#angle3: .fa.fa-long-arrow-right.btn-text.btn-text3
button#angle4: .fa.fa-long-arrow-right.btn-text.btn-text4
// Copy Button
#copy-btn
button.copy Copy Code
// Example
#examples
h3 Examples
.example Lorem ipsum
// Buttons
#btn-container
button.learn-more Learn More
button.show-code Show Code
// Slide outs
#learn-more-cont(style="display: none;")
#close-learn-more.fa.fa-times.fa-2x
h3 How does it work?
p This method uses the text-shadow or box-shadow CSS attribute and iterates on it multiple times to add a sharp edged shadow for every pixel in a certain angle. This can be done either manually, using a generator such as this one, which I designed a prototype for months back for personal projects, and also a SASS mixin, which is what I finally converted to, as it's much easier. The mixin can be seen in the CSS portion of this Pen.
p A visualization of this method can be seen below:
h3 Soft Shadows
p This is a fairly simple addition, it basically just blurs more each pixel of shadow. This is a fairly finicky value, as a value of 1 will add a single pixel of blur for every shadow iteration down the line, though it can have a nice effect when used subtly.
#code-cont(style="display:none;")
#close-code.fa.fa-times.fa-2x@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400|Open+Sans+Condensed:300)
//
// FUNCTIONS
//
// LONG SHADOW
@function makelongshadow($color, $length)
$val: 0px 0px $color
@for $i from 1 through $length
$val: #{$val}, #{$i}px #{$i}px #{$color}
@return $val
//
// MIXINS
//
// LONG SHADOW
@mixin longshadow($type, $color, $length)
@if $type == "text"
text-shadow : makelongshadow($color, $length)
@if $type == "box"
box-shadow : makelongshadow($color, $length)
// VARS
$font1: "Montserrat"
$font2: "Open Sans"
$font3: "Open Sans Condensed"
$facebook : #3b5998
$soundcloud: #ff4d00
$youtube : #bb0000
$instagram : #df00b8
$twitter : #00aced
$webpage : #09649f
$bandcamp : #639aa9
// Set Default
*
font-family: $font1
margin: 0
padding: 0
button:focus
outline: 0
::-webkit-scrollbar
display: none
// Misc
.indent1
padding: 0px 20px
margin: 0
// Element Styling
html
width: 100%
height: 100%
// Main Container
#main-container
background: linear-gradient(45deg, #9bffeb, #56ffcc)
height: 100vh
overflow: hidden
// Title
#title
padding: 40px 0px
overflow: hidden
h1
text-align: center
color: white
opacity: 0.8
@include longshadow("text", desaturate(#0bffeb, 40%), 800)
// Values
#val-container
background-color: hsl(5,0%,96%)
margin-top: 0px
h3
text-align: center
color: hsl(5,0%,70%)
font-family: $font2
ul#values
padding: 10px
display: block
list-style: none
li
padding: 1px
margin: 10px 0
p:not(.btn-text)
display: inline-block
width: 100px
text-align: right
vertical-align: middle
&.note
color: lighten(black, 70%)
font-size: .8em
font-family: $font3
width: auto
padding-left: 5px
input
display: inline-block
vertical-align: middle
width: 300px
&.color
width: 132px
button:not(#link-colors)
display: inline-block
width: 30px
height: 30px
background-color: hsl(0, 0%, 60%)
border: none
border-radius: 3px
color: white
cursor: pointer
&:focus
outline: 0
.btn-text1
transform: rotate(45deg)
.btn-text2
transform: rotate(45+90deg)
.btn-text3
transform: rotate(45+180deg)
.btn-text4
transform: rotate(45+270deg)
#link-colors
position: relative
background: radial-gradient(center, #565656, #565656)
color: hsl(0,0%,70%)
border: none
border-radius: 3px
width: 20px
padding: 2px
vertical-align: middle
cursor: pointer
transition: background .5s ease, color .5s ease
&.link-colors-on
background: radial-gradient(center, #7fff90, #4b704f)
color: hsl(0,0%,100%)
// Copy button
#copy-btn
width: 113px
margin: auto // why the fuck does this work
button
background-color: rgba(255,255,255,0.3)
border: rgba(255,255,255,0.5) 1px solid
border-radius: 30px
padding: 10px 20px
// margin: auto // but this shit doesn't
margin-top: 10px
cursor: pointer
transition: background-color .5s ease
&:hover
background-color: rgba(255,255,255,0.6)
// Example
#examples
width: 598px
margin: auto
h3
text-align: center
margin-top: 20px
font-family: $font2
.example
font-size: 3em
font-weight: bold
text-align: center
color: white
transition: text-shadow .25s ease
// Buttons
#btn-container
position: absolute
bottom: 0
width: 100%
button
background-color: rgba(255,255,255,0.3)
border: rgba(255,255,255,0.5) 1px solid
border-radius: 30px
padding: 10px 20px
margin: 10px
cursor: pointer
transition: background-color .5s ease
&.show-code
float: right
&:hover
background-color: rgba(255,255,255,0.6)
// Slide out containers
#learn-more-cont, #code-cont
background: linear-gradient(90deg, #c4f2ff, #56ffcc)
width: 100%
height: 700px
.fa-times
color: white
float: right
padding: 12px
cursor: pointer
#learn-more-cont
//border-top: rgba(200,200,200,0.4) 2px solid
h3
text-align: center
background: rgba(255,255,255,0.3)
padding: 15px
border-top: rgba(255,255,255,0.5) 2px solid
border-bottom: rgba(255,255,255,0.5) 2px solid
p
padding: 10px
background: rgba(255,255,255,0.1)
#code-cont
//border-top: rgba(200,200,200,0.4) 2px solidnew Clipboard(".copy");
var xMod = "";
var yMod = "";
$(document).ready(function() {
generateShadow(); // Generate init shadow
// Link Colors Button
$("#link-colors").click(function() {
$(this).val() == "on" ? link_0() : link_1();
$(this).toggleClass("link-colors-on");
generateShadow();
})
function link_0() { // Link Button Off
$("#link-colors").val("off");
}
function link_1() { // Link Button On
$("#link-colors").val("on");
}
$("#angle1").click(function() {
xMod = "";
yMod = "";
generateShadow();
})
$("#angle2").click(function() {
xMod = "-";
yMod = "";
generateShadow();
})
$("#angle3").click(function() {
xMod = "-";
yMod = "-";
generateShadow();
})
$("#angle4").click(function() {
xMod = "";
yMod = "-";
generateShadow();
})
// Learn More Button -- Yeah, this probably isn't proper at all
$(".learn-more").click(function() {
// Slide Div
$("#learn-more-cont").slideToggle("slow");
// Animate the View to Div
$('html, body').animate({
scrollTop: $("#learn-more-cont").offset().top
}, 1000);
})
// Show Code Button -- But it works
$(".show-code").click(function() {
// Slide Div
$("#code-cont").slideToggle("slow");
// Animate the View to Div
$('html, body').animate({
scrollTop: $("#code-cont").offset().top
}, 1000);
})
// Close Buttons
$("#close-learn-more").click(function() {$("#learn-more-cont").slideToggle("slow");})
$("#close-code").click(function() {$("#code-cont").slideToggle("slow");})
$("#length").change(function() {generateShadow();});
$("#smooth").change(function() {generateShadow();});
$("#color").change(function() {generateShadow();});
})
// Generate Text-Shadow CSS
function generateShadow() {
var length = $("#length").val();
var smooth = $("#smooth").val();
var colora = $("#colora").val();
var colorb = $("#colorb").val();
var textShadowRaw = "";
// console.log("Length: " + length);
// console.log("Smooth: " + smooth);
// console.log(" Color: " + color);
var n = 0;
var increments = 100/length;
for (var n = 0; n < length; ++ n) {
var current = n + 1;
var curIncr = current * increments;
// Yeeeeaaah.. that doesn't work for some reason
if ($("#link-colors").val() == "on") {
var colorMix = $.xcolor.gradientlevel(colora, colorb, curIncr, 100);
}
else {
var colorMix = colora;
}
// console.log(colorMix);
textShadowRaw += xMod + current + "px " + yMod + current + "px 0px " + colorMix + ", ";
}
var textShadow = textShadowRaw.slice(0,-2); // Remove the last comma
// console.log(textShadow);
$(".example").css({ // Write CSS attribute
"text-shadow" : textShadow
});
}
External CSS
This Pen doesn't use any external CSS resources.