Atualmente, estou trabalhando em um pequeno projeto emque estou tentando criar um diagrama de venn representando cores aditivas. Comecei com três círculos (raio da borda: 50%;) e usei uma combinação de elementos de posição estática com estouro oculto para criar algumas das formas mais complexas onde os círculos se sobrepõem. Você pode ver o que eu tenho atualmente aqui:
Um recurso que eu gostaria de adicionar é a adição de umsombra de caixa colorida em torno da forma que está sendo sobreposta atualmente. O desafio único que estou enfrentando é apresentado pelo aninhamento dos elementos com estouro oculto e pela necessidade de criar "arestas falsas" ao longo das quais renderize a sombra da caixa para cada seção do diagrama. Eu considerei a opção de simplesmente descarte essa abordagem e crie as formas via SVG, mas estou interessado em ver se algum de vocês tem alguma idéia inteligente para criar esse tipo de interação em formas mais complexas usando apenas o HTML e CSS3 tradicionais.
Desde já, obrigado!
Respostas:
1 para resposta № 1Que tal usar CSS "s: after para gerar novos círculos atrás dos outros e usar um fundo de gradiente radial que desbota para transparente?
Fiz implementações rápidas e básicas para o Webkit nos círculos vermelho e azul aqui. Observe as definições: hover: after style. http://jsfiddle.net/stevelove/2hpwp/