色を半透明にする

背景と区切り線の色を半透明にする

ColorSchemer

背景色を半透明にする

• RGB（赤, 緑, 青）で色指定：rgb(1, 122, 205)
• 不透明度（alpha）：a(0.3)

nav ul li a:hover {
  background-color: rgba(1, 122, 205, 0.3);
}

区切り線の色をRGBで指定し半透明にする

nav ul li a {
  display: block;
  width: 120px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  border-right: solid 1px rgba(255, 255, 255, 0.2);
}

記事のヘッダーの背景色を白に半透明にする

article header {
  border: solid 1px #aaa;
  margin: 20px 0 10px 0;
  padding: 18px;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 3px 2px #ccc;
  box-shadow: 0 2px 5px #ccc;
  background-color: rgba(255, 255, 255, 0.5);
}

枠の内側に白い影をつける

article header {
  border: solid 1px #aaa;
  margin: 20px 0 10px 0;
  padding: 18px;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 3px 2px #ccc, 0 0 4px 3px #fff inset;
  box-shadow: 0 2px 5px #ccc, 0 0 4px 3px #fff inset;
  background-color: rgba(255, 255, 255, 0.5);
}

InternetExplorer 9以下に対応する

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style>
article section figure	{
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}
nav ul li a	{
  border-right: solid 1px #fff;
}
nav ul li a:hover {
  background-color: #017acd;
}
</style>
<![endif]-->