文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 画像のデザイン > 画像に影を付ける

画像に影を付けるCSSの生成

htmlで画像に影を付けるにはCSSの「box-shadow」を使用します。
当ページでは画像に影を付けるCSSを簡単操作で作成することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

画像に影を付けてみよう

影は上下左右の方向に指定することが出来ます。影のぼかしや色などや、影を内側にも指定できますので是非お試しください。

影の長さ
横方向
縦方向
影のぼかし
影の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
影の広がり
サンプル画像
使用したhtml
<img class="shadow" src="img_sample.png" alt="サンプル画像">
生成したCSS
<style type="text/css">
.shadow {
  box-shadow: 15px 15px 20px #66ff66;
}
</style>
「box-shadow」の使い方は以下を参照ください。
box-shadow 「要素に影を付ける」の構文
広告
広告
ページTOP

注意事項

特になし。

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン