Google's Material Design 3 uses a so-called state layer for interaction states like hovering, focusing or pressing an element. These states are represented by adding a layer with a fixed opacity onto the element to change its colour.
I am currently creating a web application with Vue.js and using tailwindcss as my CSS framework, and was wondering if there is a simple way of creating these state layers. As far as I am aware, there are two possibilities.
I can either use a semi-transparent HTML element that has the same size, shape and position as the original element and set its colour and opacity to the required values. However, doing this for every element that can be interacted with would be a lot of work, greatly increase the size of my HTML code, and I do not think it is an elegant solution.
The second way I can think of is calculating the resulting color of adding the layer to the element, and setting this value when the user interacts with it. Calculating these values manually and stating them explicitly would also be a lot of work, and it would mean that whenever I change one of the content colours, I would have to recalculate all colours for interaction. Another possibility would be to calculate the values at runtime, which has the added benefit of making them dependant on the content colours, but that would mean that I have to access the tailwind variables inside my JavaScript code, and then set the corresponding classes by concatenating the tailwind class name with the calculated value.
While all of these solutions would be possible, I feel like they are neither simple nor elegant. Is there another way that I did not think of, or is the concept of state layers just not meant for these frameworks?
Related
In the past I've done quite a bit in javascript, including some DOM manipulation.
From there I've learned that reflows/repaints can be a big performance issue in some cases, and should generally be limited to a minimum. Like for example when adding a group of divs you should add all at once (attach them to a div outside of the DOM, then attach that) rather than attaching them one-by-one. The same goes for repaints, which can be triggered by changing CSS properties of an element. Though I must admit I have never looked into repaints that much, so I might be wrong about that last part.
Does this also apply to SVG (seeing it uses a kind of DOM it seems plausible)? And is there a difference for different SVG elements? For example it would make sense that an animation element doesn't create a reflow since it isn't a new SVG element, but more like a property.
Something I'm not sure about are repaints for SVG, do they even exist the same way they do for CSS/HTML? After all SMIL animations already create frames, so a thing like a "repaint" might not make any difference, since the new frame was going to be rendered anyways.
Anyone with a deeper understanding of the inner workings of SMIL who could clarify these things for me?
Your information is out of date. UAs batch up reflows these days so that you don't need to attach divs outside the DOM any more.
SVG doesn't really have reflows as it's basically all absolutely positioned so changing the position of one element only has an effect on that element and any descendants. SVG DOM changes just cause repaints. Sometimes even repaints are not necessary if the appropriate data is in graphics memory, for instand translate transforms are often handled almost entirely by the graphics hardware renderer without repainting these days. SMIL animation is also hooked into this mechanism.
If SVG content has a translate attribute it is stored in a separate layer. Layers can be updated without rerendering in many cases e.g. translation as graphics system can just draw the layers where they need to go.
There's more documentation about how this works in Firefox here but other UAs work in a similar fashion.
I want to change the selection color of a multiple select element. I'm not talking about the background color in this answer, as this only changes the background color of the selected option (the selection color is still visible on top of that).
I'm aware this color is determined by the settings of your hardware, as shown in this question, but I was wondering if there was any way other than changing your system settings that can override this setting.
You could replicate the element with divs and such and program the logic with JS. This would give you complete control over appearance.
It's also not a great idea to ask your user to learn how to use new simple UI elements. You should consider the mobile compatibility, and maintenance of this code too.
I am trying to create an animation for lemon juice and baking soda experiment, and I was wondering how can I create a foaming effect such as the one shown in this image:
The idea I have in mind is to simply draw a foam in photoshop and then use motion tween to change the size. I was hoping I could find a better solution to this.
I have something somewhat similar that you can probably use as a springboard for doing your own thing.
http://www.shaunhusain.com/SteamEffect/
http://www.shaunhusain.com/SteamEffect/srcview/index.html
Currently I'm just drawing some circles with this and then setting a blur on them (not very efficient I know but it served the purposed as I didn't need it to create a bajillion particles to still be effective as "steam" which was the intended goal). You could swap out the shapes/filter I'm using for your own drawing and use the same basic structure.
EDIT
Perhaps this requires at least a little explanation:
Basically you'd want to look at the two files SteamCanvas.mxml and BitOfSteam.as. To be honest I have no idea why I decided to write SteamCanvas as an mxml file. I chose to use Canvas as the base class so I could just wrap it around any other component as a container and be able to detect mouse clicks anywhere within a region. If this is being used in a pure Flash environment, that is one not using the Flex libraries (or mxmlc compiler) it could be changed to extend from Sprite and be written purely in AS3, essentially just the creationComplete code should be moved to the constructor. How this works is the SteamCanvas is a wrapper for whatever controls or components you want to put in it (just like a normal canvas uses absolute positioning, but could have containers that define layout nested within it if need be). The SteamCanvas sets up a timer and if the mouse is down when the timer ticks, it creates instances of BitOfSteam and sets the properties for the steam based on the SteamCanvases own currently set properties. In the project you'll also see a SteamEffectTest.mxml which is just the file you see running that has the sliders on it to change the properties of the SteamCanvas, I used these to come up with what I thought were good values to make somewhat realistic steam. If I remember I'll revisit this component tomorrow and try to take Marty's suggestions to get it updated.
I want to be able to change the background color of the gui form.
If I change the parent panel gui - i want all of its descenders to get the same color.
Is it possible to do it without iterating on all comonents?
10x.
If you want components within your parent container to have the same background color you might setOpacity to false for them (at least for JPanels and other containers).
If you want your complete application to look differently you might consider switching to another Look&Feel (http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html).
I'm thinking of making an application where at some points a graph is displayed that maps people over time and space. The vertical access is location, the horizontal access is time, and each person is identified by a line. At any point where the person did something of significance, there is a bigger dot on their line. Conceptually, clicking the dot brings up data about that particular dot, but clicking anywhere else on the line brings you to a detail on that person. Hypothetically, when you hover over the line the line should change color, and when you hover over a dot, just the dot should change color.
I know that I could do this pretty easily with flash, but I was wondering if these days there is any way to do this using only html and javascript. Is it possible? (Compatibility is not an issue, the only machine I am targeting is my own.)
Thanks!
You can do this with canvas, but it might be simpler to use SVG.
Since SVG uses DOM, you get builtin methods for handling events like clicking etc., instead of having to write your own handling code like you would need with canvas.
There are a few libraries that make working with SVG simpler and cross-browser compatible, such as Raphael and Dojo's dojox.gfx library.
You could create the dots as overlaid divs, so you can easily handle clicks etc. You'd have to sort out positioning quite neatly, of course.
However, highlighting the line will involve calculating the point-to-line distance manually and redrawing.