Some CSS problems

css-thoughts.md

Space underneath an image

http://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath

Nested CSS transitions

We like to transition an element to the right and change its color.

Setup without animation

.parent {
    position: relative;
    padding-left: 10px;
    color: $white;
}

.child {
    position: absolute;
    top: 20px;
    right: 20px;
}

.parent:hover {
    color: blue;
    padding-left: 20px;
}

.parent:hover child {
    right: 10px;
}

Stacked animation (wrong)

We have added transitions. The properties padding-left and color for the parent element. And the right and color properties for the child element.

.parent {
    position: relative;
    padding-left: 10px;
    color: $white;
    transition: padding-left 0.5s ease,
                color 0.5s ease;
}

.child {
    position: absolute;
    top: 20px;
    right: 20px;
    transition: right 0.5s ease, color 0.5s ease;
}

Correct

We removed the color 0.5s ease transition from the .child element. Now everything works as expected.

.parent {
    position: relative;
    padding-left: 10px;
    color: $white;
    transition: padding-left 0.5s ease,
                color 0.5s ease;
}

.child {
    position: absolute;
    top: 20px;
    right: 20px;
    transition: right 0.5s ease;
}

Way of thinking about transitions

The way you think about adding transitions is important to avoid these kinds of mistakes. For the .parent we want to transition the color and padding-left properties. Not really a problem here. But you could argue for the .child that you want to transition the right AND the color property. Since its color should also change.

But because the .child inherits the color from its parent, there is no need to transition it.

We want to change the color of the parent, not the child. The child color just happens to also change because it inherits the color. But we dont want to transition the color of the child directly.