Forum hover (shadow) over background

[Skidjit]

Hover site?

I have in mind something like a shadow that makes the site appear to be 3D or like it's above the background image/color. I've seen it on another site a while ago. I think that person made it look like her site was a book or letter, but the background image was something like a table or tablecloth that was beneath it.

For some reason I think the word I'm thinking of for this affect is "drop shadowing"? I might be wrong.

I've looked around the plugin section and did a search here on the templates available. I can't seem to find anything that does this. If anyone knows how to achieve the affect I'm hoping for, or knows where to look to find the answer, I'd be much appreciated for your help.

Thanks.

[Skidjit]

BUMP

A while back I had seen someone post a link to their proboard site. So, I've been combing everywhere I was searching back then, trying to find that link. I THINK this is the site.

hogexrpg.net/board/3/news-announcements

here's an example of something I have in mind. If you notice there's a hint of a shadow just behind the border but above the background image. (I might have seen it on another site posted here too, but can't find it.) I love this affect and I believe it would go great with many themes. I don't know if it's a code or if it's just my eyes thinking it's there. Any help or ideas where I could get this help would be greatly appreciated.

[Tumbleweed]

It's box shadow so you were close. You can just stick this at the bottom of your style sheet and you should get a look similar to that site:


#wrapper{
background-color: #111111;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 1px 1px 10px 1px #000;
padding:8px;
}

By the way I'm happy some people are returning to sites that have dimension instead of the flat boring washed out look that has been popular lately. Kudo's to you. I'm so sick of that flat look. 

[Skidjit]

Aug 1, 2016 9:47:19 GMT -8 Tumbleweed said:

It's box shadow so you were close. You can just stick this at the bottom of your style sheet and you should get a look similar to that site:


#wrapper{
background-color: #111111;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 1px 1px 10px 1px #000;
padding:8px;
}

By the way I'm happy some people are returning to sites that have dimension instead of the flat boring washed out look that has been popular lately. Kudo's to you. I'm so sick of that flat look. 

Wow. Thanks. I will have to try this out when I get home. I will let you know how it turns out. ?

[Skidjit]

Tumbleweed

lemoncake.freeforums.net/

It was almost what I had in mind, just slightly different. (Then I realized your code does look more like how Teg's site is, from my example link in my earlier post.) My goof. However, I like the way this looks too, just the way it is for a whole different reason. It's giving me more ideas that I didn't have before. Thanks (For instance, is it possible to add in a background image where there you have the black border color?) I don't know if that would work. If so, I would use a plain color for the entire screen but this code would have a background that would only fit where you have the black color PLUS the box shadow. Sorry, I think I'm talking out loud. I do that a lot.

What I was originally thinking... see the link I am posting now to my test site. I changed the border color to red hoping it stands out for this viewing purpose. It was the main body part that I was wondering if we could "box shadow". Is it possible or too difficult? The shadow would be only around the containers.

I too agree. Having a site with more dimension just looks better. More pleasing to me. I'm tired of my sites looking a bit bland. (Oh and my test site is bland on purpose. I'm only tinkering with one thing at a time on most of their themes.) I have so much to learn and I'm having fun trying to figure this out. Of course with everyone's help from here.

Thanks so far. This is really cool.

[Tumbleweed]

Aug 1, 2016 19:53:17 GMT -8 Skidjit said:

Tumbleweed

lemoncake.freeforums.net/

It was almost what I had in mind, just slightly different. (Then I realized your code does look more like how Teg's site is, from my example link in my earlier post.) My goof. However, I like the way this looks too, just the way it is for a whole different reason. It's giving me more ideas that I didn't have before. Thanks (For instance, is it possible to add in a background image where there you have the black border color?) I don't know if that would work. If so, I would use a plain color for the entire screen but this code would have a background that would only fit where you have the black color PLUS the box shadow. Sorry, I think I'm talking out loud. I do that a lot.

What I was originally thinking... see the link I am posting now to my test site. I changed the border color to red hoping it stands out for this viewing purpose. It was the main body part that I was wondering if we could "box shadow". Is it possible or too difficult? The shadow would be only around the containers.

I too agree. Having a site with more dimension just looks better. More pleasing to me. I'm tired of my sites looking a bit bland. (Oh and my test site is bland on purpose. I'm only tinkering with one thing at a time on most of their themes.) I have so much to learn and I'm having fun trying to figure this out. Of course with everyone's help from here.

Thanks so far. This is really cool.

I'm not sure I fully understand what you are asking in your first paragraph but you can add a image where the color #111111 is. So it would be:

background-image:url(your link here);background-repeat: repeat;

But that wouldn't be the box shadow part as the image although you can add an image to your border but I doubt that it the look you are going for. 
 

As far as adding box shadow to the containers, sure you can do that although having both around the wrapper and containers might be over-kill but maybe that isn't what you meant anyway.

.container{
background-color: #111111;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 1px 1px 10px 1px #000;
padding:8px;
}

Do play with the style settings as I just threw some numbers/colors in there.

[Skidjit]

Aug 1, 2016 22:51:13 GMT -8 Tumbleweed said:

Aug 1, 2016 19:53:17 GMT -8 Skidjit said:

Tumbleweed

lemoncake.freeforums.net/

It was almost what I had in mind, just slightly different. (Then I realized your code does look more like how Teg's site is, from my example link in my earlier post.) My goof. However, I like the way this looks too, just the way it is for a whole different reason. It's giving me more ideas that I didn't have before. Thanks (For instance, is it possible to add in a background image where there you have the black border color?) I don't know if that would work. If so, I would use a plain color for the entire screen but this code would have a background that would only fit where you have the black color PLUS the box shadow. Sorry, I think I'm talking out loud. I do that a lot.

What I was originally thinking... see the link I am posting now to my test site. I changed the border color to red hoping it stands out for this viewing purpose. It was the main body part that I was wondering if we could "box shadow". Is it possible or too difficult? The shadow would be only around the containers.

I too agree. Having a site with more dimension just looks better. More pleasing to me. I'm tired of my sites looking a bit bland. (Oh and my test site is bland on purpose. I'm only tinkering with one thing at a time on most of their themes.) I have so much to learn and I'm having fun trying to figure this out. Of course with everyone's help from here.

Thanks so far. This is really cool.

I'm not sure I fully understand what you are asking in your first paragraph but you can add a image where the color #111111 is. So it would be:

background-image:url(your link here);background-repeat: repeat;

But that wouldn't be the box shadow part as the image although you can add an image to your border but I doubt that it the look you are going for. 
 

As far as adding box shadow to the containers, sure you can do that although having both around the wrapper and containers might be over-kill but maybe that isn't what you meant anyway.

.container{
background-color: #111111;
border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 1px 1px 10px 1px #000;
padding:8px;
}

Do play with the style settings as I just threw some numbers/colors in there.

Yeah, sorry about that. I do tend to ramble at times. I think when I called it drop shadow in my earlier post, off and on through the years, I've attempted to teach myself GIMP stills. I found a setting that allows me to put a shadow to my font. Here's two examples I made. Obviously, I'm very green at this. But I'm learning.

I understand now why you called it "box shadow." (duh. A box.) I see that you've figured out what I was originally asking, about adding a shadow around the borders or containers. During this whole thread, you've opened my mind to so many more options. This is so cool. Thanks.

Where I think I may have lost you in that one paragraph, I messed up calling the whole blacked out background section your code added,  a black border color. I did play around a little bit by setting the black to transparent, then I saw the shadow border very clearly. I definitely want the shadow. And I did put the black back in for the time being.

My mind went to thinking about not using a color but to use an image, then have the shadow code shadowing that. I'm thinking, if I find/use an image of a piece of parchment, or a letter, or book, then the shadow around that. The shadow will make the image appear to float or be above the whole background 3D like. Thanks for sharing that bit of code where I can choose an image if I wished.

I'm slowly but surely beginning to grasp some things about codes. I hope to have time later today, to play around and see how it goes.   

Thanks Tumbleweed

[Tumbleweed]

Skidjit,


I think I understand what you were saying now and don't worry about thinking out loud, so to speak, as I do that too. Let me know if you get stumped on anything else and do an old mod a favor and shoot me off a pm when you feel you have your site as you like it. I need to see something that is not flat. lol

[Skidjit]

Aug 2, 2016 10:12:59 GMT -8 Tumbleweed said:

Skidjit ,


I think I understand what you were saying now and don't worry about thinking out loud, so to speak, as I do that too. Let me know if you get stumped on anything else and do an old mod a favor and shoot me off a pm when you feel you have your site as you like it. I need to see something that is not flat. lol

Tumbleweed I didn't want you to think I blew you off. So far, what I see is looking pretty good. I've been working on it off and on over the past few days. My troubles are always the same, background images not properly fitting the screen. I need to test out a couple of different codes that I recently was given here.

However, this time, I'm just busy searching the web to find the perfect image to fit what I have in my head. You know how that goes. I'd rather not have something cartoonish, but easier on the eyes. I have one theme nearly finished. Just little tinkers to do with fonts etc. I'll send that PM to let you see a couple of different themes soon.

Thanks for your help.  

[Skidjit]

Tumbleweed

Hello there. I have two links to share with you.

Here's one to my main site. I decided to see what it would look like (I'll probably not leave it here but for a while.) by setting the color to transparent, so not to have something completely surrounding the whole container, I found it had a cool almost magnifying affect to it.

Now here's my question, you can tell just where the shadow affect takes place in those spots. The left and right sides seem cut off. Is there a way to extend either side margins? Hmm? Maybe, if I were to want to choose what direction the shadow would be cast. Say... left side and bottom.... or right side and bottom margins.

After I tinker with this more, I plan on putting in, on each theme, the matching color background so it will no longer remain transparent. This is just to look at for now.

Here's my link to this one. <<removed link>>


-----

Now here's my test site where I am using your first code, that also has the image added in there the way you showed me. I think I'll be using this code more as long as I find suitable images that your affect would make look cool. Thanks.

lemoncake.freeforums.net/

[Tumbleweed]

Aug 7, 2016 8:12:24 GMT -8 Skidjit said:

Tumbleweed

Hello there. I have two links to share with you.

Here's one to my main site. I decided to see what it would look like (I'll probably not leave it here but for a while.) by setting the color to transparent, so not to have something completely surrounding the whole container, I found it had a cool almost magnifying affect to it.

Now here's my question, you can tell just where the shadow affect takes place in those spots. The left and right sides seem cut off. Is there a way to extend either side margins? Hmm? Maybe, if I were to want to choose what direction the shadow would be cast. Say... left side and bottom.... or right side and bottom margins.

After I tinker with this more, I plan on putting in, on each theme, the matching color background so it will no longer remain transparent. This is just to look at for now.

Here's my link to this one. <<removed link>>


-----

Now here's my test site where I am using your first code, that also has the image added in there the way you showed me. I think I'll be using this code more as long as I find suitable images that your affect would make look cool. Thanks.

lemoncake.freeforums.net/

Thanks and I really love that border brown background on the lemoncake site. Very cool. Yes, some depth at last on a site! I'm so happy. lol But I do think that site looks a bit squished but I won't say more as this isn't the place for critiquing.

I'm going to remove your other link as that is considered unfair advertising but I'd love to see that site too as you progress but please pm me as I mentioned in my previous post. I just love seeing members finished projects. Make my job worth doing. Thanks.

[Skidjit]

OH goodness, no problem at all. I will pm you next time. Funny thing, I only recently took out that link from my signature. I think I read a rule the other day stating that we are not supposed to have our websites in our signatures here. So, out it went. Honestly, I am glad to see people posting their sites. It gives us inspirations knowing what limits our own creativity can be extended. For example, the site I mentioned in my first post. If not for her posting her site in her post here, I would not have learned that proboards has the ability to have an indepth look to their sites. Cool!

But anyway.... lemoncake site is nothing more than me tinkering here and there. I never intended all of a theme to look complete. I've been tinkering with other stuff, like font settings and it's not turning out so well at the moment. (On the front page the font is HUGE, but on an open thread, it's teeny. But I'll get that fixed soon.)

So, what exactly do you mean by "squished"? If it's the teeny font, I'm hoping that would be solved soon. If it's something else, I'm all up for any advice if I see there's a viewing issue. I know I have lots to learn.

As for my other main site, I still need help if it's ok about those margin issues.

Thanks.

[Tumbleweed]

Skidjit,

I'm not sure where you got you can't have links in your signature because that is not so. In fact, if someone say, posts a link to their personal facebook or youtube in a post we direct them or suggest they put the link in their signature instead. 

As far as the lemoncake being squished, it is no big deal as I wasn't really thinking about it being a test site. It is in part to the big font size and I just thought the Last Post column would benefit by being a bit wider by maybe decreasing the threads/posts columns. But since it is a dabble site then who cares.

[Skidjit]

LOL! I'm glad it's not so. I honestly thought I read someplace on this site, where it said they no longer allow links in signatures because of some reason. I looked around after I read your post and could not see it. I think it might have been the section where you can get tips on how to run your forum successfully, but when I looked last night, that's not what it says at all. Oh well. Glad to hear.

I've been working hard, this past weekend to better understand the visual editor. I mean, there's at least 50 places where one can set JUST the background color of something. Not to mention all of the texts along with those properties. But that's my problem. I'm taking care of that now. Brian helped me some last night too.

---

I'm getting ready, for the first time, to attempt to try to modify (add to) a code. (Your's from this thread in particular.) It's past time for me to learn this stuff.

It might be a while, but I'll send that pm when I get things the way I imagine. Thanks for everything.

[Skidjit]

.container{
background-color: #f5f0bd;
border-radius: 15px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
box-shadow: 1px 1px 15px 1px #000;
padding:8px;
}

Tumbleweed

OH this is so beautiful!

This is the code tinkering I've done to add in side shadow. I'm going to have to go in on each of my themes, this affect would be good on, and use the color code I am already using so they will have this shadow affect too.

Thanks so much. You have made my day and more.

pm is coming in a sec.