CSSだけで可愛い飾り枠(ボックス)デザイン備忘録

2019-12-12サイト運営, 記事

仕事関係の情報共有サイトを担当することになり、カスタマイズサイトを見回っていました。 9割が女性のコミュニティで、利用者からの要望が「楽しくログインできるデザインに」とのこと。

少し前にはcssでは実装できなかったことまで出来るようになっていて、割と楽しく進めている。

そんな中からこのサイトで使っていこうと思った飾り枠(ボックス)デザインを残します。

備忘録なのでcssのご紹介はありません。

飾り枠(ボックス)デザイン

ワンポイントだけのシンプルなボックス

シンプルなボックス中央にアクセントを。罫線は要否が選択できるよう、別要素にしたのでいろいろ使いまわせそう。

ルーズリーフを破いたようなボックス

MEMO
使うかどうかはわからないけど、どうしても紙っぽいボックスが欲しくて。あまり需要はないのかな?

両サイドにアクセントをつけただけのシンプルなボックス

CHECK
メインで使おうと思っているボックスは、主張しすぎないデザインで。
タイトルは取り外し可。

サイトイメージとは一味ちがうマステ風ボックス

\ マステ風 /
可愛すぎて多分使わないだろうけど作っちゃった。
もう少しカラーを押さえたら大丈夫かしら?

どのボックスにも使えるPOINTタイトル

n取り外し可のタイトルをもう一つ。
ちょっとくどいけどインパクトが欲しいときに。
ただしこの見出しはPOINTとしてしか使えない

括弧のような引用(blockquote)ボックス

なにかでお世話になるかもしれないから、blockquoteも整えてみる。
もう少し小さくしたほうがバランスよいのかな?

引用:サイトの飾り枠(ボックス)デザインを可愛く

参考サイトのご紹介

Purple Life

女性向きの優しいデザインが多い。わたしのサイトが情報系のものだったら、黒板のお知らせボックスを使ってみたい。

ぴょんなことから

同じデザインでもカラー違いで確認できるのが嬉しい。こちらも女性向きの可愛いデザインが豊富。