Last active
August 29, 2015 14:02
-
-
Save takunagai/f656be5da354e8c230c8 to your computer and use it in GitHub Desktop.
CSS3 linear-gradient で斜めストライプの背景
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>CSS3 linear-gradient で斜めストライプの背景</title> | |
<meta charset="UTF-8" /> | |
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" /> | |
</head> | |
<body> | |
<h1>CSS3 linear-gradient で斜めストライプの背景</h1> | |
<h2>サンプル</h2> | |
<h3 class="hoge"> | |
(h3.hoge)斜めストライプの背景のサンプル見出し | |
</h3> | |
<h2>メモ</h2> | |
<ul> | |
<li>IE10以上対応 <a href="http://caniuse.com/#search=linear-gradient">CSS Gradients - Can I use...</a></li> | |
<li>IE8/9対応するのにCSS3Pie使うことにした(<a href="http://stackoverflow.com/questions/4961651/does-ie9-support-css-linear-gradients">SVGを使う方法</a>もあるらしいが未検証)</li> | |
<li>一応 -webkit- 付けといた方が良さそう</li> | |
<li>background-size は 偶数値に。奇数値だとずれる</li> | |
</ul> | |
<h2>バリエーション</h2> | |
角度変えたり、サイズ変えたり、格子にしたり | |
<h2>参考にした記事</h2> | |
<ul> | |
<li><a href="http://www.nxworld.net/tips/15-smartphone-css-tips.html">スマートフォンサイト制作時に覚えておきたいCSS - NxWorld</a></li> | |
</ul> | |
<!-- IE9以下対応 --> | |
<!--[if IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE9_uncompressed.js"></script><![endif]--> | |
<!--[if lt IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/2.0beta1/PIE_IE678_uncompressed.js"></script><![endif]--> | |
<script> | |
$(function() { | |
if (window.PIE) { | |
$('.box').each(function() {//適用する要素を指定 | |
PIE.attach(this); | |
}); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body {padding: 20px;} | |
.hoge { | |
background-color: #E7E7E7;/* ベース色、グラデーションの透過部分で見える */ | |
background-image: -webkit-linear-gradient(45deg,#CCC 25%,/* autoprefixer使うなら不要 */ | |
transparent 25%,transparent 50%,#CCC 50%, | |
#CCC 75%,transparent 75%,transparent); | |
background-image: linear-gradient(45deg,#CCC 25%, | |
transparent 25%,transparent 50%,#CCC 50%, | |
#CCC 75%,transparent 75%,transparent); | |
background-size: 10px 10px; | |
/* 以下、その他の装飾 */ | |
padding: 3px 10px; | |
color: #333; | |
box-shadow: 1px 1px 0 #999; | |
text-shadow: 1px 1px 0px white; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment