Develop Reference

Add smooth transition to button which is becoming bigger after click event

With a javascript click-event I am adding extra html-text (to be specific: an "X"-icon" within a span) to a button. I am doing this with switching the property on the span-icon-class from display: none to display: block.
The button therefore becomes bigger because of the added icon after the click event instantly.
What CSS/js do I need to add, to make this transition smooth, so that the button grows slowly bigger instead of instantly?
Thanks a lot and sorry for maybe complicated questioning.

Maybe look at https://www.w3schools.com/css/css3_transitions.asp.
If you have a fixed initial button width, it should be something like this :
JS :
$('.mybutton').on('click', function(){ $(this).addClass('clicked') };
CSS :
.mybutton{
width : 90px;
transition : width 0.5s ease;
}
.mybutton.clicked{
width : 120px;
}

Yes, you can add CSS to do such a transition. However, you can't use from display: none -> block for a CSS transition. If I don't remember it incorrectly it's because it transitions over time, and display: none/block is a binary system, meaning it can only be shown or not shown, there is no in between. I believe visibility can be used instead because it supports this in-between state of both existing and not existing so to speak.
See this question: Transitions on the display: property
Also, google "css transition display none block" and you'll get a bunch of helpful links.

Okay, I resolved it with a scale-property. I transition the scale of the x-icon, which also slowly enlarges the button.

Get dimensions of element including drop shadow

This seems like a suspiciously straight-forward question but having searched StackOverflow and Google and used the usual tricks (getBoundingClientRect, clientWidth, offsetWidth) I've yet to find an answer.
Simply, is there a way to find the width/height of an element including not only border, padding etc, but also the shadow?
See: jsfiddle for an example of how everything returns the width of the element without the shadow.
EDIT: Ideally, I'd prefer not to have to investigate the CSS attribute for the shadow and parse out the dimensions, though perhaps that's the only way.

You're right, I agree it's a pretty straight forward question. Here's the problem, when you give an element a box-shadow, the box-shadow is treated like a sub-element with absolute positioning properties to it's parent element. So automatically the placement of that object under it's parent becomes a relative positioning question. They are essentially now two separate objects and need calculated separately.
My only suggestion would be to calculate the box-shadow's x/y positioning and add them to the width/height of the parent element. For example, in your jsfiddle, the box shadow is protruding 10px along the x-axis, and below 10px along the y-axis. With the 5px blur, add 2.5px to either side and then add the height/width to those values:
104px (width) + 10px (x-axis shadow extension) + 2.5 px (blur) = 116.5px width
104px (height) + 10px (y-axis shadow extension) + 2.5px (blur) = 116.5px height

Use a shadowParent class
Here's another technique which worked well in one specific case for me:
Make a shadow parent class which affects it's height, having the same values as the shadow of the child. If you need to, make a new parent div just for this purpose. You can use CSS classes for this, for example: shadow and shadowParent.
Then whenever you need height+shadow, just get the height of the parent.
Advantages:
Less complexity in JS trying to figure out height.
You control the values in one place (wherever you define the CSS
values).
In this case, I simply set some padding on the parent, to account for the childs' shadow. Then I get the height of the parent.
/* ----------------------- */
/* SHADOW */
/* ----------------------- */
.shadow {
box-shadow: 0px 10px 10px black;
}
.shadowParent {
/* Apply matching values to some property that affects parent height. */
/* I used padding, which worked for my context. */
padding-bottom: 10px; /* Value matches shadow values. */
}
<div id="wrapper" class="shadowParent">
<div id="content" class="shadow">
Content + shadow
</div>
</div>

Expand hover area while keeping background color

I have a div that I want to expand the "hover area" of. (If your mouse is just outside of the element, the css :hover selector should still be in effect.)
I tried creating a transparent border: (border:10px solid transparent;) Unfortunately, my div has a background color, and the background "leaked" into the border area. (See fiddle for demonstration of the issue.)
I also tried using outline instead of border, but the outline doesn't seem to "count" as a part of the element when it comes to hovering. (It looks right, but won't detect the extra hover area.)
Is there any way to do this with plain CSS (preferably not many extra elements)? If not, is there a simple method using vanilla JS (no jQuery)?
$("#toggle").click(function(){
$("#attempt").toggleClass("border");
});
#attempt {
width:100px;
height:200px;
background:#aaa;
margin:50px;
}
#attempt.border {
margin:20px; /* Change margin to keep box in same place after border adds size */
border:30px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="attempt"></div>
<button id="toggle">Toggle Border</button>
<p>Border (in the ideal case) would not change the element's background. However, adding the 30px border (even when transparent), will cause the background to change size.</p>

All you need to prevent the background to leak is the box-sizing property. It's a very important one. Just add it to #attempt:
#attempt {
box-sizing: border-box;
}
Check out the updated fiddle here. You can learn more about box-sizing here.

Transparency in CSS - fighting with inheritance

I have an ul with a background-color of rgba(15,15,15,0.8). I want a li element of the list to be more transparent, e.g. I want it to have background-color set to rgba(15,15,15,0.5). The problem is that being the inner li element transparent, I see the background color of its ul parentso what I get is actually an even darker background
Is there a way in CSS (but for that matter it would be fine through JS/jQuery too) to "cancel" the background property of the parent?
Edit
Note that also colouring the "rest" of the list (the part of the list not made by lis) would be fine, even if I don't think it's easy nor a good solution.

You could do it by not setting a background on the ul and setting RGBa borders on the li.
demo
Relevant CSS:
border: solid .5em rgba(15,15,15,.8);
background: rgba(15,15,15,.5);
(you can adjust the width values of the borders to suit your needs)

if you're just trying to lighten the colour (as opposed to letting underlying images or text show through), you might consider using background-color: rgba(256,256,256,0.3) which would put a light haze of white over your child element.
view here: http://jsfiddle.net/9VBnr/
You might also check out this oldie but goodie from Eric Meyer: http://meyerweb.com/eric/css/edge/complexspiral/demo.html

Sorry, but that would be like expecting a clearer view by putting a shaded piece of glass on top of another piece of shaded glass. It would just not work. :)
What you need to do is to reverse the way you think. Make the topmost layer have the right look and then move to the one beneath it.
Style the li elements with a none transparent background. Use a sprite to get the look you want if you need something else but pure color. Then move on to the ul element and give that the look you want - even using opacity.

Empty Div doesn't register CSS events in IE6

I have two elements that have the same event onmousedown.
The elements also have a Cursor: move property set in the CSS style.
The elements are empty, and need be be empty, or at least transparent, except for the border.
In IE 6 the only the border registers the cursor change or activates the javascript event handler. IE6 treats the empty div's like they don't exist. If you hover or click on the border, it changes the cursor and can activate the onmousedown event.
This is not a problem in FF... Anyone know what's going on?
Example Fiddle

It's because IE6 hates web developers.
Make it happy by forcing the div to be non-empty, with a as content.
<div id="ie6-hates-you"> </div>

It works in ie6 if you remove position:absolute;top:0;left:0 from both containers.
Add float:right to #container2 and you get the same layout.

Wrap a container around the 2 divs and set it to position:relative;
<div id="test-container">
<div id="container1"><div id="container2"></div></div>
</div>
css
#test-container{position:relative;width:300px;height:300px}
This works in ie6.
Updated fiddle

that is becouse the absolute positioning..
you must set the width to 100%
width: 100%;