My problem is, I have a draggable element, that has some styling. When i'm dragging it, it doesn't keep all the styles, some of them disappear WHILE the element is being dragged.
Specifically the one I need to keep is box-shadow.
Fiddle here
Standard box-shadow style:
.fixed-red-bg {
box-shadow:10px 5px 5px 5px;
}
How do I not lose my box shadow while dragging that element? Optionally, is there any other style, that is not lost while dragging, that can be used to mimic a depth effect?
On Chrome and Firefox, when you drop the red box into the drop area, the shadow does appear to remain. However, while you are dragging it Chrome will usually drop the shadow. I recall this problem being reported a few years ago but I don't believe it's been resolved?
While someone else may have a suitable fix using css, what you can do is make a semi-transparent .png image as the shadow, and position it under the object using the pseudo before
Related
Consider the following code: http://jsfiddle.net/A98vk/
The wrapper div has two (top-left and top-right) corners rounded. The second div is directly nested and I would like to give it a background gradient.
The problem I experience is that the background linear gradient (sorry for only adding webkit version, I have Chrome) gets cropped when the css property border is either absent or set to 0 or 0px [any params]. When I set the property back on, the problem resolves.
Can anyone please tell me what's the problem with it?
I understand I can just set border: 1px solid rgba(0,0,0,0), but this seems like a workaround for me.
Margin collapsing is happening. There are tons of questions/answers about margin-collapsing on stackoverflow. I've answered one (maybe more) myself: Adding CSS border changes positioning in HTML5 webpage
Basically the h1's margin "collapses" and is applied to the surrounding header instead. No background is cropped. The header simply gets smaller.
Elements margins collapse when there is nothing in between them. When you add the border up there you put something in between them, hence no margin collapse.
There's a little more to know about this, including other ways to stop the margins from collapsing. You can check my answer above or simply google it for perhaps more detailed explanations.
You can add overflow:auto (or hidden) to the .header div and fix the cropping.
See this demo
I have a few radio buttons that I'm styling with PNG background images, using :hover to swap out the background image for one with a surrounding halo. The halo areas from adjacent radio buttons overlap, so they should not be part of the clickable area. Yet they are still part of the same image.
Ideally, I'd like to show the halo behind the padding area, so I need the content area of each radio button to be clickable, but not the padding. I can't find any CSS attribute that controls this. The pointer-events attribute is almost, but not quite what I need, and most of its values apply only to SVG anyway.
All that Google searches turn up are pointers on how to use the padding to make the clickable area bigger, not smaller. I can use CSS3-only attributes if necessary, but would prefer not to add any extra markup to my HTML.
Any bright ideas?
I'm afraid this is not possible without adding extra markup. If you were using divs you could add a pseudo-element that contains the background image, but unfortunately it is not possible on input elements (:before and :after).
You need to add a wrapper div that handles the background image:
http://jsfiddle.net/sQGV9/
Also, beware of the usability issues this may cause, a hover effect usually implies that the element is clickable, so in the jsfiddle I added a cursor: pointer so it is clear the precise area where you are supposed to click.
If you attach an image with the halo effect you want to achieve it may be possible to achieve the effect in css3, removing the need for extra markup.
You should change it to margin. Than should be not clickable.
if your border or padding is thicker, then You can keep a new div on it with the position absolute,higher z-index and the alignments using 'top' and 'left'
If you use Shadow filters in IE8 on a DIV, the DIV's contents will be offset by the shadow. If you give that DIV a border, this leads to weird behaviour. This is how it looks
The whole contents and the shadow go out of bounds of the div, having an offset to the border. Is there any way to correct this, or even to fake-correct this, at least getting the border back in position?
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.
This isn't a major issue as it can easily be tweaked with a bit of css - just something I'm interested to know. Why does the border appear within the height of a button element instead of outside, as per box model? In the example below I have a button element and an anchor element. Both height 30px, with a 1px border. However the button element appears 2px shoter than anchor (which displays correctly at total height 32px).
http://jsfiddle.net/Y9Rv7/1/
Thanks
Adding this to the style should resolve your problem
box-sizing: content-box
This will cause the element to render as you want. I believe that by default buttons render with the border-box behaviour wich causes padding and borders to be added inside the box.