解説記事一覧→ 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); }