Hello everyone,
I'm wondering if someone can help me out with a little style that I've seen on this website. I'm trying to recreate something similar... I've looked within the code for the website but I can't seem to personally find out how it's done.
https://www.braydoncoyer.dev/
You'll see when you open the webpage, you'll be displayed with 2 subtle gradient effects... one on the header/nav bar and the other down on the footer. If someone can help me with how they've done that, that would be great!
Frontend Development
Subtle gradient strokes?
Submitted by mvpcurtis, 25-11-2023, 10:34 AM, Thread ID: 280283
25-11-2023, 10:34 AM
#1 RE: Subtle gradient strokes? 04-12-2023, 07:35 PM #2 it's a transparent png image in footer with slight gradient color ![[Image: g1kecLn.png]](https://i.imgur.com/g1kecLn.png)
![[Image: hntIobN.gif]](https://i.imgur.com/hntIobN.gif)
[There was an error in your reply. The message is too short]
04-12-2023, 07:35 PM
#2 it's a transparent png image in footer with slight gradient color
[There was an error in your reply. The message is too short]
RE: Subtle gradient strokes? 10-12-2023, 06:27 PM #3 this code html
Code:<div class="absolute overflow-hidden -top-32 md:-top-72 md:right-36"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27924%27%20height=%27718%27/%3e"></span><img alt="" src="/_next/static/media/rays.426980b9.png" decoding="async" data-nimg="intrinsic" class="absolute top-0 right-0" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"><noscript><img alt="" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="absolute top-0 right-0" src="/_next/static/media/rays.426980b9.png"/></noscript></span></div>
10-12-2023, 06:27 PM
#3 this code html
Code:
<div class="absolute overflow-hidden -top-32 md:-top-72 md:right-36"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27924%27%20height=%27718%27/%3e"></span><img alt="" src="/_next/static/media/rays.426980b9.png" decoding="async" data-nimg="intrinsic" class="absolute top-0 right-0" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"><noscript><img alt="" loading="lazy" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="absolute top-0 right-0" src="/_next/static/media/rays.426980b9.png"/></noscript></span></div>RE: Subtle gradient strokes? 04-02-2024, 08:44 PM #4 't no way! ill deffs be checking this out. thank you
04-02-2024, 08:44 PM
#4 't no way! ill deffs be checking this out. thank you