CSS3で巻物っぽいものをつくってみた - チラシの裏すらもったいない

この前やったAccordion with CSS3からまた派生。
伸びる感じがどうも巻物に見えて仕方なかったから、つくってみた。

↓実際に動きます

CSS3 で巻物 - jsdo.it - share JavaScript, HTML5 and CSS

巻物をクリックすると、くるくるっと伸びます。

解説のようなもの

HTML

<section class="ac-container">
	<div>
		<input type="checkbox" id="makimono" name="makimono" />
		<article>
			<p>巻物の中身</p>
		</article>
		<label for="makimono" class="top"><span class="title">タイトル</span></label>
	</div>
</section>

input と label を関連付けておいて、巻物の中身が上、巻物本体(軸)が下になるように配置。
こうしておくと中身が伸びた時に、軸の方が勝手に下端にくっついて下がってくれる。

CSS

input は非表示にしておく
コンテナも用意

.ac-container input{
	display: none;
}
.ac-container{
	width: 400px;
	margin: 20px auto 30px auto;
}

article で巻物の中身の緑の部分をつくる
- input:checked 時に height を transition で変化させることで伸ばす

.ac-container article{
	position: relative;
	overflow: hidden;
	z-index: 10;
	height: 0px;
	transition:height 0.3s ease-in-out;
	-moz-transition:height 0.3s ease-in-out;
	-webkit-transition:height 0.3s ease-in-out;
}
.ac-container input:checked ~ article{
	height: 300px;
	transition: height 0.5s ease-in-out;
	-moz-transition: height 0.5s ease-in-out;
	-webkit-transition: height 0.5s ease-in-out;
}

p で茶色の部分をつくる
- margin を設定しないとせっかくの緑が消えちゃう

.ac-container article p{
	display: block;
	height: 300px;
	margin: 20px 20px;
	padding: 20px 20px;
	font: bold 20px/30px 'HG行書体','ＭＳ 明朝','ヒラギノ明朝 Pro W6',serif;
}

巻物本体

.ac-container label{
	position: relative;
	display: block;
	z-index: 30;
	height: 100px;
	cursor: pointer;
}

巻物の木軸
- 疑似要素 before,after を使って表現

.ac-container label.top:before {
	content: '';
	display: block;
	z-index: 1;
	top: 30px;
	left: -20px;
	width: 20px;
	height: 40px;
	position: absolute;
}
.ac-container label.top:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 30px;
	left: 400px;
	width: 20px;
	height: 40px;
}

巻物の題(？)の部分
- input:checked 時に height と margin-top を transition で変化させることで、転がってる感を出した…つもり。
  微妙に秒数ずらすことで上手い具合に隠れるように…なってるかなぁ…

.title{
	overflow: hidden;
	position: absolute;
	display: block;
	z-index: 30;
	width: 200px;
	height: 60px;
	margin: 20px 100px;
	text-align: center;
	font: bold 30px/60px 'HG行書体','ＭＳ 明朝','ヒラギノ明朝 Pro W6',serif;
	transition: height 0.075s linear, margin-top 0.1s linear;
	-moz-transition:  height 0.075s linear, margin-top 0.1s linear;
	-webkit-transition: height 0.075s linear, margin-top 0.1s linear;
}
.ac-container input:checked ~ label > .title{
	overflow: hidden;
	height: 0px;
	margin-top: 100px;
	transition: height 0.3s linear 0.1s, margin-top 0.4s linear;
	-moz-transition: height 0.3s linear 0.1s, margin-top 0.4s linear;
	-webkit-transition: height 0.3s linear 0.1s, margin-top 0.4s linear;
}