Hi,
Got a suggestion in regards to CSS3. Isabelle (CC) and I are currently
attempting to wire @mozilla/.../random-generator (The thing in
Crypto.getRandomValues()), into layout/style.
We started to make some samples like a sea of flowers or a sea with changing
blue tones. See screenshots attached. Or clouds with random animation speeds,
sizes, and grey tones.
We saw that calc() is similarly usable in most CSS contexts, so we started to
duplicate several header files and read through parser implementation of
calc(), linear-gradiant(); looked into attr(). Recompiled with added random(),
but it's not doing anything yet. We saw SCSS/Sass specifications, but it
doesn't seem to be anywhere near implemented yet, and we would like random()
now.
What we would like it to do, simply (but not limited to) for the purpose of
art, without the need for any JS, is this:
Up front said: With 5s or 2s we mean a time value like (or exactly, the same
C++/Mozilla type used in animation-duration), like sampling rate, telling
Firefox when to update color/height/etc. (any css attribute expecting anything
that can easily be randomly generated, such as 5-100px or so, or a HEX color.)
// time in seconds [optional]; sampling rate or: time until next random pick
happens and DOM gets automatically updated, similar to animation-duration
- cssattribute: random(selection1,selection2,selection3, [time in s])
- cssattribute: random(range1-range2, [time in s])
- color: random([hex color code / range part 1][-,][hex color code / range part
2], [time duration until the next update happens, like animation-duration
second.]);
- color: random(#ff0-blue, [3s]); // time is optional
- color: random(#fff-blue, 3s);
- color: random(yellow-orange, 1s) // - is a parsed delimiter, expressing:
from 20px to 25px, not meant as sub(20px,25px)
- width: random(10px-50px, 4s)
- font-size: random(20px-25px, 3s)
- height: random(21px-50px)
- .some_i_tag { icon: (random(✿,❁,...)); } // selection of
unicode flowers; we realize there is no icon: yet, but you get the point.
- color: random(#ffce0, #b11120, #5fd00b, #ad33cc, #ffa500)
- color: random(#ffce0, #b11120, #5fd00b, #ad33cc, #ffa500, 0.5s)
time (as in animation-duration, like 5s) (is a function argument of that type
is available)
"-" is used as a delimiter if it is a range (from a light blue, to a dark blue;
or from 50px-200px)
"," is used as a separator of n function parameters, as usual.
We were wondering whether there is a Python script that would allow addition of
new CSS3 functions, adds the parser functions to files, and makes an empty C++
function wrapper.
Thx!
Dan & Isabelle
_______________________________________________
dev-tech-layout mailing list
[email protected]
https://lists.mozilla.org/listinfo/dev-tech-layout
