end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転します

bootstrap 日本語解説番外編 - 模様付? 透過gifを使ったヘッダ表示

解説記事一覧→ http://d.hatena.ne.jp/end0tknr/20111016/1318729659

http://twitter.github.com/bootstrap/

bootstrapの解説ページには、グラデーション + 格子模様でヘッダを表示しています。単なる「background: transparent url(〜)」 と思っていたら、模様付?透過gifにグラデーションを付けていました。
勉強になります。

firefox7の場合

ie8の場合

透過gif(透過部分を分かりやすくする為、winペイントで表示してます)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link href="../bootstrap.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
</head>

<body>

<header class="jumbotron masthead" id="overview">
<div class="inner">
<div class="container">
<h1>Bootstrap, from Twitter</h1>
</p>
</div><!-- /container -->
</div>
</header>

</body>
</html>
.jumbotron {
  min-width: 940px;
}
.jumbotron .inner {
  background: transparent url(../img/grid-18px.png) top center;
  padding: 45px 0;
  -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
     -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}

.jumbotron h1 {
  color: #fff;
  font-size: 54px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.masthead {
  background-color: #049cd9;
  background-repeat: no-repeat;
  background-image:
    webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
  background-image: -webkit-linear-gradient(#004D9F, #049cd9);
  background-image: -moz-linear-gradient(#004D9F, #049cd9);
  background-image: -o-linear-gradient(top, #004D9F, #049cd9);
  background-image:
    khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
  /* IE8 and down */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F',
                                                     endColorstr='#049cd9',
                                                     GradientType=0);
}