imgサーチ｜写真素材専門サーチエンジン

写真素材検索のための専門サーチエンジン

新規サイト登録 | 修正・削除 | サイトマップ | お気に入りに追加

AND OR

現在、写真素材を提供している素材屋さんは非常に増え、使いたい内容の写真素材を手に入れるのも容易になってきました。その手に入れた写真素材が加工自由ならアレンジを加えてみるのも１つの手です。
ここでは、画像ソフトを使わずにアレンジするプチテクをご紹介していきます。

スタイルシート編：01｜スタイルシート編：02｜テーブル編｜ジェネレーター編｜ぷちテク INDEX

スタイルシート編：01

まずは当サイトでも使用している、手軽で簡単なワザからご紹介です。

ポラロイド風

写真の四辺にポラロイド風の枠を付けます。上・左と下・右で線の色に変化を付け、影っぽく表現。

サンプル画像

▼スタイルシート

img.pict{
 background: #FFFFFF;
 border-top: 1px solid #CCCCCC;
 border-left: 1px solid #CCCCCC;
 border-bottom: 1px solid #666666;
 border-right: 1px solid #666666;
 padding: 5px; //写真の枠の太さ
}

▼HTML

<img src="img/sample1.jpg" width="200" height="150" alt="" class="pict">

さらにこんな応用もできます。

Flower Garden

▼スタイルシート

.pict{
 background: #FFFFFF;
 border-top: 1px solid #CCCCCC;
 border-left: 1px solid #CCCCCC;
 border-bottom: 1px solid #666666;
 border-right: 1px solid #666666;
 padding: 5px;
 width: 200px; //写真画像の幅
 text-align: center; //文字の並び方。「right」で右寄せ、「left」で左寄せ。
 color:#996699; //文字色
 font-weight: bold; //文字の太さ
}

▼HTML

<div class="pict">
<img src="img/sample2.jpg" width="200" height="150" alt="" style="margin-bottom:3px"><br>
Flower Garden
</div>

スタイルシートを１つ作っておけば、あとはclass指定で手軽に効果を反映できて便利です。

スタイルシート編：01｜スタイルシート編：02｜テーブル編｜ジェネレーター編｜ぷちテク INDEX

サーチカテゴリ

素材サイト全般が登録可能な姉妹サイト「Web素材屋サーチ」もあります。

スタイルシート編：01

ポラロイド風

サーチカテゴリ

最新のお知らせ

お手軽ぷちテク講座

SPONSORED LINK