nambaCSS3共有CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。実際の表示はこちらから確認できます。この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません。1.シャドウまずは、おさらいです。使うことで、画像にシャドウが付きます。0.8);}2.めくれた風シャドウを傾けることで、写真がめくれたような効果を作ることができます。回転させて、シャドウを落としています。20%;}3.トイカメラ風トンネル効果シャドウは、内側に設定することもできます。これをうまく使うとトイカメラ風(トンネル効果)にできます。内向きのシャドウの場合、普通にimgタグにシャドウを設定してもシャドウが付かないので、小細工がが必要になります。absolute)で物理的に重ねる方法を使います。擬似要素を写真に重ねて、シャドウを写真に落とすことで、これを実現しています。着色した半透明レイヤーを重ねることで、トイカメラで撮影したような色味に変えることもできます。↓の例では、緑で着色した半透明レイヤーを重ねています。指定で半透明の緑色を設定しています。rotate関数を使えば、画像の回転もできます。傾けるだけでも、動きが出て面白いですねー。使えば、画像の角を丸めることができます。タグに直接角丸を設定する点です。理由はわかりませんが、ボックスだとクリップしてくれません。長方形の画像に対して、角丸の半径を大きくしていくと楕円になります。CSS3の角丸には、画像が長方形の場合は楕円に、長方形の場合は円になるという特性があります。画像が長方形の場合でも円にするテクニックは、この後説明します。いうのが円状にする魔法の指定になります。50%;}8.円のフレームこちらの記事でも書きましたが、長方形の画像の場合、角丸(border-radius)を設定しても楕円になってしまい、きれいな円になってくれません。そこで、写真を背景画像(background-image)として使うテクニックが登場します。画像をリンクにしたい場合は、DIVタグでなくAタグでマークアップしてください。no-repeat;"></div>cssDIV要素をブロック化し角丸を設定します。250px;}内向きのシャドウを設定することもできます。のぞき穴からのぞいているみたいでかわいいですね。三角のフレーム使う場面はそれほどないかもしれませんが、三角形もできます。三角形を作る方法は、いくつかありますが、ここでは背景グラデーションを応用する方法を使っています。応用になるのですが、グラデーションを2つ重ねそれぞれ、右上・左上から塗りつぶすことで、角を落としています。使う方法などありますが、ここでは一番簡単な方法を紹介しています。重なった風after擬似要素を、transformを使って回転させることで、写真が重なった風のスタイルを作ることができます。同じように、before擬似要素を使えば、もう一枚重ねることもできます。ぼかし内向きのシャドウを使って、背景色と同じ色の影を落とせば、写真のふちをぼかすことができます。src="dog.jpg"></div>cssこの場合も、after擬似要素を使います。シャドウの色が背景色と同じ色になっている点に注意してください。ポイントは、強いぼかしにするために、シャドウを重ねている点です。フェード(シャドウ編)ぼかしの応用で、シャドウの位置をずらしてやれば、画像をフェードさせることができます。この方法は、カスタマイズ性が悪いので、簡易版だと思ってください。一つの方法については、後で説明します。src="dog.jpg"></div>cssぼかしのスタイルと大きくは、違いません。ポイントは、シャドウ(box-shadow)の位置を中心からずらしている点です。フェード(グラデーション編)同じようなフェード効果を、背景グラデーションを使って作ることもできます。こちらの方法は、グラデーションを細かく指定できるので、シャドウを使った方法よりもカスタマイズ性が高いです。関数を使い、背景色で塗りつぶすことで、フェード効果を作っています。オプションがいろいろ指定できるので、角度を変えたり、微妙なフェード感を調整したりできるのが、このやり方のメリットになります。*/}例えば、線形グラデーション(linear-gradient)の替わりに、円形のグラデーションを使うと、こんな感じのものも作れます。写真の角がきらりーんと光る演出です。これも、↑のフェードと同じく、グラデーションの指定で作っています。src="dog.jpg"></div>cssafter擬似要素をポジショニングして写真に重ね、グラデーションのパラメータを調整することで光を作っています。同じことを、alfter擬似要素でもできるかもしれませんね。擬似要素をうまく使えば、リボン風のオーバーレイを作ることができます。src="dog.jpg"></div>cssafter擬似要素をポジショニングして回転させています。hiddenで不要な部分を隠している点です。設定している点も重要です。差し込んだ風Newの表示と同じ要領で、差し込んだ風の演出を作ることもできます。きれいに見せるには、シャドウをうまく調整するのがポイントです。/></div>cssafterとbefore擬似要素を30度回転させて、それぞれ左上と右下に配置しています。フレームだけを傾けるカメラを傾けて撮影したような感じにするテクニックです。写真の構図によっては、活き活きとした感じを演出できます。出来ますが、それだと写真も一緒に回転してしまいます。そこで一度、全体を回転させた後、写真だけ反対の方向に回転させます。半透明フレーム最後に、透明のフレームを作る方法です。対象物にフォーカスを当てたい場合などに使えるかもしれません。タグではなく、背景画像を使っています。no-repeat;"></div>css線(border)の色を半透明にすることで、html側で設定した背景画像が透過される仕組みになっています。作る必要はないと思いますが、ユーザー投稿写真などを扱うサイトや写真が頻繁に更新されるサイトなどでは、こういったエフェクトが応用できるかなと思います。実際の表示については、こちらから確認できますので、自分でも組み合わせたり、カスタマイズしたりしてみると仕組みや考え方がわかるので、いろいろ遊んでみてください!Tweetnambaど田舎でプログラマーとかWebデザイナーとかやりながらWebサービスを作る人。PHP、jQueryなどの技術系の記事担当してます。がんばって記事を書くので、リアクションしてくれると嬉しいです。スマートフォンスマートフォンからも最新のロケットをチェックできます。同じURLからアクセスできます。記事をチェック基本、毎日記事を書いています。よかったらチェックしてください。素材を最大限に活かすデザインアイデア50。