Home/ Questions/Q 9189063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T20:09:40+00:00

as a medium of learning I try to replicate some things I see in

  • 0

as a medium of learning I try to replicate some things I see in the Internet. A friend of mine that knows what am I doing, saw a template and asked me to replicate part of it for his web page, I already have most of what I needed from the template, but the thing he liked the most I tried and failed and I am not understanding what is the magic involved in this template…

What I need is to replicate the main sheet transparency and the light effect behind it, the transparency I made was with a black 1×1 png made on the GIMP(I can’t buy the Photoshop) I also have a nice pattern like in the template since it is one of the things my friend asked…

transparent box with light effect made with the GIMP

this is the effect I want, I tried messing around with shadows, but didn’t get what i wanted I ended up deleting the code, now all I have is this:

HTML:

 <body>
 <div id="box"></div>
 <div id="light"></div>

CSS:

#light{
border:solid 0px white;
height:550px;
width:800px;
left:50%;
margin-top:130px;
margin-left:-400px;
z-index:-1000;
position:absolute;
box-shadow: 0px 0px 300px #929292;
border-radius:100px;
background-color:#929292;
opacity:0.4;
}
#box{
background-image:url(../images/shtr.png);
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}

i don’t know if i need to use jquery or javascript, or if that would help in the page performance…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I managed to get it done, i created a new div that casts a shadow, placed it outside of the screen(left:100%;) and the shadow is casted to the center with the color #CECECE the HTML code:

    <div id="light"></div>
<div id="box">
    ( ... content ... )
</div>

    in the CSS :

    #light{
position: absolute;
background: rgba(0, 0, 0, 0);
height: 800px;
width: 840px;
z-index:-1000;
opacity:0.15;
}  

#box{
background-image:url(../images/shtr.png);/*black 50-60% transparent 1x1 image*/
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}

    and to cast the shadow I used a jQuery script, via only css it wasn’t working i don’t know exactly why… the code:

    $(document).ready(function() {
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;

    var A = -myWidth - 49.5*myWidth/60
    $("#brilho_grande").css("box-shadow", A+"px 0px 10000px 100px #CECECE");
    $("#brilho_grande").css("left", 2*myWidth+"px");
    $("#brilho_grande").css("top", "339px");
});
    • 0