I've got a CSS drop down menu that I'm trying to build, and the background of the drop down has a faded/tapered box shadow:
I'm having trouble pulling off how to get the box shadow to actually taper/fade off.
Here's where I'm at right now: http://jsfiddle.net/Shpigford/f9aKR/
I've tried using :before and :after pseudo selectors, among other things, but can't quite get it right.
For clarification, I'm specifically only needing help with the shadow on the drop down. My jsFiddle is a stripped down version to keep the example as straightforward as possible.
I've added a before element.
gave it a gradient background (from transparent to a semi transparent black) to achieve the top to bottom fade.
gave it an inset box shadow to achieve the in -> outfade.
Take a look -> http://jsfiddle.net/f9aKR/22/
Edit the amount of fade/colors as you want.
Related
I have an image inside the .nav container with background-positioning property set to right that is set under the hover selector to display. It's working almost perfect except I want to move the image over to the left a bit closer to the actual navigation link. When I try to use inset border thickness or absolute positioning it it either moves the text for the nav link as well (inset border thickness) or its get really messed up when I use absolute positioning for background-position. Any way to move the image without it affecting any things else around it? New to HTML5 and I am using dreamweaver CC and am unfortunately away from my comp at the moment.
Try setting the left property of the background image. In my experience, if you mess with the container then it will mess with everything else. Also, you might have to tinker with the actual image to get it look right.
I am trying to give my page's container a shadow effect (starts dark on bottom and becomes white on top) BUT, only on the left and right side (imagine two vertical lines). But most of the tutorial found just 'shadow' the top or left/right, or bottom left/right. I really need to give a shadow effect to my website container, so any help will be great
This trick might helpful
BoxShadow
try to use css3 generator website to generate shadow, maybe you are missing something or around your container are other elements with position absolute and high z-index. maybe you can do a printscreen?
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.
I need to modify a website to make the clickable zone of all links bigger for mobile devices. I gave all links a transparent border and a negative margin of the same size, to not affect the text-flow. Now this works like a charm. But not on elements that have a background. The background spreads out to the transparent border. This is behaviour seams to be consistent among all browsers.
http://jsfiddle.net/hq65C/1/ here a other example: http://jsfiddle.net/DytDA/
Why is this? I was always thinking that the border is outside of the element. How could I fix this. (I need a solution that does not require to modify the HTML).
How about background-clip: padding-box;?
Demo
i think that if the border were outside the element, the behaviour you are behind (that clicking on the border behaves as clicking inside the element) wouldn't work either
if the background-image is not repeated, you can set background-position x position to the same amount that your border width. else, you can also try setting the border-color to the same as the color behind the element, but if it is an image, good luck
CSS background fills the area of the border, with the border-color layering over this.
As you have a transparent border, it is displaying the background-color behind it.
With plain HTML/CSS, I'm not sure there is a way around this.
This jsFiddle demostrates this:
http://jsfiddle.net/hq65C/8/
try this:
<span style="background: red">link</span> test test test <br/>
test test test
notice: the span means an inline element with another style (other CSS values). other that div which will force a new block.