週末離れ離れだったバイク、今日帰ってきました
嬉しくて、走りたくて。
バイクで会社から一旦お家に帰ってから、同じくバイク好きの下の娘を乗っけて小一時間走ってきました
・・・こういう時は寒さ知らずデス
さて今日は、
久しぶりにブログ記事の装飾パターンのひとつ、やってみます。
影のついた囲み枠
こんな感じです。
囲み枠はグラデーションにしてみました。
囲み枠はグラデーションにしてみました。
<div style="padding: 25px; background: #fff; box-shadow: 0 0 50px #A1D784 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #A1D784 inset, 5px 5px 0 #cecece; -webkit-box-shadow: 0 0 50px #A1D784 inset, 5px 5px 0 #cecece;">★★★ここに好きな言葉を入れます★★★</div>
「#A1D784」の部分が今回選んだグリーンのカラーコードです。
「#A1D784」は3箇所ありますよね。
なので、色を変えたい場合は、3箇所の「#A1D784」を好きなカラーコードに置き換えます。
例えば、「#FFB0D8」（ピンク）に変えると、
ピンクのグラデーションになります。
<div style="padding: 25px; background: #fff; box-shadow: 0 0 50px #FFB0D8 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #FFB0D8 inset, 5px 5px 0 #cecece; -webkit-box-shadow: 0 0 50px #FFB0D8 inset, 5px 5px 0 #cecece;">★★★ここに好きな言葉を入れます★★★</div>
ついでに影なしバージョンも。
影なしのグリーングラデーション
<div style="padding: 25px; background: #fff; box-shadow: 0 0 50px #A1D784 inset; -moz-box-shadow: 0 0 50px #A1D784 inset; -webkit-box-shadow: 0 0 50px #A1D784 inset;">★★★ここに好きな言葉を入れます★★★</div>
影なしのピンクグラデーション
<div style="padding: 25px; background: #fff; box-shadow: 0 0 50px #FFB0D8 inset; -moz-box-shadow: 0 0 50px #FFB0D8 inset; -webkit-box-shadow: 0 0 50px #FFB0D8 inset;">★★★ここに好きな言葉を入れます★★★</div>
お好きなカラーでトライしてみてくださいね
「Happy Clover」って
「Happy Clover」の
「パソコン操作個別レッスン」
つながってくださる方、募集中 
よろしくお願いします
