caramel*vanilla > 角丸ジェネレーター - Spiffy Box

角丸が好き

角丸を実現する方法は様々
テーブルタグを使ったり、javascript＋CSSだったり、画像を使わない方法もありますね。
簡単に作成するためのジェネレーターもまたたくさんあります。
角丸ってやっぱりかわいいしやわらかい印象になります。

またしてもひとつ角丸ジェネレーターをみつけたのでちょっとご紹介

Spiffy Box - Simple Rounded Corner CSS Boxes made easy.

角丸を作る

作成はとっても簡単です。

ステップ1

角丸画像のサイズと半径/角丸画像の色・ボーダー色・背景色を入力して「Build It!」

ステップ2

生成された角丸画像を保存して適当な場所にUPします。

ステップ3

生成されたCSSをコピペします。
WordPressだったらお使いのテーマのスタイルシート等
(画像へのパスは各自修正)

ステップ4

生成されたXHTMLをコピペします。

このジェネレーターでさっそく作ってみました↓

画像の高さが決め打ちなので使えるところは限られてしまいますがその分XHTMLがシンプルといえばシンプル
角丸のTipsやジェネレーターはいつか使うときのためにいろいろストックしておくといいかもしれません :-)