I want to use box-shadow everywhere except from the top on this example:
http://jsfiddle.net/KquxS/2/
I'm pretty sure it can be done with z-values but I'm not sure how, as you can see I've had a little play trying but no luck.
I wouldn't recommend using z-index.
Consider using the following style:
ul:not(:first-child) {
box-shadow:0 0 40px black;
}
I'm gonna leave this but I think the comment you just posted helped clarify what you're looking for.
If you use position: absolute, you have to provide the position (top, left, etc) as well. Otherwise position and z-index have no effect and the elements will be drawn in the order they appear in the DOM.
See http://www.w3.org/wiki/CSS/Properties/z-index
Related
I'm looking for a way, using only modern css, to select all elements which have a background-image which utilizes any sort of gradient and then overwrite that value with 'none'. Essentially, I need to wipe out all background gradients. This is what I have so far but it doesn't seem to work:
*[background-image*="gradient"]{
background-image: none !important;
}
I'm starting to think that attempting something like this is not sane, but I'd like to know for sure. Is this even possible? If so, what am I doing wrong?
You cannot solve this problem using HTML and CSS.
You could use Javascript to check the background-image of every element in the DOM. With a huge DOM this can become slow, but seems like you have no other choice.
How about this method. you only have to add the class gradient for all those elements which are using gradient effect. I understand its a bit of work but it will solve your problem.
*[class*='gradient'] {
background-image: none;
}
how to make a circular highlight over any object on a site....
I been looking around and can't find almost any documentation for this. Although I seem to believe that anything is possible now with css, something tells me this would only be available with something like canvas and take a lot of memory.
The only other post I've seen about this is this one...
(jquery) Blackout the entire screen and highlight a section of the page?
although they didnt address the circular issue there
I've seen on a few sites how to highlight a certain element, but how exactly would you make the highlighted area a circle? By only adding z-index to make a square element show above the overlay, it seems impossible to make the area a circle..
Maybe I could z-index every element that would be included in the circle and create a shadow around the edges the same color as the overlay(but if the spotlight needs to run onto part of the background i would need to include the entire background and that could turn ugly)...this may work actually, in certain cases, but that sounds a bit jenky, no?
anyone have a good solution for highlighting objects on a page but that highlight being a circle / almost like spotlighting a element...
You can do this with border-radius and box-shadow at least that's the only way I can think of with pure css
What you do is you make an element that is circle with a transparent background, then you give it a box-shadow completely black that will fill the whole of your page, and you can get some amazing effects.
Example code
#torch{
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
position: fixed;
box-shadow: 0px 0px 0px 2000px #000, 0px 0px 50px inset;
}
Don't forget to add your prefixes -moz-, -webkit- ..etc and don't forget your z-index if you need it.
Demo at JSFiddle
By using border-radius to make the circle and for the other stuff may be this can help you..http://jquerytools.org/demos/toolbox/expose/
Just use border-radius to make the container you want to "expose" a circle.
Using the jsfiddle example from your linked post, i've trimmed it down to be easier to follow, but essentially, you just need to use the post you linked to along with a big border radius value to mimic a circle.
http://jsfiddle.net/98EAt/
2 years since the question was asked,
I've developed a plugin for this matter,
Let me know your feedback.
I would like to add some right-positioned borders to my menu.
But the ones that I can use by default are not working for me. Can anyone recommend where to get a bit better looking borders, and how i add them in the css?
the css style you need :
#mymenu
{
border-right:solid 50px red;
}
You could try using jQuery (its more shape than actual border)
There's also a set of jQuery plugins to use on top of that.
Finally, there are some nice and easy css3 border properties that you could use.
I hope this helps.
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com
I have a div that contains a link:
<div id="like_bar"></div>
With some CSS:
#like_bar{
width:140px;
height:26px;
background:url('bar.jpg');
}
#like{
display:block;
width:20px;
height:20px;
margin:3px 36px;
background:url('mini_img.png');
}
The link is placed at the top of the bar and the margins on the link are applied to the bar. This is annoying. Could someone explain these collapsing margins, how to avoid them and what they're used for.
There are many ways to "fix this".
Perhaps the easiest for you would be this:
#like_bar {
overflow: hidden
}
Other ways include:
Add some padding
Add a border (even border: 1px solid transparent is enough)
float the element
position: absolute
And, like in the snippet above, set overflow to a value other than the default of visible.
You also asked:
what they're used for
A common use case is the <p> tag.
See: http://jsfiddle.net/thirtydot/tPaTY/
Without margin collapsing, certain things would become annoying.
Because I'm lazy I'm just going to link to a few resources:
My answer here explains why the box model is the way it is, which is related to margin-collapsing being included.
The w3c css spec defines the behavior of margin collapsing. It's an expected behavior for convenience given the box model. You don't need to worry about double margins between blocks of content with it. What it sounds like you actually want is some padding around #like, rather than margins.
Think of CSS as a content-centric inside→out approach to styling, rather than a programmed outside→in approach.