Inverted shadow with fade

Developer
Chris Wright
Size
5,897 Kb
Views
32,384
  1. Inverted shadow with fade Previews
  2. Inverted shadow with fade HTML Codes
  3. Inverted shadow with fade CSS Codes

How do I make an inverted shadow with fade?

I'm just playing around with Martin Wolf's shadow box (http://codepen.io/martinwolf) by inverting it stretching it. Having a play with some animation.. What is a inverted shadow with fade? How do you make a inverted shadow with fade? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

Inverted shadow with fade Previews
IQ Test

Inverted shadow with fade - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inverted shadow with fade</title> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"> <div class="statement"> <h1>Simplicity</h1> <p>An inverted shadow fading at the edges, with SVG iPhone in front.</p> <a href="#">Button</a> </div>
<div class="phone">
<svg id="thePhone" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280px" height="694.58px" viewBox="0 0 280 694.58" enable-background="new 0 0 280 694.58" xml:space="preserve">
<g id="Layer_16">	<defs>	<filter id="OpacityMaskFilter" filterUnits="userSpaceOnUse" x="5.5" y="544.58" width="275" height="82">	<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>	</filter>	</defs>
<g id="Layer_19">
</g>
<g id="Layer_17">
</g>
<g id="Metal_buttons">	<path fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" d="M7.054,129.455c0,1.104-0.896,2-2,2H3.638c-1.104,0-2-0.896-2-2	v-15c0-1.104,0.896-2,2-2h1.417c1.104,0,2,0.896,2,2V129.455z"/>	<path fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" d="M7.054,177.08c0,1.104-0.896,2-2,2H3.638c-1.104,0-2-0.896-2-2	v-15c0-1.104,0.896-2,2-2h1.417c1.104,0,2,0.896,2,2V177.08z"/>	<path fill="#B7B7B7" stroke="#A8A8A8" stroke-miterlimit="10" d="M7.054,86.705c0,1.104-0.896,2-2,2H3.638c-1.104,0-2-0.896-2-2	v-22c0-1.104,0.896-2,2-2h1.417c1.104,0,2,0.896,2,2V86.705z"/>	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="199.7007" y1="-9.7534" x2="222.6996" y2="13.2455">	<stop offset="0" style="stop-color:#FFFFFF"/>	<stop offset="0.0955" style="stop-color:#E1E1E1"/>	<stop offset="0.198" style="stop-color:#C8C8C8"/>	<stop offset="0.3053" style="stop-color:#B6B6B6"/>	<stop offset="0.4194" style="stop-color:#ABABAB"/>	<stop offset="0.5517" style="stop-color:#A8A8A8"/>	<stop offset="0.5741" style="stop-color:#C0C0C0"/>	<stop offset="0.6024" style="stop-color:#D7D7D7"/>	<stop offset="0.6352" style="stop-color:#E9E9E9"/>	<stop offset="0.6745" style="stop-color:#F6F6F6"/>	<stop offset="0.727" style="stop-color:#FDFDFD"/>	<stop offset="0.8473" style="stop-color:#FFFFFF"/>	<stop offset="0.8478" style="stop-color:#FEFEFE"/>	<stop offset="0.8587" style="stop-color:#E3E3E3"/>	<stop offset="0.8711" style="stop-color:#CDCDCD"/>	<stop offset="0.8858" style="stop-color:#BCBCBC"/>	<stop offset="0.9039" style="stop-color:#B1B1B1"/>	<stop offset="0.9294" style="stop-color:#AAAAAA"/>	<stop offset="1" style="stop-color:#A8A8A8"/>	</linearGradient>	<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="211.1997" y1="0.0801" x2="211.1997" y2="3.4106">	<stop offset="0.2414" style="stop-color:#FFFFFF"/>	<stop offset="0.3019" style="stop-color:#FFFFFF"/>	<stop offset="0.6552" style="stop-color:#FFFFFF"/>	<stop offset="0.6563" style="stop-color:#FEFEFE"/>	<stop offset="0.681" style="stop-color:#E3E3E3"/>	<stop offset="0.709" style="stop-color:#CDCDCD"/>	<stop offset="0.7421" style="stop-color:#BCBCBC"/>	<stop offset="0.7831" style="stop-color:#B1B1B1"/>	<stop offset="0.8405" style="stop-color:#AAAAAA"/>	<stop offset="1" style="stop-color:#A8A8A8"/>	</linearGradient>	<rect x="189.367" y="0.58" fill="url(#SVGID_5_)" stroke="url(#SVGID_6_)" stroke-miterlimit="10" width="43.667" height="2.331"/>
<g id="Shadows_on_metal_buttons">	<rect x="1.2" y="122.969" fill="#6D6D6D" width="5.667" height="4.223"/>	<rect x="1.2" y="79.969" fill="#6D6D6D" width="5.667" height="4.223"/>	<rect x="1.2" y="170.969" fill="#6D6D6D" width="5.666" height="4.223"/>
</g>
<g id="Layer_20">
</g>
<g id="Metal_body">	<path fill="#D8D8D8" stroke="#A8A8A8" stroke-miterlimit="10" d="M278.034,504.08c0,22.092-17.908,40-40,40h-194	c-22.091,0-40-17.908-40-40v-461c0-22.092,17.909-40,40-40h194c22.092,0,40,17.908,40,40V504.08z"/>
</g>
<g id="Shadows_on_metal_body">	<rect x="3.2" y="482.969" fill="#6D6D6D" width="5.667" height="4.223"/>	<rect x="273.2" y="482.969" fill="#6D6D6D" width="5.666" height="4.223"/>
</g>
<g id="Black_phone">	<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="141.0942" y1="540.5801" x2="141.0942" y2="6.4111">	<stop offset="0" style="stop-color:#282828"/>	<stop offset="0.0097" style="stop-color:#262626"/>	<stop offset="0.1219" style="stop-color:#161515"/>	<stop offset="0.2609" style="stop-color:#0A0A0A"/>	<stop offset="0.4566" style="stop-color:#040303"/>	<stop offset="1" style="stop-color:#020101"/>	</linearGradient>	<path fill="url(#SVGID_7_)" stroke="#282828" stroke-width="2" stroke-miterlimit="10" d="M275.488,500.58	c0,22.092-17.908,40-40,40H46.7c-22.092,0-40-17.908-40-40V46.411c0-22.092,17.908-40,40-40h188.788c22.092,0,40,17.908,40,40	V500.58z"/>
</g>
<g id="Circle_Button_x2C__speaker">	<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="141.2822" y1="520.5791" x2="141.2822" y2="468.7461">	<stop offset="0" style="stop-color:#575858"/>	<stop offset="1" style="stop-color:#282828"/>	</linearGradient>	<circle opacity="0.4" fill="url(#SVGID_8_)" stroke="#444444" stroke-miterlimit="10" cx="141.282" cy="494.662" r="25.917"/>	<path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M149.699,499.339c0,2.065-1.675,3.74-3.741,3.74h-9.352	c-2.066,0-3.741-1.675-3.741-3.74v-9.353c0-2.065,1.675-3.74,3.741-3.74h9.352c2.066,0,3.741,1.675,3.741,3.74V499.339z"/>	<path fill="#111111" d="M169.867,49.497c0,3.452-2.486,6.25-5.554,6.25h-40.726c-3.067,0-5.554-2.798-5.554-6.25l0,0	c0-3.452,2.487-6.25,5.554-6.25h40.726C167.381,43.247,169.867,46.045,169.867,49.497L169.867,49.497z"/>	<circle display="none" fill="#2D2D2D" cx="96.033" cy="64.164" r="6.083"/>
</g>
<g id="Camera">	<circle fill="#4F14A6" stroke="#353535" stroke-miterlimit="10" cx="96.033" cy="49.497" r="3.5"/>	<ellipse cx="96.033" cy="49.663" rx="1.125" ry="1"/>
</g>
<g id="Speaker_inset">	<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="143.8101" y1="53.5381" x2="143.8101" y2="45.834">	<stop offset="0" style="stop-color:#575858"/>	<stop offset="1" style="stop-color:#282828"/>	</linearGradient>	<path fill="url(#SVGID_9_)" d="M167.42,49.686c0,2.127-1.725,3.852-3.852,3.852h-39.516c-2.127,0-3.852-1.725-3.852-3.852l0,0	c0-2.127,1.725-3.852,3.852-3.852h39.516C165.695,45.834,167.42,47.559,167.42,49.686L167.42,49.686z"/>
</g>
<g id="Screen">	<rect x="23.034" y="93.414" fill="#515151" stroke="#515151" stroke-miterlimit="10" width="236" height="353.333"/>
</g>
<g id="Light_reflection">
</g>
<g id="Button_shadow">	<g>	<defs>	<path id="SVGID_10_" d="M166.782,494.501c0,14.403-11.678,26.078-26.083,26.078c-14.406,0-26.084-11.675-26.084-26.078	c0-14.408,11.679-26.087,26.084-26.087C155.104,468.414,166.782,480.093,166.782,494.501z"/>	</defs>	<clipPath id="SVGID_11_">	<use xlink:href="#SVGID_10_" overflow="visible"/>	</clipPath>	<circle opacity="0.5" clip-path="url(#SVGID_11_)" cx="141.282" cy="452.747" r="42"/>	</g>	<g id="Layer_11">	</g>	<g id="Layer_18">	</g>
</g>
<g id="Grill">	<ellipse fill="#2E2E2F" cx="124.54" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="124.558" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="127.215" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="127.232" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="129.889" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="129.906" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="132.563" cy="48.754" rx="0.806" ry="0.683"/>	<ellipse fill="#090405" cx="132.58" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="135.237" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="135.254" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="137.91" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="137.928" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="140.585" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="140.603" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="143.259" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="143.276" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="145.933" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="145.95" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="148.606" cy="48.754" rx="0.806" ry="0.683"/>	<ellipse fill="#090405" cx="148.624" cy="48.784" rx="0.736" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="151.281" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="151.298" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="153.954" cy="48.754" rx="0.806" ry="0.683"/>	<ellipse fill="#090405" cx="153.972" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="156.629" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="156.646" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="159.302" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="159.32" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="161.977" cy="48.754" rx="0.807" ry="0.683"/>	<ellipse fill="#090405" cx="161.994" cy="48.784" rx="0.737" ry="0.623"/>	<ellipse fill="#2E2E2F" cx="123.146" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="123.163" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="125.819" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="125.837" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="128.494" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="128.511" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="131.167" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="131.185" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="133.841" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="133.859" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="136.515" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="136.533" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="139.189" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="139.207" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="141.864" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="141.881" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="144.538" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="144.556" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="147.211" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="147.229" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="149.885" cy="50.451" rx="0.806" ry="0.682"/>	<ellipse fill="#090405" cx="149.903" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="152.56" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="152.577" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="155.233" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="155.251" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="157.907" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="157.925" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="160.581" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="160.599" cy="50.48" rx="0.737" ry="0.624"/>	<ellipse fill="#2E2E2F" cx="163.255" cy="50.451" rx="0.807" ry="0.682"/>	<ellipse fill="#090405" cx="163.273" cy="50.48" rx="0.737" ry="0.624"/>
</g>
<g id="Light_reflection_1_">	<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="210.8569" y1="6.4106" x2="210.8569" y2="375.4839">	<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/>	<stop offset="0.1413" style="stop-color:#FFFFFF;stop-opacity:0.1859"/>	<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.1"/>	</linearGradient>	<path fill="url(#SVGID_12_)" d="M275.782,374.58c0,22.092-129.85-368.169-129.85-368.169h89.85c22.092,0,40,17.908,40,40V374.58z"	/>
</g>
</svg>
</div> <div class="shadowHold">
<div class="boxShadow">
</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Inverted shadow with fade - Script Codes CSS Codes

.wrapper { position: relative; width: 1020px; margin: 0 auto;
}
.statement { z-index: 400; font-family: 'Open Sans', sans-serif; position: absolute; top: 14em; left: 5em; color: #333;
}
.statement h1 { -webkit-animation: fadeInLeft 0.5s 0.75s ease both; -moz-animation: fadeInLeft 0.5s 0.75s ease both; animation: fadeInLeft 0.5s 0.75s ease both; width: 300px; font-size: 40px; font-weight: 800; text-align: center;
}
.statement a { -webkit-animation: fadeIn 1.25s 1.25s ease both; -moz-animation: fadeIn 1.25s 1.25s ease both; animation: fadeIn 1.25s 1.25s ease both; margin: 1.5em auto 0 auto; display: block; text-decoration: none; border: 4px solid #333; padding: 1em; width: 6em; text-align: center; color: #333; font-weight: 800; -webkit-transition: background-color 0.25s ease-in-out;
}
.statement a:hover { background-color: #eee;
}
.statement p { -webkit-animation: fadeInLeft 0.5s 1s ease both; -moz-animation: fadeInLeft 0.5s 1s ease both; animation: fadeInLeft 0.5s 1s ease both; width: 300px; text-align: center; margin: 0.5em 0 0 0; font-size: 16px; line-height: 1.6em; font-weight: 400;
}
.shadowHold { width: 940px; position: absolute; top: 32em; left: 0; z-index: 20;
}
.phone { width: 280px; height: 695px; -webkit-animation: fadeInUp 0.5s 0.25s ease both; -moz-animation: fadeInUp 0.5s 0.25s ease both; animation: fadeInUp 0.5s 0.25s ease both; position: absolute; top: 2em; left: 31em; z-index: 50;
}
.boxShadow { position: relative; margin: 0 auto 80px; padding: 70px 0 40px; max-width: 1040px; text-align: center; background: #fff;
}
.boxShadow:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); z-index: -1;
}
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); }
}
@-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); }
}
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); }
}
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(2em); } 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(2em); } 100% { opacity: 1; -moz-transform: translateY(0); }
}
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(2em); } 100% { opacity: 1; transform: translateY(0); }
}
Inverted shadow with fade - Script Codes
Inverted shadow with fade - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3
Size 5,897 Kb
Views 32,384
Do you need developer help for Inverted shadow with fade?

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!

Chris Wright (chriswrightdesign) Script Codes
Name
Experiments with nth-of-type animation
IPhone SVG
Offscreen zoom nav
Grid - More complex grids with span
Flexbox responsive navigation
Typography SVG experiment
Bouncing ball arc horizontal
Form adaptation
Grid - two columns with gutters
SVG Noise blended radial
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!