Flame by Kenji Droullard
How do I make an flame by kenji droullard?
As seen on Dribbble. What is a flame by kenji droullard? How do you make a flame by kenji droullard? This script and codes were developed by Rosh Jutherford on 04 September 2022, Sunday.
Flame by Kenji Droullard - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flame by Kenji Droullard</title> <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! */ *,
*:before,
*:after { box-sizing: border-box;
}
html { background: #fdf6da; font-size: 62.5%;
}
.flame { position: relative; width: 14.8rem; height: 24.8rem; margin: 50px auto;
}
.flame .children, .flame .main, .flame .main .inner, .flame .sub { position: absolute; border-radius: 50%; overflow: hidden;
}
.flame .psuedo, .flame .main .inner:before, .flame .sub:before { content: ''; position: absolute; border-radius: 50%;
}
.flame .main { width: 19.0rem; height: 19.0rem; left: 4.4rem; top: -0.7rem;
}
.flame .main .inner { width: 18.7rem; height: 18.7rem; left: -8.3rem; top: 5.3rem; background: #f49f36; box-shadow: 10.7rem -11.5rem 0 -3.0rem #fdf6da, 1.2rem -6.7rem 0 -4.6rem #f6b537, 3.7rem -11.4rem 0 -4.6rem #f49f36;
}
.flame .main .inner:before { width: 9.5rem; height: 9.5rem; left: 5.8rem; top: -2.1rem; background: #f8c83c; box-shadow: 0 4.0rem 0 1.95rem #f6b537;
}
.flame .sub { width: 20.08rem; height: 19.6rem; bottom: 0.8rem; background: #fdf6da; right: 0; z-index: -1;
}
.flame .sub:before { width: 9.5rem; height: 9.5rem; left: 7.2rem; top: -1.77rem; background: #fdf6da; box-shadow: 0 4.0rem 0 1.95rem #f49f36, -4.0rem 1.0rem 0 1.95rem #fdf6da, 6.8rem 0 0 9.75rem #f18032, -7.29rem 15.8rem 0 2.1rem #fdf6da, 0rem 15.8rem 0 2.1rem #ee5630;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='flame'> <div class='main'> <div class='inner'></div> </div> <div class='sub'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Flame by Kenji Droullard - Script Codes CSS Codes
*,
*:before,
*:after { box-sizing: border-box;
}
html { background: #fdf6da; font-size: 62.5%;
}
.flame { position: relative; width: 14.8rem; height: 24.8rem; margin: 50px auto;
}
.flame .children, .flame .main, .flame .main .inner, .flame .sub { position: absolute; border-radius: 50%; overflow: hidden;
}
.flame .psuedo, .flame .main .inner:before, .flame .sub:before { content: ''; position: absolute; border-radius: 50%;
}
.flame .main { width: 19.0rem; height: 19.0rem; left: 4.4rem; top: -0.7rem;
}
.flame .main .inner { width: 18.7rem; height: 18.7rem; left: -8.3rem; top: 5.3rem; background: #f49f36; box-shadow: 10.7rem -11.5rem 0 -3.0rem #fdf6da, 1.2rem -6.7rem 0 -4.6rem #f6b537, 3.7rem -11.4rem 0 -4.6rem #f49f36;
}
.flame .main .inner:before { width: 9.5rem; height: 9.5rem; left: 5.8rem; top: -2.1rem; background: #f8c83c; box-shadow: 0 4.0rem 0 1.95rem #f6b537;
}
.flame .sub { width: 20.08rem; height: 19.6rem; bottom: 0.8rem; background: #fdf6da; right: 0; z-index: -1;
}
.flame .sub:before { width: 9.5rem; height: 9.5rem; left: 7.2rem; top: -1.77rem; background: #fdf6da; box-shadow: 0 4.0rem 0 1.95rem #f49f36, -4.0rem 1.0rem 0 1.95rem #fdf6da, 6.8rem 0 0 9.75rem #f18032, -7.29rem 15.8rem 0 2.1rem #fdf6da, 0rem 15.8rem 0 2.1rem #ee5630;
}
Developer | Rosh Jutherford |
Username | the_ruther4d |
Uploaded | September 04, 2022 |
Rating | 4.5 |
Size | 3,359 Kb |
Views | 26,312 |
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!
Name | Size |
Finn by Meg Robichaud | 5,370 Kb |
IOS7 Icon | 2,313 Kb |
Game-Style Header | 4,486 Kb |
RvV 2 | 3,115 Kb |
Kinetic Mark by Philip Thepkaysone | 2,504 Kb |
Apple TV style hover | 5,419 Kb |
A Pen by Rosh Jutherford | 4,410 Kb |
Download Button | 4,308 Kb |
Apple iPhone 5s style scrolling | 4,740 Kb |
Parallax Canvas Gallery | 12,954 Kb |
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!
Name | Username | Size |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
React TODO | Enieste | 3,320 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Waveform function for a siren tone modulation | Clafou | 1,656 Kb |
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!