Material Shadows

Developer
John Heiner
Size
2,961 Kb
Views
14,168
  1. Material Shadows Previews
  2. Material Shadows HTML Codes
  3. Material Shadows CSS Codes
  4. Material Shadows JS Codes

How do I make an material shadows?

What is a material shadows? How do you make a material shadows? This script and codes were developed by John Heiner on 14 November 2022, Monday.

Material Shadows Previews
IQ Test

Material Shadows - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Shadows</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="boxes">	<div class="box z0">z = 0</div>	<div class="box z1">z = 1</div>	<div class="box z2">z = 2</div>	<div class="box z3">z = 3</div>	<div class="box z4">z = 4</div>	<div class="box z5">z = 5</div>	</div>
</div>
<hr>
<div class="container">	<div class="boxes">	<a href="#" class="box z0">link = 0</a>	<a href="#" class="box z1">link = 1</a>	<a href="#" class="box z2">link = 2</a>	<a href="#" class="box z3">link = 3</a>	<a href="#" class="box z4">link = 4</a>	<a href="#" class="box z5">link = 5</a>	</div>
</div>
<hr>
<div class="container">	<div class="boxes">	<div class="box js-box">Animated</div>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material Shadows - Script Codes CSS Codes

html, body { background: #f0f0f0; font-weight: 500; font-size: 10px; color: #aaa; text-align: center;
}
a { font-size: 10px; color: #aaa; text-decoration: none;
}
hr { clear: both; border: 0; height: 1px; background: #ddd;
}
.container { float: right; position: relative; left: -50%;
}
.boxes { position: relative; left: 50%;
}
.box { width: 100px; height: 100px; display: block; background: white; float: left; margin: 50px 16px; padding: 16px; box-sizing: border-box; border-radius: 4px;
}
div.z1 { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
div.z2 { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}
div.z3 { box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3), 0 7px 7px 0 rgba(0, 0, 0, 0.19);
}
div.z4 { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.3), 0 14px 12px 0 rgba(0, 0, 0, 0.17);
}
div.z5 { box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
}
a.z0, a.z1, a.z2, a.z3, a.z4, a.z5 { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); transition: all 275ms; background: #f5f5f5;
}
a.z0:hover, a.z1:hover, a.z2:hover, a.z3:hover, a.z4:hover, a.z5:hover { background: #fff; border: 0;
}
a.z1:hover { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
a.z2:hover { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}
a.z3:hover { box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3), 0 7px 7px 0 rgba(0, 0, 0, 0.19);
}
a.z4:hover { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.3), 0 14px 12px 0 rgba(0, 0, 0, 0.17);
}
a.z5:hover { box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
}
/*.js-box{	transition: all 450ms ease-out;
}*/

Material Shadows - Script Codes JS Codes

var $box = $('.js-box');
var tl = new TimelineMax({	repeat: -1,	repeatDelay: 2,	yoyo: true
});
tl
.to($box, 0.65, {className:'+=z0', ease: Power2.easeOut})
.set($box, {className:'-=z0', ease: Power2.easeOut})
.to($box, 0.65, {className:'+=z1', ease: Power2.easeOut})
.to($box, 0.65, {className:'+=z2', ease: Power2.easeOut})
.set($box, {className:'-=z1', ease: Power2.easeOut})
.to($box, 0.65, {className:'+=z3', ease: Power2.easeOut})
.set($box, {className:'-=z2', ease: Power2.easeOut})
.to($box, 0.65, {className:'+=z4', ease: Power2.easeOut})
.set($box, {className:'-=z3', ease: Power2.easeOut})
.to($box, 0.65, {className:'+=z5', ease: Power2.easeOut})
.set($box, {className:'-=z4', ease: Power2.easeOut});
Material Shadows - Script Codes
Material Shadows - Script Codes
Home Page Home
Developer John Heiner
Username johnheiner
Uploaded November 14, 2022
Rating 3
Size 2,961 Kb
Views 14,168
Do you need developer help for Material Shadows?

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!

John Heiner (johnheiner) Script Codes
Name
Logo Animation
Rounded Triangle
Page Transition with Loader
Unboxed Technology Footer Animation
Tooltip
A Pen by John Heiner
Loading Animation
Image Hover
Breaking Lists at specific points without floats.
Canvas Mask Page Intro Animation
Create amazing art & images 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!