アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

CSS3で多用するようになったプロパティ3つ

こんにちは、鴨田です。
スマホ対応サイトやMonacaを使ってアプリを作る場合、

CSS3を使って、なるべく画像を作らない傾向にあると思います。
きっと誰もが、よく使うようになった(これからなっていく)プロパティについて、

ちょっと書いてみたいと思います。
1.border-radius
box要素を角丸にしてくれます。
コード:



.box {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  }


サンプル:



こんな感じになります。

それぞれの角で大きさを変えることも出来ます。
コード:


.box2 {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 11px 22px 33px 44px / 44px 33px 22px 11px;
  -moz-border-radius: 11px 22px 33px 44px / 44px 33px 22px 11px;
  -webkit-border-radius: 11px 22px 33px 44px / 44px 33px 22px 11px;
  }


サンプル:



border-radius: 左上横→11px 右上横→22px 右下横→33px 左下横→44px / 左上縦→44px 右上縦→33px 右下縦→22px 左下縦→11px;
となりますが、こういう使い方はしないと思います。

やるとすれば、上側だけ角丸にさせたいなどという時でしょうか。
コード:


.box3 {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 20px 20px 0 0 / 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0 / 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0 / 20px 20px 0 0;
  }


サンプル:



2.box-shadow
box要素に影を付けてくれます。
コード:


.box4 {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 20px;
  box-shadow: 5px 5px 5px #999;
  -moz-box-shadow: 5px 5px 5px #999;
  -webkit-box-shadow: 5px 5px 5px #999;
  }


サンプル:



box-shadow: 横方向のずれ→5px 縦方向のずれ→5px にじみ度合い→5px 影の色→#999;
となります。マイナスにも出来るので、いろんな方向に影を作ることが出来ます。


3.background-gradient
背景色をグラデーションすることが出来ます。
コード:


.box5 {
  width: 300px;
  height: 200px;
  border: 1px solid #f00;
  border-radius: 20px;
  box-shadow: 5px 5px 5px #999;
  -moz-box-shadow: 5px 5px 5px #999;
  -webkit-box-shadow: 5px 5px 5px #999;
  background: -moz-linear-gradient(top, #fff, #666);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#666));
  }


サンプル:



background: -moz-linear-gradient(方向→left top, 最初の色→#fff, 最後の色→#666);

background: -webkit-gradient(種類→linear, 最初の位置→left top, 最後の位置→left bottom, 最初の色→from(#fff), 最後の色→to(#666));
となります。書き方が違うので注意が必要です。
色を追加したり、グラデーションの種類を変えることも出来ます。


.box5 {
  width: 300px;
  height: 200px;
  border: 1px solid #f00;
  border-radius: 20px;
  box-shadow: 5px 5px 5px #999;
  -moz-box-shadow: 5px 5px 5px #999;
  -webkit-box-shadow: 5px 5px 5px #999;
  background: -moz-linear-gradient(top, #fff, #333 50%, #666);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5, #333), to(#666));
  }


サンプル:



以上になります。
今まで画像を使っていたことがCSSだけで手軽に出来るようになっているので、積極的に使っていきたいですね。