ばにぶろのデザインを更新しました。

Posted on by vanillate

vaniblog
バニレートブログ

ばにぶろのデザインを更新しました。
ほぼテキストのみで作成されたフリーのWordPressテーマ29個 – かちびと.net から、フリーのテンプレートを入手。そこからちょこちょこっとデザインしました。
CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル:phpspot開発日誌にて、グラデーションボタンを参考にしました。

色は、私がよくみる「新しいな!」と
おもうサイトが寒色系のものが多いので、寒色系に。
はやってるんですかね、寒色系。

こんかいはテキストシャドウや、角丸四角形CSSを使っているので、IEや、古いバージョンのFFでもうまく見れないかもしれません。
是非、アップデートしてご覧ください。

イメージは「ふんわりしたウェブの新時代への期待」
キーワードは「新しい」「寒色系」「キラキラ」
最初もっとグラデーションで光りが虹色になるようなものをイメージして始めたんですが、いつのまにかキラキラした何かという抽象的なものに落ち着きました。
インスピレーションが落ちてくる瞬間って、
はっきりした形ってあんまりないのかもしれない。
あと、とにかく枠という枠を外したかった。デザイン的な意味で。


文字にシャドウをかけてすこし凹ませて見せる

text-shadow: 0 1px #fff;

画像に影と枠をつける

border: 4px solid #fff;
-webkit-box-shadow: 0px 1px 3px #9CC6DC;
-moz-box-shadow: 0px 1px 3px #9CC6DC;


webkit系のみにCSSを適用

body:first-of-type

参考:最近のブラウザ(08年01月辺り)で使えそうなCSSハック


同時に見つけたphotoshopのブラシいろいろ

フォトショップ 使い方マニュアル 星のようなキラキラブラシ
ハイクオリティな商用サイトでも無料で利用できるPhotoshopのブラシ -Fresh eMedia

リニューアルって気持ちいいですね!楽しかったです。




copyright (C) vanillate all rights reserved. powerd by wordpress.
このブログは、CSS3とjavascriptを多用しております。是非、Fireworks3.6以上、safari5以上、chorme10以上でご覧下さい。
実験的なデザインのため、デザイン崩れなどご了承くださいませ。