スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSS3で光沢のある効果をつける

CSS3で光沢のある効果をつける

投稿日:2015年2月13日

このチュートリアルではCSS3で光沢のある効果をつける方法を紹介します。


Step1:はじめに

昔はPhotoshopのようなデザインソフトでしかできなかったことが、CSSを使うだけでもできるようになってきました。
CSS3によって、さらにできることは増えてきています。

CSS3で光沢のある効果をつける

このチュートリアルでは、CSS3のグラデーションを使って、光沢のある効果を画像につける方法を紹介したいと思います。



Step2:HTMLの構造

HTML

まずは簡単なHTMLを作りましょう。CSSがメインなので、コードは最小限にします。
コードはできるだけきれいにし、適切に意味づけを行います。

ラッパーがあり、photoというクラス名のdiv要素があり、その中にimgタグがある、という構造です。

<!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でのスタイリング

一般

まずは、写真に集中するために、ページ全体の設定をすることから始めましょう。
全体の背景に色を付け、ラッパーを調整します。

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

一般

次は、写真をつつむdiv要素です。
まずは、高さと幅を指定します。
そして、これが一番重要な点ですが、positionをrelativeにします。
後の項目は、見た目の調整です。
全体に2つの影をつけ、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);
}

写真はだいぶよくなりました。
しかし、大事なことを忘れています。
光沢効果そのものです。
最後にこの部分をやりましょう。

写真に:before疑似要素を設定

全体を通して一番重要な点は、:before疑似要素へのスタイリングです。
これにより、HTMLに新しくタグを追加しなくても、写真に光沢があるようなスタイルを追加することができます。
この要素のpositionをabsoluteに設定します。
上のステップで写真のpositionを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つのグラデーションがあります。
1つ目は、左上から中央にかけて、透明から透明な白へのグラデーションがかかっています。
右下は、完全な透明になっています。
そのため、斜めの線ができあがっています。

CSS3で光沢のある効果をつける



Step4:最後に

これでチュートリアルは終了です。
もし質問や提案があれば、どんどん私あてにコメントしてください。
Githubに完成品をあげているので、気軽にフォークしてください。

このチュートリアルを気に入っていただき、何かヒントになることがあれば幸いです。



引用:Web Design Library  著者:onextrapixel.com  翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

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