What I'm looking to achieve is a "half way" shadow using CSS3 in replacement of an image.
Below is a slightly zoomed example of what I'm trying to achieve:
There are three elements involved here, as displayed below (scaled down):
So far I've tried placing a box-shadow on element A and then pushing a higher z-index on element C so that the shadow is only visible over element B, but couldn't replicate the half-way cut off.
Has anyone attempted to achieve this before, or is the outcome always going to be as 'hacky' as I think it will be?
Make sure you're setting a position on the elements you're applying a z-index to:
http://jsfiddle.net/Vxz9f/
I just faced same problem and fixed it the following way:
Give the C div a higher z-index
Make it overlap (cover/go over) the A div for 5px (or whatever your
shadow px amount is).
If u do that with the same color, you will hide the shadow perfectly and you'll get your half way shadow.
Related
I've just run into an interesting problem. I have 3 divs positioned next to each other with display:inline-block and with width:32%. All of them has a button inside which have box-shadow sets.
Output:
http://imgur.com/a/3HWyp
As you can see on the first picture there are shadows on the 1st and on the 3rd button, but the shadow's direction differs from the 2nd button's.
I've checked everything in the debugger, they have the same box-shadow setup.
If I change the inline-block to inline just for testing (second picture), the shadows are get into the same (right) direction, but - of course - there are problems with the widths.
I need to put the 3 buttons next to each other.
Please help :)
Thanks in advance!
I've got it:
JSFiddle: jsfiddle.net/bt4jvr8k
The problem was the "col-3" div's "overflow:hidden".
Almost same problem was with the button's "overflow:hidden", but it just crops the shadows from the sides, while the div's crops from the bottoms as well.
I'm trying to create a visual effect using CSS, which you can see here: http://jsfiddle.net/FL8Ug/
The problem at this point, is that when I use both border-top and border-bottom on the :after pseudo element, the edges become "jagged" (in Chrome).
When you remove the border-bottom for example, the top triangle (which is the top half of the right border) becomes much smoother.
I tried applying both -webkit-transform:translateZ(0) and -webkit-backface-visibility:hidden, which has fixed strange behaviour like this for me in the past, but to no result.
Does anyone know if there's a fix for this?
(I also noticed that in Firefox, the border is always jagged, also after removing the border-bottom.)
Note: I'd rather not use both the :before and :after pseudo elements, because I'm already using the :before for another effect.
I appear to have fixed this. For some reason it's only when you use three borders that it gets jagged but if you just use two it stays smooth. So I split your after in two and made a before for the third border.
Codepen of the solutionenter code here
See here for code: http://jsfiddle.net/9pezn/
I know how to do the position bottom, negative margin trick with a bottom-border to make a hovered/active "tab" z-index over it but have been unable to recreate this effect when using a box-shadow. Any ideas?
I.E. I want the main navigation tabs to be on top of the box-shadow! I am essentially attempting to replicate what the Nike.com navigation does. E.g. When you hover over "Sports," then the bottom shadow is covered.
Thanks in advance!
z-index is your friend.
Set the first-level navigation to z-index:1 and then set the second-level navigation to z-index:2 and it should sit on top of the box-shadow from the first-level navigation.
Long story short, Nike did it with a series of cleverly stacked images. I'm not positive you can do this with a native box-shadow implimentation, for two reasons:
1) the box-shadow is tied to the z-index of the element, meaning you can't pull the children of nav1 above the children of nav2 without causing the nav1 box-shadow to overlap nav2.
2) If you found a way to get around it (perhaps by applying individual box-shadows to each nav "tab" instead of the container as a whole, then the shadows would slightly overlap, causing darker spots.
It's possible there's a solution out there that I'm missing, but this is one of those cases where I would probably throw in the towel and use images instead.
I found a solution I'm willing to settle for: http://jsfiddle.net/LVppY/
Scott, you were on the right track that it could be done with z-index
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
Just looking at some CSS here, and I noticed:
.head{position:relative;overflow:hidden;margin:-30px 0 0 -25px;width:820px;padding:20px 25px 0 25px;background:url(/images/bkg.gif) 0 0 no-repeat;}
Why would you put -30 and -25px margins?
I started typing an answer, and then found a much better one here (Wayback Machine backup). Some salient points:
Negative margins:
are valid CSS
don't break page flow
have high levels of cross-browser compatibility (although if they break your link or floated image, then try adding position: relative; that should fix it)
Their effect on unfloated elements:
applying them to the top or left of an element "pulls" that element in the appropriate direction(s)
HOWEVER, applying them to the bottom or right of an element "pulls" immediately subsequent elements into them, making them overlap
Their effect on floated elements:
this is more complex and I can't summarise it better than the article. Have a play around in Firebug to get a feel for them.
There are some brilliant examples of negative margin use in that article (especially the 3-column layout! Magic. I've used a similar technique for page layout before.) The most common use for them I've found is just to move an element a small amount to correct its position, and to make one element overlap another for visual effect.
A lot of tricks and nice effects use negative margins:
Image Replacement Trick - when you want to use that particular font and you just can't tear away from it, image replacement is the trick. Uses negative margins to push out the regular font and replace it with the "picture" font.
Image Rollovers with borders - giving a negative margin to the image the same size in pixels as the border size will keep the image, and therefore the layout, from shifting on a rollover.
Center screen positioning - using negative margins the same dimension as the height and width of the object you want to center, you can center an object in the middle of the browser.
Negative margins can be helpful when you have other element "around" that you want to e.g. have a padding for all other elements. I use it very often, read here, why:
http://www.simplebits.com/notebook/2005/05/23/negative.html
Actually i think there is an use case where negative margins are the only right thing to do:
You want an part of a box to extend over the whole parent, even over the padding. So instead of removing the padding of the parent element an apply it to all children exept for your special case, you give your special case a negative margin. Also no haggling with positioning. Works great and is very readable.
Example: http://codepen.io/anon/pen/DpHvu