スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSS3で写真に光沢をつける方法

CSS3で写真に光沢をつける方法

投稿日:2013年4月2日       ソフトウェア:CSS3

このチュートリアルではCSS3で写真に光沢をつける方法について紹介します。


Step1:はじめに

通常はAdobe Photoshopのようなデザインソフトを使って作成する効果を、
CSSだけを使用して作成する機会が増えています。

最近ではCSS3を使って新しい効果を生み出すことが可能になりました。

CSS3グラデーション前

このチュートリアルではCSS3のグラデーションを使って、
一般的に良く使われる光沢のある画像を作成する方法をご紹介します。

Step2:HTML構造

このミニチュートリアルではとても基本的な構造のHTML5を使います。

この効果を主にCSSを使って達成するため、記述は最小限にします。

従って、HTMLは可能な限り無駄が無く、
セマンティックなものにする必要があります。

ページ構造やラッパーを除いて、ここではIMGタグを記述した
DIV要素(photoクラスを含む)を一つだけ使用します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Glossy Gradient Effect</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>
<div id="wrapper">
<div class="photo">
<img src="images/bag.jpg" alt="Bag">
</div>
</div><!-- END Wrapper -->

</body>
</html>

HTMLについては以上です。次にCSSについて説明します。




Step3:CSSスタイル

概要

ここでは写真のみに集中できるようにページを作ります。

ページ全体に背景色を加えて、ページをラップするDIVを記述します。

body{
background: #EDEFF4;
}
#wrapper {
margin: 30px auto;
width: 600px;
}

Step4:写真コンテナのDIV要素のスタイルを記述する

次のステップはdivコンテナのスタイルの記述です。

ここでブロック要素の高さと幅を指定します。

次のステップはdivコンテナのスタイルの記述です。

ここでブロック要素の高さと幅を指定します。

このステップで最も重要なのはポジションの値をrelativeにすることです。

それ以外の記述、例えば画像全体をとりまく二重の影や
1pxの境界線といったものは単に見た目を整えるためのものです。

.photo {
margin: 30px auto;
height: 401px;
width: 602px;
position: relative;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
-o-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
}

.photo img {
border: 1px solid rgba(255, 255, 255, .1);
}

これで画像は問題なく見えていますが、忘れていることが一つあります。

光沢効果そのものです。これが最後のステップになります。

Step5:写真のbefore疑似要素をスタイルする(完成)

これが最も重要なステップです。

divのbefore疑似要素をスタイルします。

これにより、HTMLに余分なマークアップをすることなく、
写真に光沢をつける効果を追加することが出来ます。

つまり、その方がよりセマンティックになるというわけです。

ここではこのエレメントを写真の上にabsoluteで配置して
(先ほどのステップでポジションをrelativeにすることが重要なのはこのためです。)、
この新しい疑似要素の背景にCSS3のグラデーションを適用します。

.photo:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)),
to(rgba(0, 0, 0, .25))),-webkit-gradient(linear, left top, right bottom,
color-stop(0, rgba(255, 255, 255, 0)),color-stop(0.5, rgba(255, 255, 255, .1)),
color-stop(0.501, rgba(255, 255, 255, 0)),color-stop(1, rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)),
-moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%,
rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)),
linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%,
rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}

初心者の方はこれらの数字が難しそうに見えるかもしれませんが、
これらは単に(不透明度の適用が可能な)RGBaのカラーコードの数値で、
これらの数値によりグラデーションを切り替えています。もう少し詳しく説明をすると、
グラデーションは左上の角から右下に向かって半分ずつ2つの部分に分かれています。

最初の半分は完全な透明から50%白のグラデーション、残りの半分では完全な透明に戻ります。

(これにより斜めのラインが描かれています)

CSS3グラデーション完成

Step6:最後に

ミニチュートリアルはこれで終わりです。

質問や提案があれば遠慮なくコメント欄にお書きください。

ファイルは全てGithubに掲載していますので、
ご自由にサイトを訪れてお持ち帰りください。

このチュートリアルをお楽しみになり、有益と感じて頂ければ幸いです。

引用:Web Design Library  著者:Onextrapixel 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング