積極的に取り入れたい9つのCSS3(+jQuery)テクニック

Posted under - Web Design

7

CSS3(+jQuery)を使った、ちょっといいかも!と思うエフェクトを集めてみました。 まだまだ非対応ブラウザが多い CSS3 ですが、できるだけ積極的に使ってみたいなーとも思ってます。 まずはいろいろ試してみることからはじめてみましょう!

CSS3 & jQuery

CSS3 の登場で、いろんな CSS のトリックを使ったエフェクトが考えられてます。まだまだ CSS3 に非対応のブラウザも多いので、全てを CSS3 で表現する訳にはいかないのが現状ですが、私的には積極的にどんどん取り入れていきたいなーとも思ってます。

海外ブログなどで、色んな CSS3 を使った Tips が紹介されているので、その中からいくつかご紹介します。どれもサンプルを作って試してみたものばかりです。以下の環境で動作確認もしています。

  • Mac : firefox、Safari、Chrome
  • Win : firefox、IE8、Safari、Opera、Chrome

CSS3(jQuery)テクニック 目次

  1. 画像ホバー時にオーバーレイ – CSS3
  2. 画像ホバー時にオーバーレイ + リンクなど – CSS3
  3. 画像ホバー時にインフォメーション – CSS3
  4. 画像を丸くしてみる – CSS3
  5. 画像を丸くして、内側にシャドウ – CSS3
  1. CSS3 + jQueryで画像を丸角にしてみる
  2. マウスホバーで画像をフリップ(裏返しに)する – CSS3
  3. CSS3でテーブルの行、列を装飾する
  4. jQuery でストライプ &フォーカスされたテーブルデザイン

1. 画像ホバー時にオーバーレイ – CSS3

画像にリンクが貼られている時など、マウスを乗せたときにアイコンなどを表示します。リンクが貼られているかどうかが一目で分かるので、ユーザーフレンドリーなデザインだと思います。今回は CSS3 っぽく、アニメーション(フェード)を使ったオーバーレイをご紹介。

CSS3 Sample

オーバーレイ用のアイコン画像

まず、マウスの乗せたときに表示するアイコンには、左の様な PNG画像を使っています。

通常時は不透明度を「0」 にして、マウスホバー時に不透明度100%にして表示させています。ついでに元の画像も、ホバー時に不透明度を 80% に変更してそれっぽくしています。

HTML

<a href="#"><img src="images/image.jpg" alt="" /><span class="overlay"></span></a>

a 要素の中に、画像と空の <span> タグを入れています。

CSS

span.overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(images/overlay.png) no-repeat 50% 50%;
	top:0;
	left:0;
	opacity: 0;
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	transition: opacity .3s linear;
	filter: alpha(opacity=0);
}
span.overlay:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
a:hover img {
	opacity: .8;
	filter: alpha(opacity=80);
}

span 要素を絶対配置で画像に重ねています。通常時は opacity : 0 にして、:hover 時に opacity : 1 にしているだけですね!あとは transition 系のプロパティーで、フェードのアニメーションをつけています。

IE8 ではアニメーションはしませんが、ちゃんとオーバーレイのアイコンは表示されます。

2. 画像ホバー時にオーバーレイ + リンクなど – CSS3

さっきと似てますが、画像ホバー時に、<li> タグのようなブロック要素も表示できます。もちろん各要素にリンクも貼れるので、いろんな使い方が考えられますね!

CSS3 Sample

    • ツイッター
    • facebook
    • dribbble
    • ツイッター
    • facebook
    • dribbble
    • ツイッター
    • facebook
    • dribbble

HTML

<ul>
<li><img src="images/image01.jpg" alt="" />
	<ul class="overlay">
		<li><a href="#"><img src="images/twitter.png" alt="Twitter" /></a></li>
		<li><a href="#"><img src="images/facebook.png" alt="facebook" /></a></li>
		<li><a href="#"><img src="images/dribbble.png" alt="dribbble" /></a></li>
	</ul>
</li>
<li><img src="images/image02.jpg" alt="" />
	<ul class="overlay">
		<li><a href="#"><img src="images/twitter.png" alt="Twitter" /></a></li>
		<li><a href="#"><img src="images/facebook.png" alt="facebook" /></a></li>
		<li><a href="#"><img src="images/dribbble.png" alt="dribbble" /></a></li>
	</ul>
</li>
</ul>

今回は ul 要素を使って、アイコンを横並びリストにしてみました。

CSS

ul.overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(images/overlay.png) repeat 0 0;
	top:0;
	left:0;
	opacity: 0;
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	transition: opacity .3s linear;
	filter: alpha(opacity=0);
}
ul.overlay:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

基本的にさっきの span 要素が、ul 要素に変わっただけですね!

3. マウスオーバーでブロック要素を表示

画像ホバー時に、ブロックレベル要素が出現します。画像のキャプションなどを表示できるので、ギャラリー系の Webサイトで使えそうですねー。

CSS3 Sample

  • Title

    ここには紹介文など

    • ツイッター
    • facebook
    • dribbble
  • Title

    ここには紹介文など

    • ツイッター
    • facebook
    • dribbble
  • Title

    ここには紹介文など

    • ツイッター
    • facebook
    • dribbble
  • Title

    ここには紹介文など

    • ツイッター
    • facebook
    • dribbble
  • Title

    ここには紹介文など

    • ツイッター
    • facebook
    • dribbble
  • Title

    ここには紹介文など

    • ツイッター
    • facebook
    • dribbble

HTML

<ul>
  <li class="item">
	<a href="#"><img src="image01.jpg" alt="" /></a>
    <div class="info">
	<h4>Title</h4>
	<p>ここには紹介文など</p>
	<ul class="icon">
	<li><a href="#"><img src="twitter.png" alt="Twitter" /></a></li>
	<li><a href="#"><img src="facebook.png" alt="facebook" /></a></li>
	<li><a href="#"><img src="dribbble.png" alt="dribbble" /></a></li>
	</ul>
    </div>
  </li>
   <li class="item">
	<a href="#"><img src="image02.jpg" alt="" /></a>
    <div class="info">
	<h4>Title</h4>
	<p>ここには紹介文など</p>
	<ul class="icon">
	<li><a href="#"><img src="twitter.png" alt="Twitter" /></a></li>
	<li><a href="#"><img src="facebook.png" alt="facebook" /></a></li>
	<li><a href="#"><img src="dribbble.png" alt="dribbble" /></a></li>
	</ul>
    </div>
  </li>
</ul>

画像のすぐ下に div 要素を置いてます。そして div 要素の中に、見出しや段落、リストなどを入れています。

CSS

li.item{
	position: relative;
}
	li.item:hover{
		z-index: 10;
	}

li.item:hover img{
	position: relative;
	z-index: 100;
}
.info{
	position: absolute;
	top:-5px;
	left:-5px;
	width: 300px;
	background: #fff;
	padding: 210px 5px 5px;
	display: none;
}
	li.item:hover .info{
		display: block;
		z-index: 50;
	}

div.info は、絶対配置で画像に重ねた上で、display : none で非表示にします。そしてマウスオーバー時に display : block で表示しています。そして注意するのが、z-index の指定です。画像を div 要素よりも上層に指定しますが、単純に img 要素を最上層にしてしまうと、div 要素が他の画像の下に隠れてしまいます。なので、:hover の時にだけ、z-index を調整するようにしています。

4. 画像を丸くしてみる – CSS3

コメント欄のアバターなどで、使ってみたい感じですねー。単純に border-radiusで丸くするだけですけど、可愛いですよね w 丸いと w

CSS3 Sample

HTML

<ul>
	<li><img src="image01.jpg" alt~"" /></li>
	<li><img src="image02.jpg" alt~"" /></li>
	<li><img src="image03.jpg" alt~"" /></li>
</ul>

HTML では、単純に画像を横並びリストに入れています。

CSS

li{
	float:left;
	border: 5px solid #df769c;
	-webkit-border-radius: 80px;
  	-moz-border-radius: 80px;
	border-radius: 80px;
}

li img{
  width: 150px;
  height: 150px;
  -webkit-border-radius: 75px;
  -moz-border-radius: 75px;
  border-radius: 75px;
}

今回は li 要素に border を指定してみました。その場合は半径が大きくなっているので、border-radius の値も大きくしないと隙間ができてしまします!

5. 画像を丸くして、内側にシャドウ – CSS3

画像に box-shadow を使って、内側に影をしていしても、通常ではシャドウが表示されません。なのでひと工夫して、画像の内側にシャドウを表示するコードです。

CSS3 Sample

HTML

<ul>
<li><span class="avatar1"><img src="avatar1.jpg"></span></li>
<li><span class="avatar2"><img src="avatar2.jpg"></span></li>
<li><span class="avatar3"><img src="avatar3.jpg"></span></li>
</ul>

画像を <span> タグで囲んで、その背景に画像を指定してします。img 要素自体は、opacity : 0 で不透明度を「0」にして見えなくしてます。何で画像を挟むのかというと … 実はこれ、未完成なんです。訳は次のサンプルで説明しますねー!

CSS

span{
	display: inline-block;
	-webkit-border-radius: 75px;
	-moz-border-radius: 75px;
	border-radius: 75px;
	-webkit-box-shadow: inset 0 1px 8px rgba(0, 0, 0, .7);
	-moz-box-shadow: inset 0 1px 8px rgba(0, 0, 0, .7);
	box-shadow: inset 0 1px 8px rgba(0, 0, 0, .7);
}
span.avatar1{background: url(avatar1.jpg) no-repeat 0 0;}
span.avatar2{background: url(avatar2.jpg) no-repeat 0 0;}
span.avatar3{background: url(avatar3.jpg) no-repeat 0 0;}
span img{
	opcity:0;
	filter: alpha(opacity=0);
}

span 要素毎に、背景画像をそれぞれ指定しなくてはいけないのがめんどくさいですよねー … X(

6. CSS3 + jQueryで画像を丸角にしてみる

今度はさっきのサンプルを改良して、jQuery と組み合わせてみます。CSS で、背景画像をいちいち指定しなくてすむようになります!

HTML

<ul>
<li><img.round src="avatar1.jpg"></li>
<li><img.round src="avatar2.jpg"></li>
<li><img.round src="avatar3.jpg"></li>
</ul>

HTML では、span 要素も記述していません。単純にリストに画像を入れただけのマークアップです。

jQuery

jQuery(function(){
	jQuery("img.round").each(function(i){
		jQuery(this).wrap('<span class="' + jQuery(this).attr('class') + '" style="background:url(' + jQuery(this).attr('src') + ') no-repeat center center;">').css("opacity","0");
	})
});

jQuery で img 要素を span 要素で囲みます。そしてその span 要素の背景に、画像をそのまま指定しています。img 要素自体は、opacity : 0 で非表示にしてしまいます。

CSS

span.round{
	display: inline-block;
	-webkit-border-radius: 75px;
	-moz-border-radius: 75px;
	border-radius: 75px;
	-webkit-box-shadow: inset 0 1px 8px rgba(0, 0, 0, .7);
	-moz-box-shadow: inset 0 1px 8px rgba(0, 0, 0, .7);
	box-shadow: inset 0 1px 8px rgba(0, 0, 0, .7);
}

これで span 要素ごとに、背景画像を指定する必要はなくなりましたね!

7. マウスホバーで画像をフリップ(裏返しに)する

画像に裏面なんてありませんが、カードをひっくり返したようなエフェクトをつけるスニペットです。webkit系ブラウザの Chrome と Safari のみの対応です。それ以外のブラウザは、瞬間的に表と裏が入れ替わるだけです。

  • Title

    ここにテキスト。

  • Title

    ここにテキスト。

  • Title

    ここにテキスト。

HTML

<ul>
<li>
<div class="card">
	<div class="face front">
    <img src="image.jpg" alt="" />
	</div>
	<div class="face back">
    <h4>Title</h4>
    <p>ここにテキスト。</p>
	</div>
</div>
</li>
</ul>

card という div 要素の中に、frontback というふたつのdiv 要素があり、それぞれがになってます。

CSS

.card {
	width: 300px;
	height: 200px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 0.5s;
}

li:hover .card { -webkit-transform: rotateY(180deg); }

li .face {
	position: absolute;
	-webkit-backface-visibility: hidden;
}
li .back {
	width: 260px;
	height: 160px;
	-webkit-transform: rotateY(180deg);
	background: #fff ;
	padding:20px;
}
li .front { z-index: 10;}
li:hover .front { z-index: 0;}

表となる .frontの z-index を、ホバー時に変更しています。そのエフェクトにCSS3のアニメーションを使っていますが、3Dアニメーションに対応しているのが現在は webkit系ブラウザだけです …。

8. CSS3でテーブルの行、列を装飾する

今までテーブルの行や、列を装飾する場合は、いちいち class="odd" みたいに、クラスをつけて指定してました。横はまだ楽なんですけど、縦の列を装飾しようとすると、かなりめんどくさかったです。

CSS3 は、nth-of-type() という疑似クラスを使って、縦でも横でも簡単にテーブルを装飾できます。HTML は普通の table 要素なので省略します。特にクラスなどを指定する必要もありません。

CSS3 プロパティ対応表
Chrome
Chrome
Firefox
Firefox

Opera

Safari
IE
IE
5 3.6 10.6 5 8
Border Radius ok ok ok ok no
Box Shadow ok ok ok ok no
Opacity ok ok ok ok no
CSS Animetiosn ok no no ok no
CSS Gradients ok ok no ok no
CSS Reflactions ok no no ok no
Data accurate as of Oct 2010
CSS
/* 横の奇数行を装飾 */
tbody tr:nth-of-type(odd){ background:rgba(204,204,204,0.3); }
/* 縦の奇数列を装飾 */
tbody td:nth-of-type(odd){ background:rgba(204,204,204,0.3); }

nth-of-type(odd)で、奇数の行(列)を指定して背景色を指定しています。rgba で 不透明度 0.3(30%)としてあるのは、縦横が重なった部分は背景を濃くする為です。必要なければ、普通に #F0F0F0 などで指定すればOKです。HTML は至ってシンプルですし、CSS もたった数行です!これは嬉しいですね ;D

9. jQuery でストライプ &フォーカスされたテーブルデザイン

最後に jQuery を使って、前述のテーブルのように行、列を装飾するスプリクトをご紹介します。これなら IE8 でも安心して使えますね!これを使うと、縦でも横でもスタイルを指定できますし、目立たせたいなーという列を、フォーカスすることもできます(シャドウには画像をつかってます)。

CSS3 プロパティ対応表
Chrome
Chrome
Firefox
Firefox

Opera

Safari
IE
IE
5 3.6 10.6 5 8
Border Radius ok ok ok ok no
Box Shadow ok ok ok ok no
Opacity ok ok ok ok no
CSS Animetiosn ok no no ok no
CSS Gradients ok ok no ok no
CSS Reflactions ok no no ok no
Data accurate as of Oct 2010

HTML

<table>
<caption>CSS3 プロパティ対応表</caption>
<colgroup class="first"></colgroup>
<colgroup class="chrome"></colgroup>
<colgroup class="firefox"></colgroup>
<colgroup class="opera" id="featured"></colgroup>
<colgroup class="safari"></colgroup>
<colgroup class="ie"></colgroup>
<thead>
<tbody>
... 以下省略 ...

HTML は、列の数だけ <colgroup class="first"></colgroup> という様にタグを追加するだけで、あとは普通に table を書いていくだけです。

jQuery

jQuery(function() {
	var numCols = jQuery("colgroup").length,featuredCol;
    jQuery("tr:odd").addClass("odd");
    jQuery("tr:last").addClass("final-row");
    jQuery("colgroup").each(function(i) {
        if (this.id == "featured") featuredCol = i+1;
    });
    jQuery("tbody td, tbody th").each(function(i) {
        jQuery(this).addClass("table-col-" + ((i % numCols) + 1));
        if (((i%numCols)+1) == (featuredCol-1)) jQuery(this).addClass("leftOfFeatured");
        if (((i%numCols)+1) == (featuredCol+1)) jQuery(this).addClass("rightOfFeatured");
    });

});

jQuery によって、テーブル内の各要素に、色んなクラスが自動的につけられます。あとは CSS で、クラスごとにスタイルを指定していけば OK です。

CSS

/* 列(縦)の色 */
colgroup .first,
colgroup .opera {
	background-color: rgba(232, 159, 186, .1);
}
colgroup .chrome,
colgroup .ie {
	background-color: rgba(232, 159, 186, .2);
}
colgroup .firefox,
colgroup .safari {
	background-color: rgba(232, 159, 186, .3);
}

/* 奇数行の色 */
.odd .table-col-1,
.odd .table-col-2,
.odd .table-col-3,
.odd .table-col-4,
.odd .table-col-5,
.odd .table-col-6 {background-color:rgba(255,255,255,.7);}

/* 最後の行 */
.final-row{ /* Style */ }

スタイルシートでは、縦(列)・横(行)のスタイルを指定していきます。まず縦は、colgroup につけたクラスで、そのまま指定しています。

横(行)は、奇数の tr 要素に odd というクラスがつくので、それを利用して装飾していきます。また、各 tdth 要素には、左から順番に table-col-1table-col-2table-col-3 というクラスがつきます。

また、一番最後の行の tr 要素には、final-row というクラスもつきます。今回はちょっと手抜きをして、color に RGBa を使ってしまいましたが、#ffffff などで指定すれば IE8 以下でもキレイに表示できます!

9.1. フォーカスする列のスタイル

今度はフォーカスしたい列の部分です。まず、フォーカスしたい列の colgroup 要素には、予め featured という id を指定しておきます。すると jQuery によって、featured という id を指定した列の左隣り、右隣りの thtd 要素に、それぞれ leftOfFeatuerdrightOfFeatured というクラスがつきます。このクラスを利用して、サンプルではシャドウを背景画像に指定しています。

CSS
/* シャドウ */
.leftOfFeatured {
	background-image: url(shadow-left.png);
	background-position: 100% 0;
	background-repeat: repeat-y
}
.rightOfFeatured {
	background-image: url(shadow-right.png);
	background-position:  0;
	background-repeat: repeat-y
}

これからブラウザもどんどん進化して、jQuery などを使わなくても、CSS だけで色んなエフェクトができるようになりますねー。Web サイトを素敵にするエフェクトなら、どんどん積極的に使っていきたいですね!

Related samples

Comments

Thank you for the comment.