• ホーム
  • このブログについて
  • Flipsについて

Flips Blog Web担の小技

ウェブ担当者の為の小技&小ネタ

Facebookのヘッダーにあるような数字のあれを導入するCSS

0
  • 投稿者: Yamada_nt
  • カテゴリー: Webデザイン · サイト運営のコツ
  • — 2014年11月25日

FacebookのヘッダーのようなCSS

Facebookのヘッダーにあるようなアレです。

あれを実装するためのHTMLとCSSのご紹介。

導入は簡単で、CSSとHTMLだけを使いますが、CSSの265行目、バックグラウンドで利用している画像はご自身でダウンロードするなり作成するなりで使う必要が有ります。

もちろんですが、数字の部分は動的プログラムを導入する必要が有りますので、PHPなりなんなりで試してみてください。

HTMLの10行目、11行目、12行目の数値を変更するようにすればOKです。

コンテンツ

  • html
  • CSS
  • codeは以下で公開されています。

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は以下で公開されています。

CodePen – A Pen by davidhc

それでは、また。

このエントリーをはてなブックマークに追加
Pocket

Share

タグ: CSSデザイン

Flips 手軽に始めるビジネスホームページ

— Yamada_nt

1999年より、Web制作、ウェブサイト運営支援を行なっており、Web担当者へお勧めの情報を共有しています。2007年より「ホームページを作る人のネタ帳」というブログをはじめ、現在はプロブロガーとして生活。 2008年、アルファーブロガーアワード受賞。 全国各地でブログセミナーや、サイト運営に関する様々な運営ノウハウセミナーなども行なっております。

  • 前の記事 月額、年額サービス用の美しい価格表CSS
  • 次の記事 英会話教室に通っても、ちっとも英語が話せるようにならない人のための英会議

関連する記事

  • Webデザイナーのためのインスピレーションサイト あなたのデザインインスピレーションを今すぐ解決しますという神コンセプトのウェブサービス「calltoidea」 2015年07月28日
  • インテリアデザイナーのためのテンプレート インテリアデザイナーの為の美しいWebテンプレート集 2014年11月27日
  • パララックス効果 あぁこれがパララックス効果の使い方かと納得のパララックスWebデザイン7つ 2014年01月25日
  • マテリアルパレット 配色センスが全くない?それならマテリアルパレットをちょっと使ってみて? 2015年07月30日
  • 新しい記事

    • 新着記事
    • タグ
    • クリエイターInstagramアカウント海外で人気のデザイナーのInstagramアカウント2016年5月24日
    • スワイプ対応レスポンシブでスワイプをサポートしているjQueryカルーセルプラグイン2016年5月13日
    • サイコロブロガーが陥る「サイコロのふりすぎ」と「時間の使いすぎ」問題2016年4月30日
    • デザインエディタ最近見つけたBeFunky Photo EditorとかいうWebフォトエディタサービスがスゴイ2016年4月29日
    • 新入社員研修とある新入社員研修の無駄なこと無駄なこと・・・2016年4月26日
    • Adobe CSS Excel Facebook Google Illustrator JavaScript jQuery Mac Photoshop SEO SVG お知らせ アイコン インスピレーション エクセル サイト運営 サービス デザイン パワーポイント フォント フラットデザイン フリーソフト ブログ プレゼン マーケティング ライフハック 中小企業に訊く 便利 文章術 素材 運用
  • 記事の検索ができます

  • 人気記事

    • 国内人気のクレジット不要、商用利用可の無料素材サイト24+シェアランキング
    • 2015下半期Webデザイナー、ディレクターなら絶対読んでおかないと後悔する厳選記事まとめ
    • 今度こそ3日で覚えるパワーポイントテクニック集、デザイン、表現力アップまとめ
    • 配色センスが全くない?それならマテリアルパレットをちょっと使ってみて?
    • 適切な伝え方|とにかく人にものを伝えるのが苦手な人が一度は読むべき5つのコツ
    • 20以上のレスポンシブ対応の無料htmlテンプレート HTML5UP
    • 無料素材のチョークデザイン100個|バッジ、リボン、インフォグラフィクス等
    • 2014年版ブログにトラフィックを集める7つの方法
    • ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事
  • アーカイブ

  • Twitter

    @flips_jp からのツイート
  • Facebookページ

  • 最近の投稿

    • 海外で人気のデザイナーのInstagramアカウント 2016年5月24日
    • レスポンシブでスワイプをサポートしているjQueryカルーセルプラグイン 2016年5月13日
    • ブロガーが陥る「サイコロのふりすぎ」と「時間の使いすぎ」問題 2016年4月30日
    • 最近見つけたBeFunky Photo EditorとかいうWebフォトエディタサービスがスゴイ 2016年4月29日
    • とある新入社員研修の無駄なこと無駄なこと・・・ 2016年4月26日
  • カテゴリ

    • Chrome
    • JavaScript
    • SEO
    • Webデザイン
    • おしらせ
    • サイト運営のコツ
    • サービス
    • ソーシャルメディア
    • テンプレート
    • フリーソフト
    • フリーフォント
    • プレゼン資料の作り方
    • ライフハック
    • 未分類
    • 無料アイコン
    • 無料素材
  • サイト内検索

© Copyright 2019 Flips Blog Web担の小技. Typegrid Theme by WPBandit.