Ombreggiatura del rendering attorno a forme non convenzionali con HTML/CSS

Question

Attualmente sto lavorando a un piccolo progetto in cui sto cercando di creare un diagramma di Venn che rappresenti i colori aggiuntivi. Ho iniziato con tre cerchi (border-radius: 50%;) e ho usato una combinazione di elementi di posizione statica con overflow nascosto per creare alcune delle forme più complesse in cui i cerchi si sovrappongono. Si può vedere quello che ho attualmente qui:

http://jsfiddle.net/GjvEE/

Una caratteristica che vorrei aggiungere è l'aggiunta di un colore box-shadow attorno alla forma attualmente in fase di moused-over. La sfida unica che sto affrontando è rappresentata dal nidificazione degli elementi con overflow nascosto e dalla necessità di creare "finti bordi" lungo i quali rendere l'ombra della scatola per ogni sezione del diagramma. Ho preso in considerazione l'opzione di scartare semplicemente questo approccio e creare le forme tramite SVG, ma sono interessato a vedere se qualcuno di voi ha qualche idea intelligente per costruire questo tipo di interazione in forme più complesse usando solo HTML e CSS3 tradizionali.

Grazie in anticipo!

Answer 1

Come utilizzare i CSS: dopo generare nuovi cerchi dietro gli altri e utilizzare uno sfondo sfumato radiale che sfuma in trasparenza?

Ho eseguito implementazioni rapide e di base per Webkit sui cerchi rosso e blu qui. Nota: hover: dopo le definizioni di stile. http://jsfiddle.net/stevelove/2hpwp/