ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
Trace amounts of methane were discovered in the atmosphere of Mars in 2003...
As methane is unstable, its presence indicates an active source on the planet that is
continually replenishing the gas, at the rate of approximately 270 tons per year.
You’ll style the outer div and its content using the code in Listing 4-34.Listing 4-34. div for Popup Text
div#mars { background: #000; color: #fff;
font-family: Futura, Arial, sans-serif;
width: 400px; padding: 1.6rem;
line-height: 175%; border-radius: 6px; }
img { display: block; margin: 0 auto; }
div#mars p { margin: 1rem; }
You want to hide the inner div by using a sibling selector to set its height to 0 and by hiding anything
that falls outside it. At the same time you’ll also set the transition using the principles of push-pull animation
discussed earlier. (See Listing 4-35.)
Listing 4-35. Transition for Opening and Closing a div
input ~ div { overflow: hidden; height: 0; transition: .6s all cubic-bezier(0.735, -0.485,
0.145, 1.625); }
To complete the basic functionality of your interactive element you want to expand the inner div if the
checkbox is turned on. As I mentioned, height needs to be set explicitly for elements to transition correctly in
current browsers (see Listing 4-36).
Listing 4-36. div for Popup Text
input:checked ~ div { height: 480px; }
This works great here, but hiding and showing page content with a radio button will probably not work well
for most designs. To get around this, you can associate a label with the input, “linking” the text of the label to
the checkbox by using the for attribute. As a result, clicking the label will turn on the form element and cause
your CSS to continue to respond, even if the checkbox itself is hidden (see Listing 4-37).
Listing 4-37. Complete Markup for a Checkbox-Associated div
Trace amounts of methane were discovered in the atmosphere of Mars in 2003...
label { display: block; text-align: center; font-size: x-large;
background: red; border-radius: 6px; padding: .2rem; }
label:hover { background: yellow; color: #000; cursor: pointer; }
input { display: none; }