[CSS]ナイスアイデア！二つの繋がる要素を一つのドロップシャドウで処理するテクニック

div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。 上がborder:1px;の状態、下がbox-shadowで一つにした状態です。 Drop shadow for 2 elements preserving the intersection in CSS 凸型の要素はタブや上からコンテンツをひっぱりだす時によく使われ、デモではひっぱりだすトグル用に「Show / Hide」と書いてあります。 ※このデモではトグルとしての機能は実装されていません。 デモページ 実装は非常にシンプルです。 HTML 二つの要素はdivでもpでもaでもブロックとなる要素なら何でも構いません。ポイントは二つの要素を内包するdiv要素を設けることです。 <div class="block"> <div class="innerblock"> <p

[bleu-bleut]

トグルの部分で一旦ラッパーのbox-shadowを消すというより、 シャドウの部分にかぶせている感じ。だから、トグルのbackgroundの指定がないと透過してしまう。z-index無しでもこのサンプルでは問題ない。コーディング済み。

[z1a2nh]

出っ歯

[poppun1940]

div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。 上がborder:1px;の状態、下がbox-shadowで一つにした状態です。 Drop shadow for 2 elements preserving the intersection in CS

[ebisu3htn]

div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します。 上がborder:1px;の状態、下がbox-shadowで一つにした状態です。 Drop shad […] via コリス http://coliss.com

[kana321]

div, p, aなどの要素を二つ繋げたものを一つのドロップシャドウで処理するスタイルシートのテクニックを紹介します

[ytkwsm]

2つの要素で出来た凸の全てに対して簡単にシャドウつける方法

[nors]

http://helloanselm.com/2014/drop-shadows-for-two-coherent-elements-preserving-intersection-in-css/