デザイン性のあるフレームをCSSで作りたい。
そんなあなたにおすすめなのが、『CSS Boxes with Outside Frame (Rounded or Not)』。デザインフレームをCSSで作る方法だ。
このエントリーでは、HTML、およびCSSのソースコードが公開されている。どんな風にマークアップしていくか、も順序立てて説明してくれている、
divが多くなるが、画像の分け方、repeatの仕方は綺麗だと思う。
完成形は、下部の「So this would be the final markup.」の部分。HTMLとCSSをまとめてマークアップしている。
オリジナルなデザインフレーム、これを参考に作ってみたいですね。
Editor's Note
雨ですねー。今日は仕事だ。
朝ジムしてから行こうかな。
Related Entry
- CSS3のベンダープレフィクスを自動で追加してくれる「CSSPrefixer」
- Photoshopで作ったようなCSS3のタイポグラフィー
- CSS3で作るクールなお問い合わせフォーム
- floatした画像の横のテキストの回り込みをクリアするCSS
- CSS3を使ったボタンジェネレータ
- CSSだけでJavaScriptのような動きを実装するサンプル30
