サイトマップ
シャドウで立体感？演出方法...
シリウスのレスポンシブテンプレートを暇に飽かしてカスタマイズ...というよりい弄り続けて
いないと...何かしら変化が無いとつまらない...
というわけで、見出しh2からh4まで立体感を現す（３Dとは違いますでしょう）シャドウを
付けてみましたら、案外出来がいいので使い始め...
日頃お世話になっている皆様にもご案内いたします...です？
まず、見出しのイメージは当サイトをご覧ください..
あちこち浮いているように見えませんか？・・
で、ついでにボーダーにも取り付け...ブラック
ブルー
シリウス機能で読み込むボックスにも取り付け
ボックススタイルの見本です
記事内画像にも取り付け..
記事内画像については、ややコンテンツが異なるので、シリウス装飾サイトでご覧ください
https://www.affiliateno1.com/designer/designer4/
如何でしょう...
2次元にささやかな3次元を加えたおしゃれなスタイルのイメージは？
無理にとは言いませんが、導入したい方は簡単作業ですぐに作動しますのでど～ぞ..
見出し.....
最初は、ブラックシャドウだったんですけど当サイトのカラーに合わないのでブルー化しました...
ブラックシャドウは以下...コード...
box-shadow: 0 9px 9px rgba(0,0,0,0.2);
現行例...導入解説...
見出しへの指定
見出しへの指示、指定はスタイルシートでCSS指定すれば即完了します
（それだけです）
以下CSSをスタイルシートに張り付けてください...
h2 {
position: relative;/*fixedの場合もあります*/
box-shadow: 0 9px 9px rgba(0,0,255,0.2);
}
h3 {
position: relative;/*fixedの場合もあります*/
box-shadow: 0 9px 9px rgba(0,0,255,0.2);
}
h4 {
position: relative;/*fixedの場合もあります*/
box-shadow: 0 9px 9px rgba(0,0,255,0.2);
}
.Shadowfoto40 {
box-shadow: 0 0px 10px rgba(0,0,255,0.5);
width:100%;
}
濃度調整は、rgba(0,0,255,0.2);のラスト数値2を書き換えて調整します
数値を書き換えてください...
シャドウの影幅は、0 9px 9pxの数値書き換え...
HTMLボーダーへの指定
HTML
ボーダーをdiv classで囲みます..
class名は任意ですので書き換えても使えます...
<div class="Shadowfoto2"><hr style="border-bottom:solid 1px #CCC" border="0" /></div>
スタイルシートに以下を張り付け
例 ブラック
Shadowfoto2 {
box-shadow:0px 10px 20px;
width:100%;
}
例 ブルー
.Shadowfoto40 {
box-shadow: 0 0px 10px rgba(0,0,255,0.5);
width:100%;
}
影幅は、上に習い数値調整してください...
参照 ブラック
ボーダーカラー cccの濃度が、お気に召さない場合は、eeeに変えてみることも？
eeeに書き換えての表現例..太さも0.2にしてみました..
違いを..ご確認ください..
ボックスへの指定
class名は任意..
箱型であるため、同サイト内で使用する際は、ボーダーとclass名は混同を避けるため
別にしてください..
HTML
上に習い.ボックス枠をShadowfoto3で囲むだけです...
<div class="Shadowfoto3"><div class="nmlbox">
ボックススタイルの見本です
</div>
</div>
スタイルシートは以下...
角に丸みをつけるため border-radius: 3px;を入れてますが、不要なら削除...
.Shadowfoto3 {
border-radius: 3px;
box-shadow: 0 0px 10px rgba(0,0,0,0.25);
}
影の度合いは数値変更...
以上で終わります...
見出しh2,h3,h4やボーダーにシャドウ付けて立体感を表現
トップページ