Shade - Shadow Mixin

Developer
Hugo DarbyBrown
Size
9,364 Kb
Views
32,384
  1. Shade - Shadow Mixin Previews
  2. Shade - Shadow Mixin HTML Codes
  3. Shade - Shadow Mixin CSS Codes
  4. Shade - Shadow Mixin JS Codes

How do I make an shade - shadow mixin?

Using degrees to specify shadow direction. What is a shade - shadow mixin? How do you make a shade - shadow mixin? This script and codes were developed by Hugo DarbyBrown on 09 August 2022, Tuesday.

Shade - Shadow Mixin Previews
IQ Test

Shade - Shadow Mixin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shade - Shadow Mixin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Russo+One'>
<link rel='stylesheet prefetch' href='css/f179d14c2abbc7184a84c52bf.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "compass/css3";
@mixin shade($type, $color: #3498db, $depth: 20, $angle: 135deg, $long: false, $fade: false) { $angle: ($angle - 90); $x: 1.5 * cos($angle) + 0px; $y: 1.5 * sin($angle) + 0px; $darken: (lightness($color)/$depth)/2; $opacify: 0; $shadow: (); @if $long == true{ $darken:0; } @if $fade == true { $opacify: (opacity($color)/$depth) ;
// added this for rendering in some browsers, remove if you like. @include translateZ(0); } @for $i from 1 through $depth { $shadow: $shadow, $i*$x $i*$y 0 hsla(hue($color) , saturation($color), (lightness($color) - ($i * $darken)), 1 - ($i * $opacify)); } #{$type}-shadow: $shadow; }
/* =============================================== That's all there is to the mixin :)
================================================= */
html { background: #34495e; font-family: Futura, "Trebuchet MS", Arial, sans-serif; text-align: center;
}
header { margin: 0 auto; width: 22em; }
h1 { color: #fff; font-family: 'Russo One', sans-serif; font-size: 100px; margin-top: 0.5em;
}
h3 { background: #fff; color: #34495e; font-weight: 400; margin: -3.5em auto 0; margin-top: -3.5em; padding: 0.1em 0; position: relative; width: 19em; &:after, &:before { content: ' * * * '; top: 0.4em; position: absolute; } &:after { right: 0.6em; } &:before { left: 0.6em; }
}
header:hover > h3 { animation: 1s hover-box linear infinite;
}
header:hover > h1 { animation: 1s hover-text linear infinite; } .ribbon { display: none; @include bp(brian) { display: block; } }
%demo-boxes { background: rgba(black,0.08); border-radius: 1em; box-shadow: inset 1px 1px 2px rgba(black,0.3); color: #fff; margin: 3em auto; max-width: 60em; padding: 1em; }
h2 { color: #fff; font-family: 'Russo One', sans-serif; font-size: 2em; margin: 0;
}
.text3d { @extend %demo-boxes; h4 { color: #fff; @include shade(text); font-family: 'Russo One', sans-serif; font-size: 8em; margin: 0.2em 0; }
}
.longshadows { @extend %demo-boxes;
div { @include shade(box, #2b3c4e, 50, 227deg, true); border-radius: 1em; display: inline-block; height: 8em; margin: 3em; overflow: hidden; text-align: center; width: 8em;
}
[class*="icon-"]{ font-size: 5em; line-height: 1.5;
}
.star { background: #8e44ad; }
.icon-star { color: #fff; @include shade(text, #703688, 50, 227deg, true);
}
.thumb { background: #3498db; }
.icon-thumbs-up { color: #fff; @include shade(text, #217dbb, 50, 227deg, true);
}
.dribbble { background: #ea4c89; }
.icon-dribbble { color: #fff; @include shade(text, #ba1655, 50, 227deg, true);
}
.dollar { background: #2ecc71; }
.icon-usd { color: #fff; @include shade(text, #27ae60, 70, 227deg, true, true);
}
} .angle-box { @extend %demo-boxes; overflow: hidden; div { background: #3498db; @include shade(box, #2b3c4e, 150, 156deg, true); height: 8em; margin: 4em auto 5em; max-width: 28em; overflow: hidden; } h4 { color: #fff; @include shade(text,#196090, 90, 156deg, true); font-family: 'Russo One', sans-serif; font-size: 4em; line-height: 1.7; margin: 0.2em 0; } }
.fade-box { @extend %demo-boxes; overflow: hidden; div { background: #e67e22; @include shade(box, #2b3c4e, 50, 190deg, true, true); height: 8em; margin: 4em auto 5em; max-width: 28em; overflow: hidden; } h4 { color: #fff; @include shade(text, #d35400, 50, 190deg, true, true); font-family: 'Russo One', sans-serif; font-size: 4em; line-height: 1.7; margin: 0.2em 0; } }
footer { color: #fff; font-family: 'Russo One', sans-serif; font-size: 1.5em; margin-bottom: 2em; a { color: #fff; }
}
// Animation Keyframes
@keyframes hover-text { 0%, 100% { @include shade(text, #2980b9, 15, 45deg, true); } 25% { @include shade(text, #2980b9, 15, 135deg, true); } 50% { @include shade(text, #2980b9, 15, 225deg, true); } 75% { @include shade(text, #2980b9, 15, 315deg, true); } }
@keyframes hover-box { 0%, 100% { @include shade(box, #2980b9, 15, 45deg, true); } 25% { @include shade(box, #2980b9, 15, 135deg, true); } 50% { @include shade(box, #2980b9, 15, 225deg, true); } 75% { @include shade(box, #2980b9, 15, 315deg, true); } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href="https://github.com/DarbyBrown/Shade"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s.cdpn.io/31787/forkme_right_blue.png" alt="Fork me on GitHub" class="ribbon"></a> <header>
<h1>SHADE</h1>
<h3>The Ultimate Shadow Mixin</h3>
</header>
<div class="text3d"> <h2>Standard Usage</h2> <p>To get up and running with Shade, all you need to do is @include shade(text) or @include shade(box) and you will get the default arguments, the results are below. The next two variables are color and depth, use like this: <code> @include shade(text, #d35400, 50);</code> </p> <h4>FUNKY TEXT</h4>
</div>
<div class="longshadows" id="long"> <h2>Long Shadows</h2> <p>I've heard these are all the rage at the moment. So I've added an optional variable, <code>$long</code>. Just pass <code>$long: true</code> to the mixin and you're all set to go, creating trendy, long casting shadows. e.g. <code>@include shade(text, blue, $long: true);</code> or <code>@include shade(box, blue, $long: true);</code> </p> <div class="star"> <i class="icon-star"></i> </div> <div class="thumb"> <i class="icon-thumbs-up"></i> </div> <div class="dribbble"> <i class="icon-dribbble"></i> </div> <div class="dollar"> <i class="icon-usd"></i> </div>
</div>
<div class="angle-box" id="angle"> <h2>Angle Variable</h2> <p>Using Compass's built in Cos and Sin functions, Shade has the capabilities to choose the direction of the shadow by just using degrees. To change the default angle of 135deg, pass the variable <code>$angle</code> to the mixin e.g. <code>@include shade(#2b3c4e, $angle: 156deg);</code></p> <div><h4>SHADOW</h4></div>
</div>
<div class="fade-box" id="angle"> <h2>Fade Variable</h2> <p>The final variable is <code>$fade</code> which fades out the shadow, instead of a clean cut. To use this pass <code>$fade: true </code> to the mixin. A full usage mixin would be like this <code>@include shade(text, #d35400, 50, 156deg, true, true);</code></p> <div><h4>FADE</h4></div>
</div> <footer> Handcrafted by <a href="http://darbybrown.com">Hugo Darby-Brown</a> &copy; 2013 </footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shade - Shadow Mixin - Script Codes CSS Codes

@import "compass/css3";
@mixin shade($type, $color: #3498db, $depth: 20, $angle: 135deg, $long: false, $fade: false) { $angle: ($angle - 90); $x: 1.5 * cos($angle) + 0px; $y: 1.5 * sin($angle) + 0px; $darken: (lightness($color)/$depth)/2; $opacify: 0; $shadow: (); @if $long == true{ $darken:0; } @if $fade == true { $opacify: (opacity($color)/$depth) ;
// added this for rendering in some browsers, remove if you like. @include translateZ(0); } @for $i from 1 through $depth { $shadow: $shadow, $i*$x $i*$y 0 hsla(hue($color) , saturation($color), (lightness($color) - ($i * $darken)), 1 - ($i * $opacify)); } #{$type}-shadow: $shadow; }
/* =============================================== That's all there is to the mixin :)
================================================= */
html { background: #34495e; font-family: Futura, "Trebuchet MS", Arial, sans-serif; text-align: center;
}
header { margin: 0 auto; width: 22em; }
h1 { color: #fff; font-family: 'Russo One', sans-serif; font-size: 100px; margin-top: 0.5em;
}
h3 { background: #fff; color: #34495e; font-weight: 400; margin: -3.5em auto 0; margin-top: -3.5em; padding: 0.1em 0; position: relative; width: 19em; &:after, &:before { content: ' * * * '; top: 0.4em; position: absolute; } &:after { right: 0.6em; } &:before { left: 0.6em; }
}
header:hover > h3 { animation: 1s hover-box linear infinite;
}
header:hover > h1 { animation: 1s hover-text linear infinite; } .ribbon { display: none; @include bp(brian) { display: block; } }
%demo-boxes { background: rgba(black,0.08); border-radius: 1em; box-shadow: inset 1px 1px 2px rgba(black,0.3); color: #fff; margin: 3em auto; max-width: 60em; padding: 1em; }
h2 { color: #fff; font-family: 'Russo One', sans-serif; font-size: 2em; margin: 0;
}
.text3d { @extend %demo-boxes; h4 { color: #fff; @include shade(text); font-family: 'Russo One', sans-serif; font-size: 8em; margin: 0.2em 0; }
}
.longshadows { @extend %demo-boxes;
div { @include shade(box, #2b3c4e, 50, 227deg, true); border-radius: 1em; display: inline-block; height: 8em; margin: 3em; overflow: hidden; text-align: center; width: 8em;
}
[class*="icon-"]{ font-size: 5em; line-height: 1.5;
}
.star { background: #8e44ad; }
.icon-star { color: #fff; @include shade(text, #703688, 50, 227deg, true);
}
.thumb { background: #3498db; }
.icon-thumbs-up { color: #fff; @include shade(text, #217dbb, 50, 227deg, true);
}
.dribbble { background: #ea4c89; }
.icon-dribbble { color: #fff; @include shade(text, #ba1655, 50, 227deg, true);
}
.dollar { background: #2ecc71; }
.icon-usd { color: #fff; @include shade(text, #27ae60, 70, 227deg, true, true);
}
} .angle-box { @extend %demo-boxes; overflow: hidden; div { background: #3498db; @include shade(box, #2b3c4e, 150, 156deg, true); height: 8em; margin: 4em auto 5em; max-width: 28em; overflow: hidden; } h4 { color: #fff; @include shade(text,#196090, 90, 156deg, true); font-family: 'Russo One', sans-serif; font-size: 4em; line-height: 1.7; margin: 0.2em 0; } }
.fade-box { @extend %demo-boxes; overflow: hidden; div { background: #e67e22; @include shade(box, #2b3c4e, 50, 190deg, true, true); height: 8em; margin: 4em auto 5em; max-width: 28em; overflow: hidden; } h4 { color: #fff; @include shade(text, #d35400, 50, 190deg, true, true); font-family: 'Russo One', sans-serif; font-size: 4em; line-height: 1.7; margin: 0.2em 0; } }
footer { color: #fff; font-family: 'Russo One', sans-serif; font-size: 1.5em; margin-bottom: 2em; a { color: #fff; }
}
// Animation Keyframes
@keyframes hover-text { 0%, 100% { @include shade(text, #2980b9, 15, 45deg, true); } 25% { @include shade(text, #2980b9, 15, 135deg, true); } 50% { @include shade(text, #2980b9, 15, 225deg, true); } 75% { @include shade(text, #2980b9, 15, 315deg, true); } }
@keyframes hover-box { 0%, 100% { @include shade(box, #2980b9, 15, 45deg, true); } 25% { @include shade(box, #2980b9, 15, 135deg, true); } 50% { @include shade(box, #2980b9, 15, 225deg, true); } 75% { @include shade(box, #2980b9, 15, 315deg, true); } }

Shade - Shadow Mixin - Script Codes JS Codes

/* Requires Compass!
Shade - The shadow mixin that lets you specify shadow direction by angle
If you'd like to make this Mixin better, get involved https://github.com/DarbyBrown/Shade
If you don't use compass, you could use the following function:
Created by Jelmer Borst - https://twitter.com/japborst
$pi: 3.14159265359;
@function pow($base,$exp){	$value: $base;	@if $exp > 1{	@for $i from 2 through $exp{	$value: $value * $base;	}	}	@if $exp < 1{	@for $i from 0 through -$exp{	$value: $value / $base;	}	}	@return $value;
}
@function fact($val){	$value: 1;	@if $val > 0{	@for $i from 1 through $number{	$value: $value * $i;	}	}
}
@function sin($angle, $degrees: false){	$sin: 0	@if $degrees{	$degrees: $degrees / 180 * $pi;	}	@for $n from 1 through 10{	$sin: $sin + ( pow(-1,n) / fact(2n+1) ) * pow($angle,(2n+1));	}	@return $sin;
}
@function cos($angle, $degrees: false){	$cos: 0	@if $degrees{	$degrees: $degrees / 180 * $pi;	}	@for $n from 1 through 10{	$cos: $cos + ( pow(-1,n) / fact(2n) ) * pow($angle,2n);	}	@return $cos;
}
*/
Shade - Shadow Mixin - Script Codes
Shade - Shadow Mixin - Script Codes
Home Page Home
Developer Hugo DarbyBrown
Username hugo
Uploaded August 09, 2022
Rating 4.5
Size 9,364 Kb
Views 32,384
Do you need developer help for Shade - Shadow Mixin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hugo DarbyBrown (hugo) Script Codes
Name
Iron Man Login Form
Animated Submit Button
Animated Navicons
Concept mobile navigation
Roll Over Social Buttons
DNA Double Helix
Animated Atom Logo
Mixer MKII
A.X.E - LumberJack single page Site
Scroll Overflow Menu
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!