Obecnie pracuję nad małym projektem wktóry próbuję utworzyć diagram Venna reprezentujący kolory addytywne. Zacząłem od trzech kół (promień granicy: 50%;) i użyłem kombinacji elementów o ustalonej pozycji z ukrytym przepełnieniem, aby utworzyć niektóre bardziej złożone kształty gdzie koła się pokrywają. Możesz zobaczyć, co aktualnie mam tutaj:
Jedną z funkcji, którą chciałbym dodać, jest dodaniekolorowy cień w pudełku wokół kształtu, który jest obecnie nałożony na siebie. Unikalne wyzwanie, przed którym stoję, polega na zagnieżdżeniu elementów z ukrytym przelewem i potrzebie stworzenia „sztucznych krawędzi”, wzdłuż których będzie renderowany cień pudełka dla każdej sekcji diagramu. Rozważyłem opcję po prostu rezygnuję z tego podejścia i tworzę kształty za pomocą SVG, ale interesuje mnie, czy ktoś z was ma jakieś sprytne pomysły na budowanie tego rodzaju interakcji w bardziej złożone kształty przy użyciu wyłącznie tradycyjnego HTML i CSS3.
Z góry dziękuję!
Odpowiedzi:
1 dla odpowiedzi № 1Co powiesz na użycie CSS: po, aby wygenerować nowe kręgi za innymi i użyć radialnego gradientowego tła, które zanika do przezroczystości?
Zrobiłem tutaj szybkie, podstawowe implementacje dla Webkit na czerwonym i niebieskim kółku. Zwróć uwagę na: hover: po definicjach stylów. http://jsfiddle.net/stevelove/2hpwp/