今回のお題は,
サンプル1 CSS3: 3D style navigation bar
平面的なナビゲーションバー
まずは<head>
要素にいくつか仕込みをしておこう。ボタンのアイコンにはFont Awesomeを使うので,
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
HTMLのコードはつぎに示す簡素なつくりだ。<ul>
要素class
属性"nav-bar")<li>
と<a>
class
属性"list-item")
<body>要素
<ul class="nav-bar">
<li>
<a class="list-item" href="#">
<i class="fa fa-bars"></i>
</a>
</li>
<li>
<a class="list-item" href="#">
<i class="fa fa-th-large"></i>
</a>
</li>
<li>
<a class="list-item" href="#">
<i class="fa fa-bar-chart"></i>
</a>
</li>
<li>
<a class="list-item" href="#">
<i class="fa fa-tasks"></i>
</a>
</li>
<li>
<a class="list-item" href="#">
<i class="fa fa-bell"></i>
</a>
</li>
<li>
<a class="list-item" href="#">
<i class="fa fa-archive"></i>
</a>
</li>
<li>
<a class="list-item" href="#">
<i class="fa fa-comment"></i>
</a>
</li>
<li>
<a class="list-item" href="#">
<i class="fa fa-sitemap"></i>
</a>
</li>
<li>
<a class="list-item" href="#">
<i class="fa fa-thumbs-up"></i>
</a>
</li>
<li>
<a class="list-item" href="#">
<i class="fa fa-tumblr"></i>
</a>
</li>
</ul>
これにつぎのCSSを割り当てると,
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #f2f2f2;
}
li {
list-style: none;
}
.list-item {
background: #000;
color: #575757;
text-align: center;
height: 2.5em;
width: 4em;
line-height: 2.5em;
border-bottom: 1px solid #060606;
position: relative;
display: block;
box-shadow: -2em 1.5em 0 #e1e1e1;
}