CSS3 Shadows Darth Vader
How do I make an css3 shadows darth vader?
Feel the Force of CSS3 shadows, transforms and border-radiuses.. What is a css3 shadows darth vader? How do you make a css3 shadows darth vader? This script and codes were developed by ZeroSpree on 13 July 2022, Wednesday.
CSS3 Shadows Darth Vader Previews
CSS3 Shadows Darth Vader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Shadows Darth Vader</title> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ body{margin:0;background:#AADCD3}
blockquote{font:300 60px/100px 'Open Sans',Arial,Helvetica,sans-serif;color:#fff;text-align:center;margin:0;padding:40px 0 0;text-transform:uppercase}
blockquote b{display:block;font-size:120px;font-weight:600;}
.vader,.vader *{position:absolute}
.vader *::after, .vader *::before{position:absolute;content:''}
.h::before,.h::after,.hbl::before,.m::before,.m::after,.n,.n::after,.e::before,.c{background:#fff}
.hb,.m,.n,.e,.c{z-index:1}
/*the container of it all*/
.vader{width:349px;height:296px;position:relative;margin:60px auto}
/*helmet*/
.h {width:110px;height:211px;left:33px;border-radius:74% 0 0 0;box-shadow:inset 0 -68px 0 #AADCD3, inset 7px 0 0 -3px #fff}
.h::before {width:5px;height:50px;top:103px;left:16px;border-radius:5px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg)}
.h::after {width:4px;height:100px;top:103px;left:5px;border-radius:0 0 0 100%;transform:rotate(34deg);-webkit-transform:rotate(34deg);-ms-transform:rotate(34deg)}
.hb {width:38px;height:24px;top:104px;left:168px;border-radius:0 0 49% 40%;box-shadow:inset 0 -23px 0 -14px #fff}
.hb::before {width:134px;height:132px;top:15px;left:-51px;border-radius:100%;box-shadow:inset 0 -125.5px 0 #AADCD3}
.hbr {width:190px;height:195px;top:102px;right:3px;border-radius:101% 100% 0 0;box-shadow:inset 0 9px 0 -1px #fff}
.hbr::before {width:26px;height:5px;top:152px;left:-21px;background:#AADCD3;z-index:2;transform:rotate(-65deg);-webkit-transform:rotate(-65deg);-ms-transform:rotate(-65deg);}
.hbr::after {width:26px;height:5px;top:152px;left:51px;background:#AADCD3;z-index:2;transform:rotate(65deg);-webkit-transform:rotate(65deg);-ms-transform:rotate(65deg);}
.hbl {width:250px;height:163px;top:135px;right:125px;border-radius:100% 100% 100% 0;box-shadow:inset -14px 0 0 -5px #fff;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}
.hbl::after {width:121px;height:133px;top:-20px;left:96px;border-radius:97% 22% 0 0;box-shadow:inset 9px 0 0 -2px #fff;transform:rotate(61deg);-webkit-transform:rotate(61deg);-ms-transform:rotate(61deg)}
.hbl::before {width:7px;height:83px;top:6px;left:35px;border-radius:0 0 100% 0;transform:rotate(60deg);-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg)}
/*mouth*/
.m {width:82px;height:87px;top:225px;left:143px;border-radius:57% 57% 0 0 / 81% 81% 0 0;box-shadow:inset 0 -29px 0 #AADCD3;
background:linear-gradient(to right, transparent 1%, #fff 1%, #fff 14%, transparent 14%, transparent 22%, #fff 22%, #fff 34%, transparent 34%, transparent 43%, #fff 43%, #fff 55%, transparent 55%, transparent 66%, #fff 66%, #fff 78%, transparent 78%, transparent 87%, #fff 87%, #fff 99%, transparent 99%);
background:-webkit-linear-gradient(left, transparent 1%, #fff 1%, #fff 14%, transparent 14%, transparent 22%, #fff 22%, #fff 34%, transparent 34%, transparent 43%, #fff 43%, #fff 55%, transparent 55%, transparent 66%, #fff 66%, #fff 78%, transparent 78%, transparent 87%, #fff 87%, #fff 99%, transparent 99%);}
.m::before,
.m::after {width:15px;height:15px;top:57px;left:-36px;border-radius:100%}
.m::after {left:103px}
/*nose*/
.n {width:29px;height:29px;top:193px;left:169px;border-radius:100% / 150% 150% 60% 60%}
.n::after {width:70px;height:2px;top:54px;left:-62px;border-radius:100% 0 0 100%;transform:rotate(-58deg);-webkit-transform:rotate(-58deg);-ms-transform:rotate(-58deg)}
.n::before {width:27px;height:34px;top:-7px;left:-9px;border-radius:100% 50% 0 0;box-shadow:inset 8px -5px 0 -6px #fff;transform:rotate(3deg);-webkit-transform:rotate(3deg);-ms-transform:rotate(3deg)}
/*eyes*/
.e {width:109px;height:85px;top:125px;right:53px;border-radius:74% 101% / 133% 151% 0 0;box-shadow:inset 0 8px 0 -3px #fff;transform:rotate(34deg);-webkit-transform:rotate(34deg);-ms-transform:rotate(34deg)}
.e::before {width:62px;height:3px;top:59px;left:23px;border-radius:0 0 100% 100% / 0 0 200% 200%;transform:rotate(-23deg);-webkit-transform:rotate(-23deg);-ms-transform:rotate(-23deg)}
.e.l {top:127px;left:72px;border-radius:74% 108% 0 0 / 133% 129% 0 0;transform:rotate3d(0.36, 1, 0, 180deg);-webkit-transform:rotate3d(0.36, 1, 0, 180deg);-ms-transform:rotate3d(0.36, 1, 0, 180deg)}
.e.l::before {top:60px;left:23px;transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-ms-transform:rotate(-25deg)}
/*cheek lines*/
.c {width:60px;height:2px;top:234px;left:62px;border-radius:0 100% 100% 0;transform:rotate(62deg);-webkit-transform:rotate(62deg);-ms-transform:rotate(62deg)}
.c::before {width:71px;height:74px;top:-75px;left:-53px;border-radius:0 1% 65% 0 / 0 100% 210% 0;box-shadow:inset -2px 0 0 #fff;transform:rotate(10deg);-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg)} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <blockquote>I am your<b>father</b></blockquote>
<div class="vader"> <div class="h"></div> <div class="hbl"></div> <div class="hb"></div> <div class="hbr"></div> <div class="e l"></div> <div class="e"></div> <div class="c"></div> <div class="n"></div> <div class="m"></div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
CSS3 Shadows Darth Vader - Script Codes CSS Codes
body{margin:0;background:#AADCD3}
blockquote{font:300 60px/100px 'Open Sans',Arial,Helvetica,sans-serif;color:#fff;text-align:center;margin:0;padding:40px 0 0;text-transform:uppercase}
blockquote b{display:block;font-size:120px;font-weight:600;}
.vader,.vader *{position:absolute}
.vader *::after, .vader *::before{position:absolute;content:''}
.h::before,.h::after,.hbl::before,.m::before,.m::after,.n,.n::after,.e::before,.c{background:#fff}
.hb,.m,.n,.e,.c{z-index:1}
/*the container of it all*/
.vader{width:349px;height:296px;position:relative;margin:60px auto}
/*helmet*/
.h {width:110px;height:211px;left:33px;border-radius:74% 0 0 0;box-shadow:inset 0 -68px 0 #AADCD3, inset 7px 0 0 -3px #fff}
.h::before {width:5px;height:50px;top:103px;left:16px;border-radius:5px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg)}
.h::after {width:4px;height:100px;top:103px;left:5px;border-radius:0 0 0 100%;transform:rotate(34deg);-webkit-transform:rotate(34deg);-ms-transform:rotate(34deg)}
.hb {width:38px;height:24px;top:104px;left:168px;border-radius:0 0 49% 40%;box-shadow:inset 0 -23px 0 -14px #fff}
.hb::before {width:134px;height:132px;top:15px;left:-51px;border-radius:100%;box-shadow:inset 0 -125.5px 0 #AADCD3}
.hbr {width:190px;height:195px;top:102px;right:3px;border-radius:101% 100% 0 0;box-shadow:inset 0 9px 0 -1px #fff}
.hbr::before {width:26px;height:5px;top:152px;left:-21px;background:#AADCD3;z-index:2;transform:rotate(-65deg);-webkit-transform:rotate(-65deg);-ms-transform:rotate(-65deg);}
.hbr::after {width:26px;height:5px;top:152px;left:51px;background:#AADCD3;z-index:2;transform:rotate(65deg);-webkit-transform:rotate(65deg);-ms-transform:rotate(65deg);}
.hbl {width:250px;height:163px;top:135px;right:125px;border-radius:100% 100% 100% 0;box-shadow:inset -14px 0 0 -5px #fff;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}
.hbl::after {width:121px;height:133px;top:-20px;left:96px;border-radius:97% 22% 0 0;box-shadow:inset 9px 0 0 -2px #fff;transform:rotate(61deg);-webkit-transform:rotate(61deg);-ms-transform:rotate(61deg)}
.hbl::before {width:7px;height:83px;top:6px;left:35px;border-radius:0 0 100% 0;transform:rotate(60deg);-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg)}
/*mouth*/
.m {width:82px;height:87px;top:225px;left:143px;border-radius:57% 57% 0 0 / 81% 81% 0 0;box-shadow:inset 0 -29px 0 #AADCD3;
background:linear-gradient(to right, transparent 1%, #fff 1%, #fff 14%, transparent 14%, transparent 22%, #fff 22%, #fff 34%, transparent 34%, transparent 43%, #fff 43%, #fff 55%, transparent 55%, transparent 66%, #fff 66%, #fff 78%, transparent 78%, transparent 87%, #fff 87%, #fff 99%, transparent 99%);
background:-webkit-linear-gradient(left, transparent 1%, #fff 1%, #fff 14%, transparent 14%, transparent 22%, #fff 22%, #fff 34%, transparent 34%, transparent 43%, #fff 43%, #fff 55%, transparent 55%, transparent 66%, #fff 66%, #fff 78%, transparent 78%, transparent 87%, #fff 87%, #fff 99%, transparent 99%);}
.m::before,
.m::after {width:15px;height:15px;top:57px;left:-36px;border-radius:100%}
.m::after {left:103px}
/*nose*/
.n {width:29px;height:29px;top:193px;left:169px;border-radius:100% / 150% 150% 60% 60%}
.n::after {width:70px;height:2px;top:54px;left:-62px;border-radius:100% 0 0 100%;transform:rotate(-58deg);-webkit-transform:rotate(-58deg);-ms-transform:rotate(-58deg)}
.n::before {width:27px;height:34px;top:-7px;left:-9px;border-radius:100% 50% 0 0;box-shadow:inset 8px -5px 0 -6px #fff;transform:rotate(3deg);-webkit-transform:rotate(3deg);-ms-transform:rotate(3deg)}
/*eyes*/
.e {width:109px;height:85px;top:125px;right:53px;border-radius:74% 101% / 133% 151% 0 0;box-shadow:inset 0 8px 0 -3px #fff;transform:rotate(34deg);-webkit-transform:rotate(34deg);-ms-transform:rotate(34deg)}
.e::before {width:62px;height:3px;top:59px;left:23px;border-radius:0 0 100% 100% / 0 0 200% 200%;transform:rotate(-23deg);-webkit-transform:rotate(-23deg);-ms-transform:rotate(-23deg)}
.e.l {top:127px;left:72px;border-radius:74% 108% 0 0 / 133% 129% 0 0;transform:rotate3d(0.36, 1, 0, 180deg);-webkit-transform:rotate3d(0.36, 1, 0, 180deg);-ms-transform:rotate3d(0.36, 1, 0, 180deg)}
.e.l::before {top:60px;left:23px;transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-ms-transform:rotate(-25deg)}
/*cheek lines*/
.c {width:60px;height:2px;top:234px;left:62px;border-radius:0 100% 100% 0;transform:rotate(62deg);-webkit-transform:rotate(62deg);-ms-transform:rotate(62deg)}
.c::before {width:71px;height:74px;top:-75px;left:-53px;border-radius:0 1% 65% 0 / 0 100% 210% 0;box-shadow:inset -2px 0 0 #fff;transform:rotate(10deg);-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg)}CSS3 Shadows Darth Vader - Script Codes JS Codes
/* * Feel the Force...of CSS3 Shadows. * * This work is based on Adam Hosp's dribbble 'I Am Your Father' * http://dribbble.com/shots/981763-I-Am-Your-Father * Take a look at his other dribbbles, you'll love them! */
| Developer | ZeroSpree |
| Username | zerospree |
| Uploaded | July 13, 2022 |
| Rating | 4.5 |
| Size | 4,472 Kb |
| Views | 113,344 |
Do you need developer help for CSS3 Shadows Darth Vader?
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!
ZeroSpree (zerospree) Script Codes
| Name | Size |
| Simple CSS3 particles animation | 2,810 Kb |
| Flip - card memory game. | 7,947 Kb |
| Programmer | 3,804 Kb |
| Just another Button | 2,413 Kb |
| CSS Coordinates | 3,589 Kb |
| Sublime Skin for CodePen Embeds | 6,333 Kb |
| Steve Jobs | 4,968 Kb |
| RIP flashdrives | 3,657 Kb |
| TinyCop CSS Pixel Art | 3,901 Kb |
| Pure CSS Apple Logo | 6,592 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Personal Logo Animation | Lloydwheeler | 3,795 Kb |
| Heatmap Color Scales | Stevepepple | 2,331 Kb |
| Flexbox playground | Enxaneta | 5,418 Kb |
| Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
| CSS Google Now | Jackmoran | 3,196 Kb |
| AOR site logo | Thatbram | 2,527 Kb |
| Getting Started | Viblast | 1,500 Kb |
| Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
| Material design - button rainbow circle | Kunukn | 3,652 Kb |
| JQuery Validate checkbox group | Lunaman | 2,466 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!