Google Material Design

Developer
Sarah Drasner
Size
4,623 Kb
Views
14,168
  1. Google Material Design Previews
  2. Google Material Design HTML Codes
  3. Google Material Design CSS Codes
  4. Google Material Design JS Codes

How do I make an google material design?

I've seen a lot about Material Design lately. I thought I would try my hand at working with some of the parameters specified in their specs, making some of the dos and don'ts work in the browser.. What is a google material design? How do you make a google material design? This script and codes were developed by Sarah Drasner on 03 December 2022, Saturday.

Google Material Design Previews
IQ Test

Google Material Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Material Design</title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,300italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.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! */ html { background: #eee; font-family: "Roboto", sans-serif;
}
h1 { color: #03A9F4; font-weight: 500; font-size: 35px; text-align: center;
}
a { color: #03A9F4; font-style: italic;
}
h2 { color: #03A9F4; font-weight: 500; margin-top: 5px; margin-bottom: 8px;
}
p { font-weight: 300; margin-top: 0px; line-height: 1.5em;
}
[class*="dialog-"] { width: 250px; position: absolute; top: 20px; left: 20px; background: #e0e0e0; padding: 25px 30px; opacity: 0;
}
[class*="placard-"] { position: absolute; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: #fff; text-align: center;
}
[class*="placard-"] h1, [class*="placard-"] p { margin-top: 100px;
}
.placard-2 { opacity: 0;
}
.container { width: 400px; margin: 0 auto; display: table; margin-top: 15px;
}
button { background: #03A9F4; border-radius: 5px; color: #fff; font-weight: 500; padding: 5px 8px; text-align: center; -webkit-appearance: none; text-shadow: none; box-shadow: none; letter-spacing: 0.04em; border: none;
}
button:focus { outline: none;
}
.white { background: white; width: 100%; height: 75px; margin-top: 20px; box-shadow: 0px 2px 2px 1px #dbdbdb; transform: translateZ(0);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="white one"></div> <div class="white two"></div> <div class="white three"></div>
</div>
<div class="dialog-1"> <h2>Transforming material</h2> <p>Sheets of material can join together to become a single sheet of material.</p>
</div>
<div class="dialog-2"> <p>Material can be spontaneously generated or destroyed anywhere in the environment.</p>
</div>
<div class="dialog-3"> <p>When split, material can heal. For example, if you remove a portion of material from a sheet of material, the sheet of material will become a whole sheet again.</p>
</div>
<div class="dialog-4"> <h2>Movement of material</h2> <p>Material can move along any axis.</p>
</div>
<div class="placard-1"> <h1>Google Material Design</h1>
</div>
<div class="placard-2"> <p>More information here:<br> <a href="https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties" target="_blank">What is material> Material properties</a> </p> <button id="replay">REPLAY</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Google Material Design - Script Codes CSS Codes

html { background: #eee; font-family: "Roboto", sans-serif;
}
h1 { color: #03A9F4; font-weight: 500; font-size: 35px; text-align: center;
}
a { color: #03A9F4; font-style: italic;
}
h2 { color: #03A9F4; font-weight: 500; margin-top: 5px; margin-bottom: 8px;
}
p { font-weight: 300; margin-top: 0px; line-height: 1.5em;
}
[class*="dialog-"] { width: 250px; position: absolute; top: 20px; left: 20px; background: #e0e0e0; padding: 25px 30px; opacity: 0;
}
[class*="placard-"] { position: absolute; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: #fff; text-align: center;
}
[class*="placard-"] h1, [class*="placard-"] p { margin-top: 100px;
}
.placard-2 { opacity: 0;
}
.container { width: 400px; margin: 0 auto; display: table; margin-top: 15px;
}
button { background: #03A9F4; border-radius: 5px; color: #fff; font-weight: 500; padding: 5px 8px; text-align: center; -webkit-appearance: none; text-shadow: none; box-shadow: none; letter-spacing: 0.04em; border: none;
}
button:focus { outline: none;
}
.white { background: white; width: 100%; height: 75px; margin-top: 20px; box-shadow: 0px 2px 2px 1px #dbdbdb; transform: translateZ(0);
}

Google Material Design - Script Codes JS Codes

TweenMax.ticker.fps(60);
var $one = $(".one"), $two = $(".two"), $three = $(".three"), $all = $(".one", ".two", ".three") $white = $(".white"), $container = $(".container");
// the first scene
function sceneOne() { var tl = new TimelineMax(); tl.to( $(".placard-1"), 1.5, {opacity:0, ease:Power2.easeOut}, "+=1") .to( $(".dialog-1"), 1.25, {opacity:1, ease:Power2.easeOut}) .staggerTo( $white, 1, {scale:0.9, ease:Back.easeOut}, 0.1, "+=0.5") .add("together", "-=0.5") .to( $one, 1, {y:30, ease:Back.easeOut}, "together") .to( $three, 1, {y:-30, ease:Back.easeOut}, "together") .to( $white, 1, {scaleY:2, scaleX:0.8, ease:Back.easeOut}, "together+=1") .to( $(".dialog-1"), 1, {opacity:0, ease:Power2.easeOut}) .add("cS") .to( $(".dialog-2"), 1, {opacity:1, ease:Power2.easeOut}, "cs") .to( $container, 0.75, {scale:0, ease:Power4.easeOut}, "cs+=1") .to( $container, 0.75, {scale:1, ease:Circ.easeIn}, "cs+=2.25") .to( $(".dialog-2"), 1, {opacity:0, ease:Power2.easeOut}, "cs+=3"); tl.add("fliparound", "+=1.5") .to( $(".dialog-3"), 1.5, {opacity:1, ease:Power2.easeOut}) .to( $white, 1, {scaleY:1, scaleX:1, ease:Back.easeOut}, "fliparound") .to( $two, 0.3, {css: {boxShadow: "0px 2px 2px 1px rgba(219, 219, 219, 0.8)"}, ease:Back.easeOut}, "fliparound+=1") .to( $two, 1.7, {y:-85, ease:Power2.easeOut}, "fliparound+=1.3") .to( $one, 2, {y:85, ease:Power2.easeOut}, "fliparound+=1.3") .to( $two, 0.2, {y:-82, css: {boxShadow: "0px -1px 1px 0px rgb(219, 219, 219)"}, ease:Power4.easeOut}, "fliparound+=3") .to( $container, 0.8, {y:25, ease:Back.easeOut}, "fliparound+=3.2") .to( $white, 0.75, {scaleY:2.2, scaleX:0.8, ease:Back.easeOut}, "fliparound+=4") .to( $all, 0.1, {boxShadow: "0px 2px 2px 1px rgb(219, 219, 219)", ease:Power2.easeOut}, "fliparound+=3.7") .to( $(".dialog-3"), 1, {opacity:0, ease:Power2.easeOut}) .add("shape"); tl.to( $(".dialog-4"), 1.5, {opacity:1, ease:Power2.easeOut}, "shape+=1.2") .to( $container, 1, {scale:0.5, ease:Back.easeIn}, "shape+=3") .to( $all, 0.1, {boxShadow: "2px 0px 2px 0px rgb(219, 219, 219)", ease:Power2.easeOut}, "-=0.1") .to( $container, 1.25, {x:200, y:-10, rotation:90, ease:Back.easeOut}, "-=0.2") .to( $container, 0.7, {x:50, y:40, rotation:90, ease:Circ.easeOut}) .add("box") .to( $all, 0.1, {boxShadow: "0px 2px 2px 1px rgb(219, 219, 219)", ease:Power2.easeOut}, "box") .to( $container, 1.2, {x:0, y:0, rotation:-360, ease:Elastic.easeOut}, "box") .to( $(".dialog-4"), 1, {opacity:0, ease:Power2.easeOut}) .to( $(".placard-2"), 2, {opacity:1, ease:Power2.easeOut}, "+=1.5");	tl.timeScale(1.15); return tl;
}
var master = new TimelineMax();
master.add(sceneOne(), "scene1");
$('#replay').on('click', function(e){ e.preventDefault(); master.restart(); });
Google Material Design - Script Codes
Google Material Design - Script Codes
Home Page Home
Developer Sarah Drasner
Username sdras
Uploaded December 03, 2022
Rating 4.5
Size 4,623 Kb
Views 14,168
Do you need developer help for Google Material Design?

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!

Sarah Drasner (sdras) Script Codes
Name
Responsive Huggy Laser Panda Factory
Money Printer
React Animated Page Transitions
Sketch
Responsive GreenSock-Teaching Monster
Anagoge
Make a Party
VelocityJS and SVG Moving Isoscape
Medusa
Top 50 Codepen Users By Follower Count
Create amazing web content 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!