3. とりあえずはこれだけ覚えればいいと思う6つのCSS3

とりあえずはこれだけ覚えればいいと思う6つのCSS3

とりあえずはこれだけ覚えればいいと思う6つのCSS3
CSS3を使うと、いろいろな表現が可能になります。 今まで画像で対応していた角丸表現やグラデーションボタンなど、デザインの幅が広がるし画像を使わないから軽くなることも。 IE7、8などのレガシーブラウザは未対応な部分もあるけど、積極的に使っていきたいCSS3。 今回は、とりあえず覚えておけばコーディングが楽になる！と思う6つのスタイルの使い方をまとめました。

リスト

  1. 角丸
  2. グラデーション
  3. 透明度
  4. シャドウ
  5. アニメーション
  6. 変形

角丸

デモ

HTML

<div id="demoBorderRadiusBox">
</div>

CSS

#demoBorderRadiusBox{
	border-radius: 5px;
	background-color: #DDD;
	margin: 0 0 20px;
	padding: 10px;
	width: 400px;
	height: 100px;
}

グラデーション

デモ

HTML

<div id="demoGradientBox">
</div>

CSS

#demoGradientBox{
	width: 400px;
	height: 100px;
	background-color: #999;
	background: -moz-linear-gradient(top, #FFF, #999);
	background: -webkit-linear-gradient(top, #FFF, #999);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#FFFFFF', EndColorStr='#999999');
	background: linear-gradient(top, #FFF, #999);
}

透明度

何もなし分かりやすいように、白ベースの背景画像を用意しました。 他の透明度の基本カラーはすべて黒指定です。

opacityで透明度指定

デモ

HTML

<!-- opacityで透明度指定 -->
<div id="demoopacityBox"><div></div></div>

CSS

/* opacityで透明度指定 */
#demoopacityBox div{
  opacity: 0.5;
  background-color: #000;
}

背景のrgbaの透明度指定

デモ（背景のrgbaの透明度指定）

HTML


<!-- 背景のrgbaの透明度指定 -->
<div id="demorgbaBox"><div></div>
</div>

CSS


/* 背景のrgbaの透明度指定 */
#demorgbaBox div{
  background-color: rgba(0,0,0,0.5);
}

ボーダーの透明度指定

デモ

HTML

<!-- ボーダーの透明度指定 -->
<div id="demoborderBox"><div></div>
</div>

CSS

/* ボーダーの透明度指定 */
#demoborderBox div{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 5px dashed rgba(0,0,0,0.1);
}

文字の色の透明度指定

デモ

あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ

HTML


<!-- 文字の色の透明度指定 -->
<div id="democolorBox"><div>
  <p>あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、</p></div>
</div>

CSS

/* 文字の色の透明度指定 */
#democolorBox div{
  color: rgba(255,255,255,0.5);
  background-color: #000;
}

シャドウ

デモ

あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ

HTML

<div id="demoShadowBox">
</div>
<div id="demoTextShadowBox"><p>あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ、あいうえお、かきくけこ、さしすせそ</p>
</div>

CSS

/* ボックスシャドウ */
#demoShadowBox{
  background-color: #999;
  box-shadow: 2px 2px 6px #000;
}
/* テキストシャドウ */
#demoTextShadowBox{
  background-color: #DDD;
  color:#000;
  text-shadow: -1px -1px 1px #FFF, 2px 2px 2px #000;
}

アニメーション

ライブラリを使わないかぎりIE9には対応していないようなので、 あまり使えない感がありますが、 スマホサイトには積極的に使いたいですね。

animation

デモ

HTML

<!-- animation -->
<div id="demoAnimaBox">
</div>

CSS

#demoAnimaBox{
  -webkit-animation: animaRoll 4s linear infinite alternate;
  animation: animaRoll 4s linear infinite alternate;
}

@-webkit-keyframes animaRoll {
  0% {width: 0px;  background:  #FFF;}
  100% {width: 360px; background:  #000;}
}
@keyframes animaRoll {
  0% {width: 0px;  background:  #FFF;}
  100% {width: 360px; background:  #000;}
}

transition

デモ

ロールオーバーで動作します。

HTML

<!-- transition -->
<div id="demoTransBox">
</div>

CSS

#demoTransBox{
  background-color: #999;
  -webkit-transition:0.2s linear;
  transition:0.2s linear;
}
#demoTransBox:hover{
  width:400px;
  background-color: #FFF;
}

アニメーションツールサイト

変形

移動

デモ

HTML

<div id="demoTranslateBox">
</div>

CSS

#demoTranslateBox{
  -webkit-transform: translate(50px,-50px);
  -ms-transform: translate(50px,-50px);
  transform: translate(50px,-50px);
}

縮尺

デモ

HTML

<div id="demoScaleBox">
</div>

CSS

#demoScaleBox{
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

回転

デモ

HTML

<div id="demoRotateBox">
</div>

CSS

#demoRotateBox{
  -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
}

傾斜

デモ

HTML

<div id="demoSkewBox">
</div>

CSS

#demoSkewBox{
  -webkit-transform: skew(20deg);
  -ms-transform: skew(20deg);
  transform: skew(20deg);
}

Related Posts