Facebookのヘッダーにあるような数字のあれを導入するCSS
0Facebookのヘッダーにあるようなアレです。
あれを実装するためのHTMLとCSSのご紹介。
導入は簡単で、CSSとHTMLだけを使いますが、CSSの265行目、バックグラウンドで利用している画像はご自身でダウンロードするなり作成するなりで使う必要が有ります。
もちろんですが、数字の部分は動的プログラムを導入する必要が有りますので、PHPなりなんなりで試してみてください。
HTMLの10行目、11行目、12行目の数値を変更するようにすればOKです。
html
<div class='fluid'> <header class='header clearfix'> <span class='logo'></span> <section class='top-nav last'> <li><a href='#'>Tasks</a></li> <li><a href='#'>Messages<span class='rednum'>74</span></a></li> <li><a href='#'>Logout</a></li> </section> <section class='notification'> <li class='message' data-count='2'></li> <li class='comment' data-count='12'></li> <li class='user' data-count='8'></li> </section> <div class='clearfix'></div> </header> <div class='main'> <div class='breadcrumbs'> <ul id="breadcrumbs-one" class='last'> <li><a href="">Computer</a></li> <li><a href="" class="current">Dashboard</a></li> </ul> <div class='clearfix'></div> </div> <div class='content'> <nav class='nav'> <li><a href='#'></a></li> <li><a href='#'></a></li> <li><a href='#'></a></li> <li><a href='#'></a></li> <li><a href='#'></a></li> <li><a href='#'></a></li> <li><a href='#'></a></li> <li><a href='#'></a></li> </nav> <div class='min'>ss </div> </div> <div class='clearfix'></div> </div> </div>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700|PT+Sans+Narrow); @import url(https://dl.dropboxusercontent.com/s/47bpxxf7uffel09/style.css); * { margin: 0; padding: 0; } body { color: #333; background: url(http://bizzdrean.googlecode.com/svn/trunk/images/pattern.png) #fff; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } .fluid { overflow: hidden; font-family: 'Open Sans', Helvetica Neue, Helvetica, Sans-serif; } header.header { background: #69D2E7; padding: 10px; z-index: 999999999; width: 100%; } h1.logo { font-size: 12px; } section.notification { float: right; } section.notification li { list-style: none; padding: 5px 10px; margin: 5px 10px 0 0; float: left; cursor: pointer; display: inline-block; background: url(http://twesibly.googlecode.com/files/sprites.png) no-repeat 0 0; } section.notification li:nth-child(2) { background: url(http://twesibly.googlecode.com/files/sprites.png) no-repeat; background-position: 0 -128px; } section.notification li:nth-child(3) { background: url(http://twesibly.googlecode.com/files/sprites.png) no-repeat; background-position: 0 -64px; } section.notification li:after { content: attr(data-count); font-size: 13px; background: #cc0001; border-radius: 3px; color: #fff; z-index: 99999; font-weight: 600; padding: 4px 7px; box-shadow: -1px 2px 3px rgba(0,0,0,.3), inset 0 2px 5px rgba(225,225,225,.3); position: relative; top: -12px; left: 7px; } .main { height: auto; min-height: 100%; position: relative; } .breadcrumbs { width: 100%; background: #eee; background-image: -moz-linear-gradient(top, #eee, #fff); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff)); padding: 10px 15px; box-shadow: 0 -2px 10px rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.2); } #breadcrumbs-one{ background: rgba(225,225,225,.1); border: 3px solid rgba(225,225,225,.1); border-radius: 5px; box-shadow: 0 0 2px rgba(0,0,0,.2); overflow: hidden; width: -webkit-fit-content; float: right; width: -moz-fit-content; } #breadcrumbs-one li{ float: left; list-style: none; } #breadcrumbs-one a{ padding: .4em 1.3em .4em 2.3em; float: left; text-decoration: none; color: #fff; position: relative; background-color: #69D2E7; font-size: 13px; background-image: linear-gradient(to right, #f5f5f5, #ddd); } #breadcrumbs-one li:first-child a{ padding-left: 1em; border-radius: 5px 0 0 5px; color: #fff; } #breadcrumbs-one a:hover{ background: #39D2E7; } #breadcrumbs-one a::after, #breadcrumbs-one a::before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em; } #breadcrumbs-one a::after{ z-index: 2; border-left-color: #69D2E7; } .current { color: #535353 !important; } #breadcrumbs-one a::before{ border-left-color: transparent; right: -1.1em; z-index: 1; } #breadcrumbs-one a:hover::after{ border-left-color: #39D2E7; } #breadcrumbs-one .current, #breadcrumbs-one .current:hover{ font-weight: bold; background: none; } #breadcrumbs-one .current::after, #breadcrumbs-one .current::before{ content: normal; } .last { margin-right: 30px; } span.logo{ font-size: 22px; margin: 0; padding: 0; font-weight: 400; color: #222; text-shadow: 0 1px 0 rgba(225,225,225,.7); } section.top-nav { display: inline-block; float: right; background: #fff; height: auto; border-radius: 3px; overflow: visible; margin-left: 15px; border: 1px solid #eee; } .top-nav li { list-style:none; float: left; display: inline; padding: 8px 15px; border-left: 1px solid #eee; } .top-nav li:hover { background-image: -moz-linear-gradient(top, #eee, #fff); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff)); } .top-nav li:active { background: #fafafa; box-shadow: -4px 0 7px -2px rgba(0,0,0,.1) inset,inset 4px 0 7px -2px rgba(0,0,0,.1); } .top-nav li:first-child{border:none} .top-nav li a { text-decoration: none; color: #333; font-weight: 400; } span.rednum { background: #cc0001; border-radius: 3px; color: #fff; z-index: 999999; font-weight: 600; padding: 2px 6px; box-shadow: 0 2px 3px rgba(0,0,0,.2), inset 0 2px 5px rgba(225,225,225,.3); font-size: 13px; margin-left: 5px; position: relative; display: inline-block; top: -1px; } span.multi { background: #0ad87f; border-radius: 3px; color: #fff; z-index: 999999; font-weight: 600; padding: 2px 6px; box-shadow: 0 2px 3px rgba(0,0,0,.2), inset 0 2px 5px rgba(225,225,225,.3); font-size: 13px; margin-left: 5px; position: relative; display: inline-block; top: -1px; } nav.accordion .rednum, nav.accordion .multi { float: right; } .content { width: 100%; } nav.nav { list-style:none; margin-left: 45px; margin-top: 20px; float: left; } .min { background: #fafafa; width: 90.7%; height: 100%; float: right; z-index: -99999999999999999999999999999; box-shadow: inset -1px 6px 10px -5px rgba(0,0,0,.2); border-left: 1px solid #eee; } .min:before { content: ''; position: fixed; width: 100%; height: 100%; top: 0; z-index: -99999999999999999; background: #fafafa; border-left: 1px solid #eee; } nav.nav li { width: 35px; height: 35px; background: url(https://dl.dropboxusercontent.com/s/tzali6hik6vw9rs/sprites.png)no-repeat; margin-bottom: 45px; } nav.nav li a { font-size: 13px; text-decoration:none; color: #bbb; } nav.nav li:nth-child(2) { background-position: 0 -70px; } nav.nav li:nth-child(3) { background-position: 0 -140px; } nav.nav li:nth-child(4) { background-position: 0 -210px; } nav.nav li:nth-child(5) { background-position: 0 -280px; } nav.nav li:nth-child(6) { background-position: 0 -350px; } nav.nav li:nth-child(7) { background-position: 0 -420px; } nav.nav li:nth-child(8) { background-position: 0 -490px; }
codeは以下で公開されています。
それでは、また。
Share