divbox装飾

記事ボックスを装飾するサンプル

サンプル1

1. 角丸ボックス

角丸10px

角丸20px

右下角丸50

2. 影付きボックス

A : box-shadow / B : box-shadow + 角丸10px / C : box-shadow + border

3. 枠線を複数表示

A : 複数の枠線 / B : 上下左右影 / C : 影太さ複数

サンプル2

4. 枠線と外側影で演出

dotted

double

dashed

5. z-index:-1不要の立体影1

z-index:-1 を使わずbeforeの影を回転させ、aferで上から塗って隠す

6. z-index:-1不要の立体影1

影画像をbeforeに表示

影画像

1のようにbとaで影をつけてキャプチャして画像作ってそれをbeforeに配置

サンプル3

7. 一時流行ったテープ貼り演出

テープっぽいボックス

角度を変更

テープと6の影画像

8. 一時流行ったテープ貼り演出2

四隅

上下左右

塗りのα値で透明

9. ボックス回転（transform）

回転させたらテキストも回転

pタグ段落を逆回転

skewX

サンプル4

10. 段落区切りを演出

webマーケティングで見かける

クチコミ販促コンテンツ。

自己アピールより

第三者からの噂や批評の方が、

情報評価の影響が大きいという心理学ネタで

ウインザー効果と呼ばれる。

有名事例は

amazonのカスタマーレビュー。

お客様の声成功事例アンケート結果等は

アピール情報を編集した販促広告記事であり、

企業も顧客も単純に第三者からのクチコミ情報と信じない。

ただ、サービス・商品への不安解消による販促効果の視点ではクチコミ販促と同種のコンテンツと言える。

情報発信が手軽になったため

自画自賛記事は批判される場合がある。

そこで古典的な手法

専門家/有名人の紹介/評価に好意を持つ

ハロー効果が使われる。

雑誌TVで紹介、●★賞受賞なども

同様に評価のモノサシを提示する。

サンプル5

11. 段落区切りを演出2

コメントコメントコメントコメントコメント

コメントコメントコメントコメント

コメントコメントコメントコメントコメント

サンプル6

12. z-index:-1で影1

左下影

左右下影

右下影

13. z-index:-1で影2

左角影

鉤括弧ボーダー

右角影

z-index:-1でいろいろ

14. 影でいろいろ

影で色違いドットボーダー

2種類大きさ違いドットボーダー

幅固定で無理矢理配置

divbox装飾の考察

デザイナーから絵が上がってくれば大抵、画像切って貼るだけで完成することがほとんどで、css だけでできるような「css のみでボックス装飾」のテクニックでは、角丸以外、プロの仕事ではほとんど使われていないのではないか、と思ったりする今日この頃。

ここでもやはり、装飾だけのために、span や div タグを増殖させるようなことは禁止する方向で、ボックス装飾の基本などを一応、実験してみたものです。

最近はやりの影を回転させてボックスの下に配置して立体に見せるようなやり方では、 before や after で影用のボックスを作り、回転させて、[z-index : -1] で配置したりする方法が紹介されたりしてます。
これについては、実際には z-index を他で使ってることが多いので、z-index : -1 にしたものは、他要素の下に配置されてしまい、見えなくなることが多いのではないかと思います。

なので、z-index を使わない方法を考えて5や6で一応、実験結果を紹介しています。

※ [z-index:-1] はどこにでも汎用的に使えない、などと言ってましたが、調査・実験してみると、対策が判明しました。
ということで、「どこでも -1 影を使う方法」を記事にしました。(20181022)
ついでにこのページにも、サンプル6 に -1影をやってみたものを追加しました。

[WEB tips] 【z-index:-1 の活用】z-index:-1 を BODY タグの子以外で使う方法

主なcssやテクニック

border-radius: ボックスの角を丸くするCSS
transform:rotateZ(Rdeg): Z軸方向に(R)deg回転させる。

ページトップへ

top > css3実験 >

divbox装飾