テンプレート・素材カテゴリ


CSS3で透明度を指定する「opacity」,「rgba()」

TOPページ > デザイン講座 > CSS3で透明度を指定する「opacity」,「rgba()」

透明度を使って視覚的に ON/OFF の差をつけたり、レイヤーを重ねたような表現を作ることができます。


opacity; 1~10(100%);

紫陽花の花

通常時は透明度60%、オンマウスで100%の濃度で表示されます。

.photo-item {
  opacity: .6;
  -webkit-box-flex: 1;
  -webkit-transition: opacity .2s;
}

.photo-item:hover {
  opacity: 1;
}

rgba(redの値, greenの値, buleの値, alpfaの値);

rgba(0,204,204,0.4)

rgba()は、カラーやbackground-colorなどの値を、透明度とセットで指定できます。

  background: rgba(0,204,204,0);
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 10px -105px 0 rgba(0,204,204,0.2), 30px -200px 0 rgba(0,204,204,0.1), -30px -290px 0 rgba(0,204,204,0.1), 190px -250px 0 rgba(0,204,204,0.1), 270px -320px 0 rgba(0,204,204,0.2), 450px -100px 0 rgba(0,102,204,0.2);
  box-shadow: 10px -105px 0 rgba(0,204,204,0.2), 30px -200px 0 rgba(0,204,204,0.1), -30px -290px 0 rgba(0,204,204,0.1), 190px -250px 0 rgba(0,204,204,0.1), 270px -320px 0 rgba(0,204,204,0.2), 350px -100px 0 rgba(0,204,204,0.2);
  content: '';
  height: 200px;
  left: 0;
  position: absolute;
  top: 100%;
  width: 200px;
}

Recommended


スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。

応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅。

現場のワークフローに沿ったサイト制作までを詳しく解説。プロが教える「実習」+「講義」の全30レッスン。

これからのWeb制作に必要な知識を総合的に解説。HTML5 2014年勧告候補に対応!

はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。



ページトップへ