HTMLの要素(画像とか)に、ページのめくれ演出を付ける

「HTML、ページ、めくる」とかで検索すると、出てくるCSSでの演出。
英語では、「paper curl effect」 と言うらしいですが、
すでに基本的な技術となっており、各種解説サイトがヒットします。

最近、表示がバグったんで気づいたんですが、
ドコモのiコンシェル「ひつじの取材帳」の各コラムの下部にも、この演出がついてましたな。
b0163324_201394.jpg

お手本のような、paper curl(笑)
つまり、HTMLでできてるわけだね。

それはさておき。
検索でヒットする手法は、まさにコレと同じで、

・シャドウを付ける
・擬似要素のbefore、afterを使って、ちょっとだけ回転する
・z-indexを-1にして、シャドウを要素の奥へ
・結果的に回転ではみ出た部分だけ要素の下にでて、めくれているように見える

という手法。
サイトによって多少記述は異なるが、核となる技術はこれしかない。

が。
これが今私が作っているサイトと相性が良くない(苦笑)
そもそも、z-indexとかで管理したくねー。

というわけで、新手法を編み出した。
CSSだけで三角形を作るという技術と、HRを組み合わせて、
HRタグで、カールした“影のみ”を表示できるようにしたのだ。

あとは、影をつけたい要素の下に、class="shadow"を指定したHRタグを続けて置くだけ。


hr.shadow, hr.shadow_r {
position:relative;
height:0;
padding :0 0 8px 0;
margin:0 0 0 0;
width:100%;
}

hr.shadow:before{
content: "";
position: absolute;
bottom: 0px;
left: 8px;
border-style: solid;
border-width: 8px 100px 0px 2px;
border-color: #cccccc #ffffff #ffffff #ffffff;
}
hr.shadow:after {
content: "";
position: absolute;
bottom: 0px;
right: 8px;
border-style: solid;
border-width: 8px 2px 0px 100px;
border-color: #cccccc #ffffff #ffffff #ffffff;
display:block;
}



注意点は、以下の通り。

・幅をピクセルで指定している(赤色)ので、幅200px以下には向かない。必要に応じて要調整。
・単色で影を表現しているので、エッジはぼけない。
・上記コードは、白背景用。他の色や画像の上にめくれの影をつけたい場合は、

border-color: rgba(0,0,0,0.5) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)

とすると幸せになれるかも。

・afterだけ、beforeだけにすると、片側だけに影をつけられる。
・めくれの高さを簡単に調節したい場合は、上記コード中の 8px (緑色)を変更すべし。
[PR]
by miries | 2014-12-06 20:19 | デジタル系


<< さくらサーバーを使用したサイト Windows7の拡張子関連付け! >>