Webサイトのヘッダーやフッターにスポットライトがあたったようなデザイン。
特にデザイン系のブログや、落ち着いた雰囲気のサイトによく見かけます。
例えば『Webデザインレシピ』さんのフッターとか。

で、これをCSS3の円形グラデーションで実現してみます。
はじめに
まずは原理を説明。

CSS3で [...]

CSS3で可能になった新しいレイアウト法「ボックスレイアウト」。
新しいといっても、それはあくまでレイアウトの指定方法であり、レイアウトの形自体は普段我々がよく使っているものです。
基本的に縦に区切られた2カラム、3カラム、4カラム…といったレイアウトは全てボックスレイアウトと言えるでしょう。
こ [...]

通常widthやheightを指定をしたボックスにpaddingやborderを指定すると、paddingとborder分がプラスされた値がそのボックスの実際の横幅、高さになります。

少しややこしいですね。
そこで登場するのがCSS3の『box-sizing』プロパティ。
これを使えば、paddi [...]

このブログはWordPressで作成していますが、iPhone表示用のプラグインは使用せず、CSS3の『media-query』という技術を使用してiPhone等に対応させています。
試しにウィンドウサイズを自由に変えてみて下さい。
ウィンドウサイズに合わせていろいろな部分の表示が変わると思います。 [...]

最近CSS3で作ったハイクオリティーなボタンをよく見かけます。
画像を使わなくてすむので、表示自体も早くなりますし、文言やサイズ、はたまたデザインの変更にも簡単に対応することが出来ますね。
というわけで、今回はよく見るCSS3ボタンの作り方をいくつかご紹介します。
初級編
まずはそれほど複雑な設定を [...]

CSS3の中でも最もややこしいグラデーション機能。
何故ややこしいのか？それは基本的な記述方法がすでに面倒くさい上に、webkit系とMozilla系で記述方法が全く違うからです。
本来は線形、円形のグラデーションが可能ですが、とりえあず今回は難易度の低い線形グラデーションを紹介します。
ちなみにO [...]

CSS3の中でも最も簡単で導入しやすいプロパティ『text-shadow』。
CSSでテキストにシャドウをつけることができます。
基本的な記述方法
プロパティは『text-shadow』。値は数値3つとカラーで構成されています。

ちなみこのプロパティに関してはベンダープレフィクスは必要ありません。 [...]

様々なWebサイトで見かける角丸ボックスデザイン。
代表的なもので言えばAppleのWebサイトはそのほとんどが角丸ボックスでデザインされています。
これまでは角丸ボックスと作るときは画像を使うかJavascriptを使うかでした。
しかしCSS3ではとても簡単に角丸ボックスを作ることが出来ます。
[...]

CSS3で誰もがまずは試してみたいの機能の一つ『box-shadow』プロパティ。
比較的簡単な記述で簡単にボックスシャドウ（ドロップシャドウ）をつけることができます。
基本的な記述方法
省略形が存在するので記述方法にはいくつかパターンがありますが、まずは基本形を。
プロパティは『box-shado [...]

IE9 Beta版もリリースされ、そろそろCSS3の準備を始めようかなと思っている方も多いと思います。
そこで書き方のルールやIE対策、現状で使えるプロパティ等、Web制作者なら事前に知っておきたい事柄をまとめてみました。

ベンダープレフィクスって何？
CSS3で書かれたスタイルシートを覗いたこと [...]

小間切れにしか時間を取れなかったので数日かかりましたが、なんとかブログのリニューアルが完了しました。
細かいツッコミどころはいろいろありますが、とりあえず機能的な面はOKだと思われるので告知しちゃいます。
今回は攻めましたよ。いろんな意味で…
CSS3を容赦なく使ってデザイン
まず一番の攻めどころ。 [...]

最近のマイブームでもあるCSS3。
これまではできなかった様々な表現が可能になりますが、各ブラウザの対応状況はまだバラバラです。
この混沌とした現状を奇麗にまとめてくれてるのが『findmebyip』というサイト。
ここを見ると、どのプロパティがどのブラウザで使えるか一目瞭然です。

まとめているブ [...]