[CSS]にょいーんとアニメーションでパネルを表示するスタイルシート

JavaScriptやFlashを使用せず、パネルをにょいーんとアニメーションで表示・非表示するスタイルシートを紹介します。

Fold Out Popups

[ad#ad-2]

デモ

ベストはChrome, Safariです。

デモページ

実装

デモページを例に実装方法を紹介します。

HTML

最初のチェックボックスはdisplay:none;で非表示で、その後にlabel要素を実装します。

<input type="checkbox" id="doggiezzz" class="popUpControl">
<label for="doggiezzz" class="header-button">
<input type="checkbox" id="doggiezzz" class="popUpControl">
<label for="doggiezzz" class="header-button">
	More dogs!
	<span class="box"><img src="http://placekitten.com/260/260"></span>
</label>
</label>

label要素内のspan要素は、パネルのための容器です。
span要素内はインライン要素であれば、画像でもテキストでも配置できます。

[ad#ad-2]

CSS

パネル（.box）は初期状態で不透明度0で非表示になり、チェックボックスをチェックすることで不透明度が1になり表示されます。

.box {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 100;

        /* Prevent some white flashing in Safari 5.1 */
        -webkit-backface-visibility: hidden;

        -moz-border-radius:    20px;
        -webkit-border-radius: 20px;
        border-radius:         20px; 

        width: 260px;
        padding: 20px;
        opacity: 0;

        -webkit-transform: scale(0) skew(50deg);
        -moz-transform:    scale(0) skew(50deg);
        -ms-transform:     scale(0) skew(50deg);
        -o-transform:      scale(0) skew(50deg);

        -webkit-transform-origin: 0px -30px;
        -moz-transform-origin:    0px -30px;
        -ms-transform-origin:     0px -30px;
        -o-transform-origin:      0px -30px;

        -webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
        -moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
        -ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
        -o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
}

.popUpControl {
        display: none;
}
.popUpControl:checked ~ label > .box {
        opacity: 1;
        -webkit-transform: scale(1) skew(0deg);
        -moz-transform:    scale(1) skew(0deg);
        -ms-transform:     scale(1) skew(0deg);
        -o-transform:      scale(1) skew(0deg);
}

パネルが開いている際のボタンのテキストを変更します。

#doggiezzz:checked ~ label > span:first-child {
	display: none;
}
#doggiezzz:checked ~ label:before {
	content: "Less Dog!";
}

このテクニックはここでは重要ではありませんが、チェック後に実際のテキストを非表示にし新しいテキストを挿入する際には役立つでしょう。