I have a wordpress site I'm working on and I'm needing to add CSS3 drop shadows to four elements. Content-menu-wrapper is independent of the other divs (not graphically connected) and is functional.
Next divs are content wrapper, footer, footer-bottom. Each div is graphically 'connected' one on top of the other. Content-wrapper needs shadow on top, left and right. Footer needs shadow on left and right. Footer-bottom needs shadow on left, right and bottom.
When I try editing the shadow to "test", the shadow simply disappears. Most likely I'm using the code wrong. Below is the functioning code for content-menu-wrapper.
CSS :
#content-menu-wrapper
{
background-color: white;
margin:0px auto 15px auto;
height: 32px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
Please help me with the code for the other three divs. Thank you.
Left and right is easy:
box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.6),
15px 0 15px -15px rgba(0, 0, 0, 0.6);
Getting three sides to look good however is really hard as using the above technique there are gaps in the corners.
My suggestion would be to enclose all the elements in a wrapping div and apply the box-shadow to that. Keeps the CSS much cleaner and is easier to pull off.
Use this online tool to get the css for the shadow for your divs.
I was able to fix this problem by wrapping the content and footer divs within a larger div per jimjimmy's answer above. These are the details: First I created a new div id in common.css, "content-shadow".
Then I added the box-shadow attribute plus copy/paste attributes from my content-wrapper div so the site would format correctly. In my case it looked like this:
#content-shadow {
border-left:0px solid #E7E7E7;
border-right:0px solid #E7E7E7;
border-bottom:0px solid #E7E7E7;
border-top:0px solid #E7E7E7;
background-color:#FFFFFF;
margin:0px auto 0px auto;
margin-bottom:0px;
margin-top:0px;
width: 1000px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
Next I placed a div in the header.php file of my theme before the "content-wrapper" div. Saving that file I moved to the footer.php file and placed a tag at the end of the file in the appropriate place. For me this was above "content-bottom-empty-space" div so I could have a little space on the bottom of my site.
Save the file and now it will/should propagate throughout wordpress. I hope this helps somebody in some way.
Related
I have a simple frame.
Code I use for borders:
box-shadow: 0px 0px 0px 5px #E1E1E1;
Every other element looks okay, but this one kinda acts weird. Only top border.
.frame {
height: 585px;
}
.frame:hover {
box-shadow: 0px 0px 0px 5px #E1E1E1;
}
<div class="frame" background-image:url(...png)>
...
</div>
First : background-image:url(...png) is not correct, you need to wrap it into a style attr if you want inline styling, so style="background-image:url(...png)" is correct. (also image path should be a valid one)
Second : The border is 5px tick and appears only on hover, by default it will add height/width to the element, if you want to keep the size of the image on hover you should think of using a box-shadow: inset 0p 0p 0p 5px #E1E1E1; Also if you are wondering why it looks like a border instead of a shadow, see this: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp . You are setting a blur of 0px s0 that's why.
Hope it helps!
I am creating a site for my hometown in Wordpress. Because I want that the user sees the whole background image, I modified the main div's transparency property. So far so good. However, I also want to have a Google Maps box on the website. Since it is also part of the main div, the Google Maps box is also transparent (which makes it really hard to see what's going on). I wonder if there is a way to add an exception to the main div's transparency just for the Google Maps box.
Any ideas would be much appreciated.
This is the CSS3 code I use. cbox is the main div that needs to be 0.80 transparent. gmapsframe is the box for the Google Maps.
.cbox {
overflow: hidden;
width: 958px;
margin: 0 auto;
padding: 20px 0 0 0;
background: url("images/cbox.png") center 1px no-repeat;
background-color: rgba(0, 0, 0, 0.8);
}
.gmapsframe {
background-color: rgba(0, 0, 0, 1);
}
It doesn't seem to work at all.
There are 2 ways you can do this,
Option 1 is to override the parent transparency. Apply this to your maps div
<div id='transparentDiv' style='background-color: rgba(0, 0, 0, 0.4);'>
<div id=mapDiv style='background-color: rgba(0, 0, 0, 1);'></div>
</div>
Here is a JS Fiddle example: http://jsfiddle.net/V9Y5f/
Option 2 is to use absolute or relative positioning:
<div id='containerDiv'>
<div id='transparentDiv' style='background-color: rgba(0, 0, 0, 0.4);'>
</div>
<div id='mapDiv' style='position: relative; top: -30px;'></div>
</div>
Here is a JS Fiddle example using relative positioning: http://jsfiddle.net/p7TXU/
Instead of using the opacity property of CSS, use rgba on the parent, as it handles opacity, and does not affect any children.
Ps.: You don't need to change anything regarding transparency on any children of that div.
More info regarding rgba.
I planed to add an image below a div. It would be below a navigation bar (div), adding some nice shadow effect (img). Looks like this:
<div>...</div>
<img>
So far it is just in the html code, but I want to keep the html code since it's a theme that gets updated frequently. So I want to alter only the CSS.
Is there a way to do that without altering HTML code, just using CSS?
Two suggestions:
Add the shadow image as a 1px x Xpx repeating background image to the bottom of your nav DIV. So it would sit within the nav DIV. Simply add some padding to the bottom of the NAV DIV to accomodate it e.g.
nav {
padding-bottom:6px;
background:url(images/nav-bg.png) repeat-x 0 bottom;
}
(The above code would presume you have a background image which is 6px in height and probably 1px wide (but that's up to you) and the path would obviously have to be adjusted to be where your actual image was located.
Instead of adding an IMAGE under the NAV DIV add another DIV and once again add a 1px x Xpx shadow image to that DIV through the CSS.
you cant change the source of an image element through css...
you could create the shadow using CSS tho:
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
or you could change the image through javascript or from the codehind
javascript: $(element).src = "path to new image";
I have an element that has inset box shadows, but I want the shadow on only the top.
Is there no way to set only the top shadow? Do I have to resort to creating additional elements to overlay the side shadows?
This is technically the same answer as #ChrisJ, with a few more details on how to make box-shadow do your bidding:
for reference the * items are optional:
box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;
The <spread-radius> needs to be negative <blur-radius> (so that none of the other blurred sides show up), and then you need to bump the <offset-y> down by the same amount:
box-shadow: inset 0 20px 20px -20px #000000;
It will give you a single gradient band across the top of the element.
box-shadow offsets the shadow by a given amount in each direction. So you need x-offset to be 0, and y-offset to be something negative.
Additionally, you have to play with the blur-radius and spread-radius so that the shadow is not visible on the left and right sides.
Example:
box-shadow: #777 0px -10px 5px -2px;
See the description on the Mozilla Developer Network.
A better way would be using a background gradient, here are both side to side.
http://jsfiddle.net/wh3L8/
Example:
box-shadow: 0 2px 0px 0px red inset;
The First parameter and second parameters specifies the offset of shadow to x-direction and y-direction respectively.
Third parameter specifies the blur distance.
Finally, the fourth parameter specifies the spread distance.
Specifying only the second parameter with the offset you want gives the top shadow without side shadows.
Demo can be found here: http://jsfiddle.net/rEdBy/
A very nice tutorial on CSS3 Box shadows - http://www.css3.info/preview/box-shadow/
Here is my example please try once
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
Here's a little hack that I did.
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div>
Create a <div class="one_side_shadow"></div> right below the element that I want to create the one-side box shadow (in this case I want a one-sided inset shadow for id="element" coming from the bottom)
Then I created a regular box shadow using a negative vertical offset to push the shadow upwards to one-side.
box-shadow: 0 -8px 20px 2px #DEDEE3;
Maybe try using box-shadow:
box-shadow: h-shadow v-shadow blur spread color inset;
with overflow-x:
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
use overflow-x: hidden; and box-shadow: 0px 10px 16px -10px #000;
I noticed using the clip property also removes the box-shadow property. Is there a way to use both on the same element?
Some background: I have three columns for three types of products. Each product has an image, and each image is different in size. I want to standardize image size so my products display consistently. But I would also like to use box-shadow to make the images more appealing. To make images the same size, I have to clip the bottom. But clipping the bottom also removes the box-shadow from the bottom. Is there anyway around this problem?
Here is my code sample:
<ul class="gameCover">
<li class="coverSpace"><img src="images/#IndexView.GameID#.jpg" alt="" title="" class="frontThumb" /></li>
<li>→ See More</li>
</ul>
.gameCover {
float:left;
width:110px;
}
.coverSpace {
height:135px;
}
/* CATALOG GAME COVER IMG */
.frontThumb {
float:left;
position:absolute;
overflow:hidden;
clip:rect(0px, 100px 115px, 0px);
-moz-box-shadow:3px 3px 7px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:3px 3px 7px rgba(0, 0, 0, 0.5);
}
/* END CATALOG GAME COVER IMG */
Thanks!
Without seeing your markup, I don't know if this would work for you, but you could possibly apply box-shadow to the img's containing element.