I just need to give a dropshadow effect to a table (around its borders) on mouse rollover!
I can do that for DIVs but can't find a way to do it for tables.
Any help would be appreciated.
Thanks
table:hover {
box-shadow: 3px 3px 10px #999;
}
See http://jsfiddle.net/pavloschris/JbWmK/2/ for the result.
If that somehow doesn't work, you can always wrap the table in a div and apply the box-shadow to that.
Edit: this obviously won't work in old browsers, but you can use prefixes for that.
Related
Im adding a border to my table row dynamically using JS.
This causes the table to jump down slightly because of the border adding height to the row.
How can I prevent this?
I've tried adding a transparent border, which then gets replaced with the real border.
This works, but I was looking for a better solution, so I tried:
box-sizing: border-box
This did not work.
What's the best solution to this?
If you don't want to use a transparent border (advisable for you to use it, not sure why you wouldnt), you could instead simply give the cell padding of the same amount as your border width, and remove on hover, e.g.
Demo Fiddle
td{
padding:3px;
}
td:hover{
border:3px solid;
padding:0;
}
Alternatively, if you couldn't spare the padding - and you don't need to support IE8, you could try tinkering with box-shadow
td:hover {
box-shadow: inset 0px 0px 0px 3px #111;
}
http://jsfiddle.net/evanbriggs/vbcutxmq/
I'm using GWT's StackLayoutPanel and trying to round the corners of its headers by applying border-radius attribute in the following CSS rule:
.mm-StackPanelHeader {
padding-left: 7px;
font-weight: bold;
font-size: 1.4em;
width: 200px;
border-radius: 5px 5px 0px 0px;
background: #d3def6;
border: 0.5px solid #bbbbdd;
}
When collapsing the header items, the borders don't cover over each other completely, showing ugly white cornered ends.
How to fix this?
Here's the output's snapshot, for a reference.
Assuming you're going for the old widgets' look n' feel, achieving the exact same result will inevitably involve replacing images and messing with the widgets' layout properties (e.g applying negative margins, altering offsets).
Having said that, I managed to get a quick CSS-based solution that seem to target your needs, and is free of further manipulations. I'm sure a more accurate solution is available, as this attempt is far from perfect, but it should provide you with a good starting point.
Abstract
To simulate the old widgets' looks:
Round up the top corners for the item headers.
Apply a background color to the underling container, to avoid those ugly white corners.
Use top round corners on that container as well, to avoid ugly blue corners on it as a result of the background color applied.
Reset the bottom padding of the header items to re-center their content.
Implementation
Add the following rules to your stylesheet:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
background-color: #D3DEF6;
border-radius: 5px 5px 0 0;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
padding-bottom: 0;
}
Illustration
Here's an snapshot of the final result, as created by manipulating the CSS properties on the GWT showcase live example:
Well, StackLayoutPanel was a definitely a newer version than StackPanel.
But I used the latter in this case because there was no other way, and it worked like a charm!
Thanks to all!
I'm trying to highlight the row the mouse is over in a table of data. I'm trying to do this with a border-top and border-bottom. To help the readability i also have a light transparent png on alternate rows.
It seems that when I turn on and off the borders (works in IE8+ and FF) the rows jump around a little. I think I can fix it by having a a non-hover transparent border, rather than none at all. Is this x-browser compatible now days?
In Chrome, the highlighted row's border does not go away when you move the mouse off the row, why?
http://justinzaun.com/Tree/people/
Update: I've fixed the border issue in chrome where they wouldn't go away. I moved the border to the TDs rather than the TR. The rows are still jumping around though.
Thanks!
put an transparent border on your normal state elements.
When the :hover is applied the size of the border changes the size the element takes up.
eg:
.myelement
{
border:4px solid transparent;
}
.myelement:hover
{
border: 4px solid green;
}
http://jsfiddle.net/mPmRA/
EDIT:- more specifically to your table (ugh: tables ... collapse border makes the above not work properly)
http://jsfiddle.net/mPmRA/1/
put the transperant border on the tr
tr
{
border-top:4px solid transparent;
border-bottom:4px solid transparent;
}
And for the hover do something like:
tr:hover td
{
border-top:4px solid green;
border-bottom:4px solid green;
}
The td borders will then appear ABOVE the row's border.
An easier way is adding "margin-top:-1px; margin-bottom: -1px;" to the :hover style, this corrects the new height with the border.
Make sure your border is set to the INSIDE instead of the outside. Unfortunetly, the inset option for borders is not yet part of CSS. Here's a bit of CSS to make the borders inside the element using box shadows:
.mytable tr:hover {
-moz-box-shadow: inset 0 0 1px #000;
}
That will make a 1px black border on the INSIDE of your element! :D
I hope this helps, if you're set on a black dotted border, your only option is to set absolute positioning, and position each table row individually, which is a pain in the ass. :/
If you've got relative or static positioning, elements will move when other increase in size. Wulf's idea may work with a little configuring, but to be honest, the box shadow is a much nicer border then the dotted one. (a bit tacky if I say so myself. ^_^ Sorry.)
I have a background pattern which can be easily repeated. The problem is i have a shadow to the bottom of the background and to the right of the background. How do I repeat such an image? I thought I can probably cut the piece from the right and overlap that right shadow. Or using whole image is the only solution?
My suggestion is to use box-shadow css property to apply the shadows for your element instead repeat an image for the shadows also. You can use the following to make the shadows like your example:
-moz-box-shadow: 5px 5px 10px #000; /* FF3.5+ */
-webkit-box-shadow: 5px 5px 10px #000; /* Saf3.0+, Chrome */
box-shadow: 5px 5px 10px #000; /* Opera 10.5, IE9 */
Of course, as you see these properties doesn't support internet explorer 8 and below but you can use css3pie, a script that bring you some css3 properties to internet explorer. Is something that I often use.
Example: http://jsbin.com/iquso3
An alternative is to use a jquery solution from the many that exist.
For a background, using a whole image is the only solution, so you'll need separate images to do this on a flexible sized box.
You can probably keep the html and add the shadown using css, or by dynamically inserting extra divs using javascript/jquery.
Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations:
Creating a CSS3 box-shadow on all sides but one
How to add drop shadow to the current element in a tab menu?
CSS shadows on 3 sides
Simply put, I am trying to add a -moz-box-shadow of 0 0 10px to the .current_page_item class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the .content div which stores all of the blog's actual content, i.e. posts.
Based on what I have seen so far, it seems like I should set the z-index of something, not sure what (I have tried ul.menu) to something lower and the z-index of the .content div to something higher, but this seems to have no effect.
I am just wondering if this is normal behavior and if not, if someone could help me out with this situation.
Thanks, I really appreciate it.
EDIT: I put box-shadow in the post earlier, but I meant the respective specific directives, such as -moz-box-shadow. That was not the problem I was having.
You will need to add overflow:hidden on the ul.menu as honeybuzzer mentions, but since that would also cut-off the top shadow you should add some padding-top to the ul.menu as well..
overflow:hidden on ul.menu seems to get rid of the bottom shadow.
clip-path is now (2020) an excellent solution for hiding specific box-shadow edges if you're wanting the box-shadow to be cut off "clean" like this:
.shadow-element {
width: 100px;
height: 100px;
border: 1px solid #333;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}
<div class="shadow-element"></div>
Simply apply the following CSS to the element in question:
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
Where:
Apx sets the shadow visibility for the top edge
Bpx right
Cpx bottom
Dpx left
Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.
This solution removes the need to apply styling to a parent element, which gives more flexibility.