 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今号のデザイン道場は、スタイルシートで写真の彩度やコントラスト変更、グレースケールなどに変更する方法をご紹介します。
 |
|
 |
 |
HTMLはご自身で変更してください。
サンプル用にclass名を付けたdivタグを記載しています。
このclass名については、ご自身で変更いただいて結構です。
●HTML
<div class="photocontrast">
<img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/photo_s02.jpg" width="300"><div class="photodesc">コントラスト</div>
</div>
<div class="photosaturate">
<img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/photo_s02.jpg" width="300"><div class="photodesc">彩度</div>
</div>
<div class="photograyscale">
<img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/photo_s02.jpg" width="300"><div class="photodesc">グレースケール</div>
</div>
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
filter: contrast、filter: saturate、filter: grayscaleで指定可能です。
-webkit-や-moz-のベンダーフィックスについては、各ブラウザでの対応状況によりますので必要です。全て記載ください。
●スタイルシート
.photocontrast img {
-webkit-filter: contrast(180%);
-moz-filter: contrast(180%);
-o-filter: contrast(180%);
-ms-filter: contrast(180%);
filter: contrast(180%);
}
.photosaturate img {
-webkit-filter: saturate(250%);
-moz-filter: saturate(250%);
-o-filter: saturate(250%);
-ms-filter: saturate(250%);
filter: saturate(250%);
}
.photograyscale img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.