toggle
2012-08-11

ブログを見栄えよく

ブログのデザインを少しだけ見栄えよくしました。自己満足です。
一つ目は、ブログの外枠にグラデーション画像を縦に連続的に並べ立体感を出しました。
やり方ですが、まず、サイトの幅より10pxほど長いグラデーションの画像をPhotoshopなどで作ります。高さは20pxほどです。この画像をcssをつかって、縦に連続して表示させます。
cssは
20120811-____________________________2012-08-11_2_12_04.png
です。
私のサイトはグラデーションの作り方が悪くまだまだですが、少しずつ改善していきたいと思っています。あとsafariやIEなどブラウザの違いによって随分見た目が違うので難しいところです。
もう一つはアイテムの画像(例:下のジムニー)に、今度はcss3のbox-shadowを使って影をつけました。
20120811-____________________________2012-08-11_2_12_27.png
こんな感じです。
すごく便利です。これまで私のメインサイトでは、影のぼかし画像を別に用意し合成してきましたが、不要になりました。大きな欠点は、対応しているブラウザが少ないことです。IE8では対応していませんでした。
box-shadowは、こちらのサイトを参考にさせていただきました。


関連記事

コメントを残す

メールアドレスが公開されることはありません。