Facebookのヘッダーにあるような数字のあれを導入するCSS
0
Facebookのヘッダーにあるようなアレです。
あれを実装するための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
