Bei meinen Experimenten mit der EDOMI Visualisierung habe ich einige Versuche mit CSS gestartet. Dabei ist es mir zwar gelungen so etwas wie ein Icon aus zwei CSS-Elementen zu basteln, allerdings ist das von der Handhabung doch etwas umständlich, da dann mehrere Visuelemente immer zusammen verschoben und bearbeitet werden müssen.
user_pre.PNGuser_sel.PNG
Die Funktionen "Gruppieren" bzw. "Schützen" sind dabei auch nur bedingt hilfreich. Es hat zwar den Vorteil, dass wirklich jedes Einzelteil theoretisch per KO ansprechbar ist, allerdings ist das für einige Grafikelemente vermutlich nicht wirklich relevant (s.o.).
Mein ursprünglicher Gedanke war etwas wie:
mit EDOMI Bordmitteln umzusetzen. Allerdings scheint das zum derzeitigen Entwicklungsstand eher unpraktikabel, abgesehen davon, dass ich überhaupt nicht einschätzen kann wie sich so eine Konstruktion im Vergleich zu einer importierten SVG oder PNG Datei von der Performance auswirken würde.
user_pre.PNGuser_sel.PNG
Die Funktionen "Gruppieren" bzw. "Schützen" sind dabei auch nur bedingt hilfreich. Es hat zwar den Vorteil, dass wirklich jedes Einzelteil theoretisch per KO ansprechbar ist, allerdings ist das für einige Grafikelemente vermutlich nicht wirklich relevant (s.o.).
Mein ursprünglicher Gedanke war etwas wie:
Code:
.snow.icon {
color: #000;
position: absolute;
margin-left: 1px;
margin-top: 9px;
width: 5px;
height: 6px;
border-radius: 4px 0 0 4px;
border-left: solid 1px currentColor;
border-top: solid 1px currentColor;
border-bottom: solid 1px currentColor;
}
.snow.icon:before {
content: '';
position: absolute;
top: -7px;
left: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-left: solid 1px transparent;
border-right: solid 1px currentColor;
border-top: solid 1px currentColor;
border-bottom: solid 1px currentColor;
}
.snow.icon:after {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 9px;
height: 2px;
color: #fff;
background-color: currentColor;
}
.snow.icon i {
position: absolute;
top: 4px;
left: 7px;
width: 2px;
height: 2px;
border-radius: 1px;
background-color: currentColor;
box-shadow: 3px -2px 0 0 currentColor, 3px 1px 0 0 currentColor, 0 3px 0 0 currentColor;
z-index: 2;
}
"Irgendwer" muss das Ganze ja interpretieren und rendern - der Browser also. Ob er nun 100 Zeilen CSS parsen muss oder 3 Zeilen SVG (oder ein paar KB einer Bitmap) ist prinzipiell egal - vermutlich liegt in der Kürze die Würze (und in der Effizienz der entsprechenden Browser-Funktionen). Ich schätze mal, dass PNG bis zu einer gewissen Größe am schnellsten ist, gefolgt von SVG (ohne DOM-Zugriff) und CSS dürfte verlieren, da der ganzen Kram ins DOM geschrieben wird (mit allen Methoden/Properties/etc.).
Kommentar