web-0127のブログ

角丸とグラデーション

ナビゲーションバーを角丸にする

記事枠と同じように角を丸くする

nav ul {
  font-size: 0.75em;
  margin: 0 0 10px 0;
  height: 30px;
  background-color: #005087;
  border-radius: 6px;
}

角丸が全体に反映されない原因のリンクの背景色を削除する

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

擬似クラスの設定を変更する

マウスオーバー時の背景色は削除できない
左端（ひとつめ）のリンクの左側だけ角丸に設定する

:first-of-type

nav ul li a:hover {
  background-color: #017acd;
}
nav ul li:first-of-type a:hover {
  border-radius: 6px 0 0 6px;
}

枠の背景をcにする

白からグレーにグラデーション

linear-gradient

linear-gradeint(#fff 0%, #dfdfdf 100%)

article section {
  clear: both;
  border: solid 1px #aaa;
  margin: 20px 0 10px 0;
  padding: 18px 18px 10px 18px;
  border-radius: 10px;
  overflow: hidden;
  background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%);
}

ベンダープレフィックス（主要ブラウザに対応させる）

article section {
  clear: both;
  border: solid 1px #aaa;
  margin: 20px 0 10px 0;
  padding: 18px 18px 10px 18px;
  border-radius: 10px;
  overflow: hidden;
  background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%);
  background: -moz-linear-gradient(#fff 0%, #dfdfdf 100%);
  background: -o-linear-gradient(#fff 0%, #dfdfdf 100%);
  background: -ms-linear-gradient(#fff 0%, #dfdfdf 100%);
}

一世代前のWebKit系ブラウザに対応させる

article section {
  clear: both;
  border: solid 1px #aaa;
  margin: 20px 0 10px 0;
  padding: 18px 18px 10px 18px;
  border-radius: 10px;
  overflow: hidden;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dfdfdf));
  background: -webkit-linear-gradient(#fff 0%, #dfdfdf 100%);
  background: -moz-linear-gradient(#fff 0%, #dfdfdf 100%);
  background: -o-linear-gradient(#fff 0%, #dfdfdf 100%);
  background: -ms-linear-gradient(#fff 0%, #dfdfdf 100%);
}

InternetExplorer 9 以下に対応させる

「-ms-filter:」で表示したグラデーションは角丸にはならない

<!--[if lte IE 9]>
<style>
article section {
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#dfdfdf');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#dfdfdf')"
}
</style>
<![endif]-->

グラデーションの角度を変更する

「0deg」で左から右へ０度

article section {
  clear: both;
  border: solid 1px #aaa;
  margin: 20px 0 10px 0;
  padding: 18px 18px 10px 18px;
  border-radius: 10px;
  overflow: hidden;
  background: -webkit-linear-gradient(0deg,#fff 0%, #dfdfdf 100%);
  background: -moz-linear-gradient(0deg,#fff 0%, #dfdfdf 100%);
  background: -o-linear-gradient(0deg,#fff 0%, #dfdfdf 100%);
  background: -ms-linear-gradient(0deg,#fff 0%, #dfdfdf 100%);
}

ナビゲーションバーの背景をグラデーションにする

Photoshopのスタイルのような擬似立体をグラデーションでつくります
「nav ul」に設定する

nav ul {
  background: -webkit-linear-gradient(#777 0%, #555 100%);
}

中間に色を入れる

nav ul {
  background: -webkit-linear-gradient(#777 0%, #444 50%, #333 51%, #555555 100%);
}

ベンダープレフィックス（主要ブラウザに対応させる）

nav ul {
  font-size: 0.75em;
  margin: 0 0 10px 0;
  height: 30px;
  background-color: #005087;
  border-radius: 6px;
  background: -webkit-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
  background: -moz-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
  background: -o-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
  background: -ms-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
}

一世代前のWebKit系ブラウザに対応させる

nav ul {
  font-size: 0.75em;
  margin: 0 0 10px 0;
  height: 30px;
  background-color: #005087;
  border-radius: 6px;
  background: -webkit-gradient(linear, left top, left bottom, from(#777), color-stop(50%, #444), color-stop(50%, #333), to(#555));
	background: -webkit-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
	background: -moz-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
	background: -o-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
	background: -ms-linear-gradient(#777 0%, #444 50%, #333 51%, #555 100%);
}

InternetExplorer 9 以下に対応させる

<!--[if lte IE 9]>
<style>
nav ul	{
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777', endColorstr='#333');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#777', endColorstr='#333')";
}

article section {
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#dfdfdf');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fff', endColorstr='#dfdfdf')";
}
</style>
<![endif]-->