CSSで本をモチーフにした装飾を付ける(2種類)

CSSだけで装飾を試してみようと、本をモチーフにして考えてみました。

作ったのは2種類ですが、実用的と思える(それでも辛うじてですが)のは１つしかありませんので、軽く読み流してもらえればと思います。

構築環境
対応ブラウザ	IE10+

実現したいこと

実現したいことは以下の通りです。

CSSだけで要素を装飾する
装飾のモチーフは本

それほど実用的なものではないので、サンプルとコードを記載し、あとは簡単な説明という程度にしたいと思います。

コード1:本の背表紙型ナビゲーション

以下がサンプルですが、使用しているCSSが対応していれば表示されていると思います。

なお、このサンプルはhoverさせないと「それっぽさ」がでないため、スマホやタブレットでの動作確認はできないと思います。

サンプルコードは以下の通りです。



<ul class="book-nav">

 	<li class="book-nav-items"><a href=""><span>銀河鉄道の夜</span></a></li>


 	<li class="book-nav-items"><a href=""><span>羅生門</span></a></li>


 	<li class="book-nav-items"><a href=""><span>遠野物語</span></a></li>


 	<li class="book-nav-items"><a href=""><span>沈黙の春</span></a></li>


 	<li class="book-nav-items"><a href=""><span>深夜特急</span></a></li>


 	<li class="book-nav-items"><a href=""><span>HTML5 CSS3</span></a></li>

</ul>

続いてCSS。


/* アニメーションの時間指定 */
.book-nav-items a, .book-nav-items, .book-nav-items::before, .book-nav-items:hover a span {
  transition: all .4s;
}

/* 本体の装飾 */
.book-nav {
  font-size: 16px;
  display: -webkit-flex;
  display:         flex;
  margin: 0;
  padding: 5px 0 1px 0;
  border: 10px solid #967848;
  background-color: #564934;
  box-shadow: 0 -1px 0 0 #bfb19c, 0 5px 2px 0 rgba(0,0,0,.4),0 1px 0 0 #443721,0 -1px 0 0 #bfb19c inset;
}
.book-nav-items {
  position: relative;
  list-style: none;
  flex-basis: 32px;
}
.book-nav-items:nth-of-type(1) {
  border-top: 1px solid #f28279;
  border-right: 2px solid #ba3c32;
  border-bottom: 1px solid #ba3c32;
  border-left: 2px solid #f28279;
  background-color: #ea5549;
}
.book-nav-items:nth-of-type(2) {
  border-top: 1px solid #e5a77b;
  border-right: 2px solid #c45e17;
  border-bottom: 1px solid #c45e17;
  border-left: 2px solid #e5a77b;
  background-color: #e17b34;
}
.book-nav-items:nth-of-type(3) {
  border-top: 1px solid #f2df93;
  border-right: 2px solid #997b00;
  border-bottom: 1px solid #997b00;
  border-left: 2px solid #f2df93;
  background-color: #e9bc00;
}
.book-nav-items:nth-of-type(4) {
  border-top: 1px solid #50ce9d;
  border-right: 2px solid #02663f;
  border-bottom: 1px solid #02663f;
  border-left: 2px solid #50ce9d;
  background-color: #00a968;
}
.book-nav-items:nth-of-type(5) {
  border-top: 1px solid #5acec5;
  border-right: 2px solid #015952;
  border-bottom: 1px solid #015952;
  border-left: 2px solid #5acec5;
  background-color: #00a497;
}
.book-nav-items:nth-of-type(6) {
  border-top: 1px solid #3d84ba;
  border-right: 2px solid #024272;
  border-bottom: 1px solid #024272;
  border-left: 2px solid #3d84ba;
  background-color: #0068b7;
}

.book-nav-items::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: -2px;
  display: block;
  width: 100%;
  height: 0;
  content: '';
  background-color: #e8e6dc;
}
.book-nav-items:nth-of-type(1)::before {
  border-right: 2px solid #ba3c32;
  border-left: 2px solid #f28279;
}
.book-nav-items:nth-of-type(2)::before {
  border-right: 2px solid #c45e17;
  border-left: 2px solid #e5a77b;
}
.book-nav-items:nth-of-type(3)::before {
  border-right: 2px solid #997b00;
  border-left: 2px solid #f2df93;
}
.book-nav-items:nth-of-type(4)::before {
  border-right: 2px solid #02663f;
  border-left: 2px solid #50ce9d;
}
.book-nav-items:nth-of-type(5)::before {
  border-right: 2px solid #015952;
  border-left: 2px solid #5acec5;
}
.book-nav-items:nth-of-type(6)::before {
  border-right: 2px solid #024272;
  border-left: 2px solid #3d84ba;
}

.book-nav-items a {
  display: block;
  height: 150px;
  padding: 10px 3px 0 3px;
  transition: all .4s ;
  text-decoration: none;
}
.book-nav-items a span {
  display: inline-block;
  padding: 5px 1px;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  background-color: #e8e6dc;
}

/* hover時の挙動 */
.book-nav-items:hover {
  transform: translateY(5px) scale(1,.95);
  transform-origin: center bottom 0;
  box-shadow: 0 20px 2px 0 rgba(0,0,0,.4);
  border-left-color: rgba(0,0,0,.2);
}
.book-nav-items:hover::before {
  top: -10px;
  height: 11px;
}
.book-nav-items:hover a {
  background-color: rgba(0,0,0,.3);
}
.book-nav-items:hover a span {
  background-color: #bcbaaf;
}

縦書き表示が可能なCSSプロパティを使っているため、上記のCSSだけではクロスブラウザな対応が不十分な状態です。

しかしながら、このデザインではそもそも文字数増減への対応も厳しく柔軟性に乏しいため、どちらにせよ実用には向かないでしょう。

コード2:本型のアイコン

続いて、多少は実用性がありそうな本型のアイコンのサンプルです。

BOOK ICON
BOOK ICON
BOOK ICON
BOOK ICON
BOOK ICON
BOOK ICON

続いてHTML。



<ul class="book-icon">

 	<li class="book-icon-items">BOOK ICON</li>


 	<li class="book-icon-items">BOOK ICON</li>


 	<li class="book-icon-items">BOOK ICON</li>


 	<li class="book-icon-items">BOOK ICON</li>


 	<li class="book-icon-items">BOOK ICON</li>


 	<li class="book-icon-items">BOOK ICON</li>

</ul>

続いてCSSですが、本題の部分は疑似要素のみでできているため、記述は疑似要素のみに絞ります。


/* 本型アイコン ※疑似要素のみ */
.book-icon-items::before, .book-icon-items::after {
  position: absolute;
  top: 25px;
  left: 50%;
  display: block;
  content: '';
}
.book-icon-items::before {
  width: 14px;
  height: 19px;
  margin-top: -10px;
  margin-left: -8px;
  border-radius: 2px 2px 0 0;
}
.book-icon-items:nth-of-type(1)::before {
  background-color: #ea5549;
  background-image: -webkit-linear-gradient(top,#ea5549 15px,#ba3c32 15px,#ba3c32 16px,#d8d7cd 16px,#d8d7cd 18px,#ba3c32 18px,#ba3c32 19px);
  background-image:         linear-gradient(to bottom,#ea5549 15px,#ba3c32 15px,#ba3c32 16px,#d8d7cd 16px,#d8d7cd 18px,#ba3c32 18px,#ba3c32 19px);
  box-shadow: 1px 0 0 0 #ba3c32;
}
.book-icon-items:nth-of-type(2)::before {
  background-color: #e17b34;
  background-image: -webkit-linear-gradient(top,#e17b34 15px,#c45e17 15px,#c45e17 16px,#d8d7cd 16px,#d8d7cd 18px,#c45e17 18px,#c45e17 19px);
  background-image:         linear-gradient(to bottom,#e17b34 15px,#c45e17 15px,#c45e17 16px,#d8d7cd 16px,#d8d7cd 18px,#c45e17 18px,#c45e17 19px);
  box-shadow: 1px 0 0 0 #c45e17;
}
.book-icon-items:nth-of-type(3)::before {
  background-color: #e9bc00;
  background-image: -webkit-linear-gradient(top,#e9bc00 15px,#997b00 15px,#997b00 16px,#d8d7cd 16px,#d8d7cd 18px,#997b00 18px,#997b00 19px);
  background-image:         linear-gradient(to bottom,#e9bc00 15px,#997b00 15px,#997b00 16px,#d8d7cd 16px,#d8d7cd 18px,#997b00 18px,#997b00 19px);
  box-shadow: 1px 0 0 0 #997b00;
}
.book-icon-items:nth-of-type(4)::before {
  background-color: #00a968;
  background-image: -webkit-linear-gradient(top,#00a968 15px,#02663f 15px,#02663f 16px,#d8d7cd 16px,#d8d7cd 18px,#02663f 18px,#02663f 19px);
  background-image:         linear-gradient(to bottom,#00a968 15px,#02663f 15px,#02663f 16px,#d8d7cd 16px,#d8d7cd 18px,#02663f 18px,#02663f 19px);
  box-shadow: 1px 0 0 0 #02663f;
}
.book-icon-items:nth-of-type(5)::before {
  background-color: #00a497;
  background-image: -webkit-linear-gradient(top,#00a497 15px,#015952 15px,#015952 16px,#d8d7cd 16px,#d8d7cd 18px,#015952 18px,#015952 19px);
  background-image:         linear-gradient(to bottom,#00a497 15px,#015952 15px,#015952 16px,#d8d7cd 16px,#d8d7cd 18px,#015952 18px,#015952 19px);
  box-shadow: 1px 0 0 0 #015952;
}
.book-icon-items:nth-of-type(6)::before {
  background-color: #0068b7;
  background-image: -webkit-linear-gradient(top,#0068b7 15px,#024272 15px,#024272 16px,#d8d7cd 16px,#d8d7cd 18px,#024272 18px,#024272 19px);
  background-image:         linear-gradient(to bottom,#0068b7 15px,#024272 15px,#024272 16px,#d8d7cd 16px,#d8d7cd 18px,#024272 18px,#024272 19px);
  box-shadow: 1px 0 0 0 #024272;
}
.book-icon-items::after {
  width: 8px;
  height: 3px;
  margin-top: -7px;
  margin-left: -5px;
  background-color: #dddcd2;
  box-shadow: 1px 1px 2px 0 rgba(0,0,0,.1);
}

このサイズでも、題簽に使っているafter疑似要素用のcontentに一文字ぐらいならいれられるため、Q&A的なアイコンにも使えるかもしれません。

ただし、after疑似要素の幅とbefor疑似要素の幅が連動していないため、サイズ変化に柔軟ではなく、フォントの指定が意図したものでない場合に表示が崩れる可能性があります。

実際に使う場合は、画像化した方が安全かと思います。