The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

placing a box shadow under a photo on a thread

3 posters

Go down

Solved placing a box shadow under a photo on a thread

Post by Ape Tue Aug 15, 2017 1:22 pm

Forum address: http://missingpeople.darkbb.com
Topic on forum if needed: http://missingpeople.darkbb.com/t202-jamilur-rahman
Hello everyone i am here now to fins someone thats can help me with a code Smile

I am trying to add a shadow under the photo's when posted on the forum like this
placing a box shadow under a photo on a thread Untitl13

I did try this site to help me but it did not work lol
https://paulund.co.uk/learn-css-box-shadow
CSS Box Shadow Effect 7 is the one i want really but if not i can use this Image
Code:
https://i11.servimg.com/u/f11/12/23/10/57/123r12.png

As you can tell i am not any good at codes lol
With the image i used this but i think im missing something.
Code:
img.resize_img:after {content: url(https://i11.servimg.com/u/f11/12/23/10/57/123r11.png)!important;
}

any help on this will be good thanks.

APE


placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Guest Wed Aug 16, 2017 8:08 am

Hi APE,

There are a few problems with your code. First one is that every image on a fm forum has the class resize_img so we'll have to find another selector. I think
Code:
.tut-tex img
would work. The second problem is that the value of the content property has to be html. The code would be something like this:
Code:
.tut-tex img:after, .tut-tex img::after{
content:"";
background:url("https://i11.servimg.com/u/f11/12/23/10/57/123r11.png");
}
I tested this on your forum(using the browser's console) and I don't know why but it's not working. I haven't worked with pseudo elements(the ::before and ::after thing) for quite some time so I probably forgot to add something scratch Anyway, add that CSS I gave you and tell me if you see any changes.
avatar
Guest
Guest


Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Ape Wed Aug 16, 2017 9:28 am

Justice™️ wrote:Hi APE,

There are a few problems with your code. First one is that every image on a fm forum has the class resize_img so we'll have to find another selector. I think
Code:
.tut-tex img
would work. The second problem is that the value of the content property has to be html. The code would be something like this:
Code:
.tut-tex img:after, .tut-tex img::after{
content:"";
background:url("https://i11.servimg.com/u/f11/12/23/10/57/123r11.png");
}
I tested this on your forum(using the browser's console) and I don't know why but it's not working. I haven't worked with pseudo elements(the ::before and ::after thing) for quite some time so I probably forgot to add something scratch Anyway, add that CSS I gave you and tell me if you see any changes.
Hello buddy No sadly this one did not work Sad


placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Ape Thu Aug 17, 2017 4:13 pm

BUMP BUMP


placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Guest Fri Aug 18, 2017 1:36 am

This should do it:
Code:
.tut-tex img{
    position:relative !important;
    box-shadow:4px 4px 10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset !important;
}
.tut-tex img::before, .tut-tex img::after{
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    box-shadow:0 0 20px rgba(0,0,0,0.8) !important;
    top:0 !important;
    bottom:0 !important;
    left:10px !important;
    right:10px !important;
    border-radius:100px / 10px !important;
}
..tut-tex img::after{
    right:10px !important;
    left:auto !important;
    transform:skew(8deg) rotate(3deg) !important;
}
avatar
Guest
Guest


Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Ape Fri Aug 18, 2017 3:21 am

it sort of worked Sad

The box shadow is not how i wanted it thou Sad as you can see it is just acting like a normal box shadow not just under the photo it's self. placing a box shadow under a photo on a thread Captur13


placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Ape Sat Aug 19, 2017 9:08 am

bump Sad still looking ot make this work right Sad


placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Draxion Sat Aug 19, 2017 12:21 pm

@APE, are you simply wanting all profile details avatars to have the shadow effect 7?
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Ape Sat Aug 19, 2017 4:46 pm

Hello @Draxion

No on my site http://missingpeople.darkbb.com/ if you look at the posts of missing people you will see a photo of them http://missingpeople.darkbb.com/t222-liam-johnson
now i want the shadow to be under the photo's like this
placing a box shadow under a photo on a thread Untitl13

right now it has a basic shadow around it
it would be better if i could use a image but if it can be done with CSS or JavaScript then that's even better '

if you need a test account with admin account let me know i will inbox you one

the one in this photo is Effect 2 and thats the one i really want if passable


placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Draxion Sat Aug 19, 2017 4:58 pm

Yes, send me that information. That would be lovely.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Ape Sat Aug 19, 2017 5:17 pm

PM sent

thanks for your help Smile


placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by _Twisted_Mods_ Sat Aug 19, 2017 10:58 pm

Code:
<style>
#imgbox {
    padding-bottom: 50px;
    display: inline-block;
    background-image: url(http://envision.wptation.com/wp-content/themes/envision/includes/modules/module.shadow/shadows/shadow-2.png);
    background-size: 100%;
    background-position: 0px 408px;
    background-repeat: no-repeat;
}
<style>

<span id="imgbox">
    <img src="https://www.missingpeople.org.uk/media/zoo/images/image1_cc2e51ee0f0633cedee3bfd1c1930176.jpg" alt="" class="resize_img" width="332" height="400">
</span>
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Ape Sun Aug 20, 2017 11:28 am

Hello @_Twisted_Mods_ sorry i think im having a blond moment lol

where do it add this code ? lol


placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Guest Sun Aug 20, 2017 11:43 am

Add this to the CSS:
Code:
.tut-tex img{
    padding-bottom: 50px;
    display: inline-block;
    background-image: url(http://envision.wptation.com/wp-content/themes/envision/includes/modules/module.shadow/shadows/shadow-2.png);
    background-size: 100%;
    background-position: 0px 408px;
    background-repeat: no-repeat;
}
avatar
Guest
Guest


Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Ape Sun Aug 20, 2017 11:51 am

That sort of worked lol
placing a box shadow under a photo on a thread Captur14



placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Ape Sun Aug 20, 2017 1:52 pm

it's ok i have removed the border around the photo's and i will leave it as that Smile

Thank you all for your help Smile your great rock

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


placing a box shadow under a photo on a thread Left1212placing a box shadow under a photo on a thread Center11placing a box shadow under a photo on a thread Right112
placing a box shadow under a photo on a thread Ape_b110
placing a box shadow under a photo on a thread Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum