Hello Everyone,
I would like to apply shadow style to an image by using notepad++. But I am unable to apply the code. it is not working. can anyone help me out. I am sending a link for your reference. Please check it out and get me a solution.
i am interested in effect 5. This effect I want to apply for an image. i am using notepad++ to edit the file. I want save this file as html and save shadow image as .png.
Thanks for your kind help.
Arjun
The website you link to has the solution @arjunabhi4. Where are you getting stuck?
<!DOCTYPE html>
<html>
<head>
<style>
<div class="box effect5">
<h3>Effect 5</h3>
</div>
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
/*==================================================
* Effect 5
* ===============================================*/
.effect5
{
position: relative;
}
.effect5:before, .effect5:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.effect5:after
{
transform: rotate(8deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<img src=Happy-Raksha-.jpg">
<div></div>
</body>
</html>
I wrote this code in notepad++ and executed. But it doesnt work. Only image displayed in the browser. But doesnt apply. Could you please check the error in the code.
Thank you so much for your help.
Ajun
some code does not display in my previous post. I have taken screen shot and attaching. Please check it out.
Thank you.
I’m a little confused by your expectations/request.
I understand that you want to save the file as an html file, but I do not understand how/why you expect to save the shadow separately as a .png file. The shadow effect is being created with CSS.
You can set the visibility of the box with the message to hidden or simply remove the background-color, border, and any text from the box, then make a screen shot of the full shadow effect and save it as a png. Seems counterproductive to make a .png of an effect that can be produced with CSS, though.
Please show us YOUR code so we can see where you are having a problem. If you have a web site, you can post a link to that site where we can see your test page. If you are writing your code only on your computer, the you can post a “working page” in your next message. A “working page” is one that starts with <!doctype>, has a complete head section where you CSS styles may be written, and the body with your code; it ends with </html>.
A “working page” allows us to see exactly what you see.
Please post a “working page” instead of the screen shots of your code.
Can you drag-and-drop and add the image to the post?
At this time, we see a blank screen except for the “missing image” icon.
<div class="box effect5">
<h3>Effect 5</h3>
</div>
… is html. It does not belong in the CSS <style> portion of the <head> of the page. It belongs in the <body> portion.
dear ronapat,
I have uploded the image. Please see.
Thanks,
arjun
Apply the shadow to box that holds the image.
e.g.
<!DOCTYPE html>
<html>
<head>
<style>
/*==================================================
* Effect 5
* ===============================================*/
.effect5 {
position: relative;
display:inline-block;
}
.effect5:before, .effect5:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.effect5:after {
transform: rotate(8deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<div class="effect5">  </div>
</body>
</html>
Hi PaulOB,
Thanks a lot. It is working great.
Best
Arjun
TIL:
@PaulOB, thank you for demonstrating how to include an image in a file by using the discourse cdn.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.