Options
Homepage Slideshow on Black Background
peargrin
Registered Users Posts: 191 Major grins
Wondering if there is a way to make a homepage slideshow on a black background look more three dimensional, maybe with a drop highlight or something? I've tried changing the color codes on some of the CSS code I've seen for white backgrounds, but it seems to have no effect. I would appreciate any suggestions. Thanks!
[url]Http://peargrin.smugmug.com[/url]
[url]Http://peargrin.smugmug.com[/url]
0
Comments
I agree that a black background and images over a black background looks kind of "harsh" and unfinished. Not sure I'd go with a fancy border though. See if my homepage - http://jamesfarrell.smugmug.com - has any appeal or is something that might interest you.
Prescott, AZ
http://jamesfarrell.smugmug.com
Personally I'd throw a light/ grayer shadow on it and see what folks think.
I like the look of a drop shadow. This is what I did on my site
www.vnemeth.com
Here is the code that I got from this forum
/*ADD RADIUS CORNERS TO SLIDESHOW AND LARGE PIC IN GALLERIES*/
.sm-tile-single.sm-tiles-uncropped .sm-image {
border-radius: 25px;
box-shadow: 10px 10px 10px #888888; /*LEFT THIS INCASE I WANT TO GO BACK TO A SHADOW*/
max-width: 85%;
margin: 0 10px 18px 18px;
border:1.5px solid #000000;
}
I used an image background on my homepage and placed my slideshow on top of that. I also added a black background to the slideshow so my homepage image would not show through the slideshow images during the image transitions.
It worked for me, but may not work for others...it's like vanilla and chocolate ice cream, everyone has a different taste.
Phil
http://www.sunglophoto.com
www.sunglophoto.com
▬▬▬▬▬▬▬▬▬▬▬▬▬
Thanks for your suggestions and examples. I really enjoyed seeing your sites! I did try a grey shadow with my black background, but it just didn't look right. I'll keep tinkering.
Many thanks!
Pear
How did you add the black background to your slideshow? I'm trying to figure that out myself ... !
I'm embarrassed to admit I've forgotten how I did it. Quite a bit of time has passed since I setup my slideshow...well, that and old age is creeping up on me.
No one seemed to be interested at the time I posted my message, so I didn't go into detail. I'll have to go back, scratch my head, and try to figure out how I accomplished adding the background.
If I can strain my brain enough to remember, I'll post a response. Seems to me I stumbled on the solution by accident.
www.sunglophoto.com
▬▬▬▬▬▬▬▬▬▬▬▬▬
The light bulb finally lit up...I remember...I think.
I placed this in my CSS which added my slideshow border and the black background color:
/* Slideshow Border */
.sm-slideshow {background-color: #000000; border: 10px ridge #000000; border-radius:8px; max-width: 100%; box-shadow: 0 18px 10px -10px rgba(0,0,0,0.7);}
www.sunglophoto.com
▬▬▬▬▬▬▬▬▬▬▬▬▬