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.
Related
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 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.
This is my layouts menu:
http://gyazo.com/da1f1954a34694facaaab8ce6c92b267
Can you see the Black and white low opacity lines between each menu item?
How do I make them exactly in that size? also you can see theres a space amount of space in each menu item, how do I do so?
Thanks
1) For borders use rgba:
your_li_element_selector {
border-right: 1px solid rgba(255, 255, 255, 0.5); /* white border with opacity 50% */
border-left: 1px solid rgba(0, 0, 0, 0.5); /* black border with opacity 50% */
}
Hide left border for the first menu item:
your_li_element_selector:first-child {
border-left: 0;
}
Hide right border for the last menu item:
your_li_element_selector:last-child {
border-right: 0;
}
2) For space use margin and padding properties of li element and a inside it.
You can do border left and border right using RGBA and change the opacity down. First-child and last-child to remove the extra borders. Downside is the above things will not work in some older browers. As #dev said the best fit might be using images.
Example using RGBA, first-child and last-child: http://jsfiddle.net/Ra9NT/
I have a list:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Citrus</li>
</ul>
When I put a background color on the <li> nodes the box-shadow (inset) that is on the <ul> node will be hidden. Is there a way I can get the inner shadow of the <ul> on the foreground so it will overlap the background-color of the <li> nodes?
ON REQUEST HERE IS THE SAMPLE: http://jsfiddle.net/JbAEL/
Hover with your mouse over the items and you will see the red background color will overlap the inner shadow removing the effect.
Talking about a dirty approach, since there is no foreground property ;) I decided to make the UL node relative, append it with a div node at absolute that carries the inner shadow.
For a working version:
http://jsfiddle.net/JbAEL/14/
HTML & CSS rely on a strict set of defined logic, and unfortunately do not have a way to order via z-index an element's content and it's background independently from each other and interweave them with different elements (as far as I'm aware).
Here's one proposed method, it's not the most ideal of solutions but sometimes breaking the rules involves getting dirty. Apply the shadow to each of your li elements and slide the shadow depending on which element it is on the list: top, bottom or any element in between.
HTML
<ul>
<li><div>Elephant</div></li>
<li><div>Monkey</div></li>
<li><div>Snake</div></li>
<li><div>Zebra</div></li>
</ul>
CSS
li
{
overflow:hidden; height:30px;
}
li div /* middle items (default) */
{
box-shadow : inset 0px 0px 10px #000000;
-ms-box-shadow : inset 0px 0px 10px #000000;
-moz-box-shadow : inset 0px 0px 10px #000000;
-webkit-box-shadow : inset 0px 0px 10px #000000;
line-height:30px; height:30px; margin-top:-30px; padding:30px 10px;
}
li:first-child div /* top item */
{
margin-top:0; padding-top:0; padding-bottom:60px;
}
li:last-child div /* bottom item */
{
margin-top:-60px; padding-top:60px; padding-bottom:0;
}
You can see the full code and demo at the following jsFiddle, and seems to work fine in Firefox 11 and IE9, but can't vouch for other browsers.
The background-color of your lis fall on top of the shadows. If you want to retain the shadow, you can make the background color slightly transparent. Try changing background-color:red to background-color: rgba(255,0,0,0.1) say, where the last value is the opacity. This retains the inset box-shadow, but the color overlay will become a little faint.
I want the arrow that appears when a div is hovered here to also drop a shadow. The arrow is drawn from CSS:
.arrow {
position:absolute;
margin-top:-50px;
left:80px;
border-color: transparent transparent transparent #ccff66;
border-style:solid;
border-width:20px;
width:0;
height:0;
z-index:3;
_border-left-color: pink;
_border-bottom-color: pink;
_border-top-color: pink;
_filter: chroma(color=pink);
}
The shadow setting I want to apply is:
-moz-box-shadow: 1px 0px 5px #888;
-webkit-box-shadow: 1px 0px 5px #888;
box-shadow: 1px 0px 5px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');
The problem in just pasting the shadow setting into the arrow is that the shadow applies to the entire span box and results in a box shadow instead of an drop shadow for the arrow.
P.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html. However, if its a must please do provide the code.
Applying the box shadow to the css border triangle will not work, it will only ever apply it to the whole element box.
You can achieve what you are trying to do by changing your css border triangle into a square div, rotating it 45 degrees using css3 and then applying the box-shadow
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
Edit:
Updated
Edit:
See the link below for another approach using css content and :after
http://css-tricks.com/triangle-with-shadow/
I haven't tested other browsers, but I noticed that CSS Arrow Please uses a neat little trick
Using this syntax on the parent box will also add a dropshadow to the generated "arrow":
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
But using this syntax will not?:
-webkit-box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.04);
Credit to Blowsie for the original answer that led me to the following implementation. Here is a working jsfiddle implementation for Chrome. The relevant CSS:
/* Make an arrow */
.arrow{
background-color: pink;
box-shadow: 3px 3px 4px #000;
width: 30px;
height: 30px;
/* Translate the box up by width / 2 then rotate */
-webkit-transform: translateY(-15px) rotate(45deg);
}
Caveat
If the content of your box overlaps the arrow then the illusion is broken. You might try working around this by changing the z-index of the arrow to be behind the box but this will cause the box drop-shadow to be rendered on top of the arrow. Add sufficient padding to the box content so that this doesn't happen.
I’m afraid drop shadows only apply to the element box, rather than the angle of the border corners. If you want an arrow like this with a drop-shadow, I’m afraid you’ll have to make it as a PNG image, with the drop shadow in the image.
CSS generally only produces square boxes. The border trick to make a pointy arrow here with CSS is a clever hack.
Another way to achieve arrow with shadow, which will work for all the browsers is to use html triangle character in unicode.
HTML:
<span class="arrow">▶</span>
CSS:
.arrow {
color: red;
text-shadow: 0 0 20px black;
transform: scaleY(1.4)
}
Since that is rendered as regular text you may apply the text-shadow property. For customize the arrow dimensions (want to add extra width or height or skew the arrow) css3 transform property is the key.
Here is reference with html characters: http://www.copypastecharacter.com/graphic-shapes
Enjoy