& Ted, you're right about the filter: alpha(opacity=5);. Each letter here is almost totally transparent (opacity being only 5 percent), its color being either the brightest green (00ff00) or the brightest yellow (ffff00) and, in additive rgb colors of computer screens, if you put two semi-transparent colors on top of one another, the result is lighter and more saturated.
I'm not sure about the browser math here, but it seems that two letters with an alpha value of 5 percent, put on top of each other, produce a combined alpha value of 10 percent, so in this piece, color is brightest and most saturated in places where there's 20 pieces of letters (20 * 5% = 100%) on top of each other. There's 50 letters in total (letters given by reader are repeated until there's 50 of them on screen) and coordinates of each letter are randomized, so most of the gradually increasing alpha values (from 5, 10, 15, ... all the way up to 100 percent) and thus gradually changing hues should be seen on screen.
As far as I know, the alpha property used to be an IE only property, but nowadays it works in Firefox/Mozilla too, though it's probably not a part of any current CSS standard.
Ted, if you search for alpha filter stuff, you might also come across other css filters, like motion blur, wave, etc. They're pretty cool and behave almost like real Photoshop filters but, unfortunately, all (or at least most) of them are Microsoft proprietary, so they work very badly, if at all, in other browsers than IE.
Marko -- <div> (position: absolute) has thrown a wrench into my styles cascade... am working to fix this but not exactly sure about how -- will be out most of today, and will play with it again later -- so far:
13 kommentarer:
Yes!
qckhfo
quick! haste! forward!
marko,
filter: alpha(opacity=5);
i've heard about it, but didn't realize it was working at this time -- is this for real?!? it looks like you've got it going on here...
impressive, if so
and at any rate -- love this piece!
/t.
Thanx, Karri & Ted!
& Ted, you're right about the filter: alpha(opacity=5);. Each letter here is almost totally transparent (opacity being only 5 percent), its color being either the brightest green (00ff00) or the brightest yellow (ffff00) and, in additive rgb colors of computer screens, if you put two semi-transparent colors on top of one another, the result is lighter and more saturated.
I'm not sure about the browser math here, but it seems that two letters with an alpha value of 5 percent, put on top of each other, produce a combined alpha value of 10 percent, so in this piece, color is brightest and most saturated in places where there's 20 pieces of letters (20 * 5% = 100%) on top of each other. There's 50 letters in total (letters given by reader are repeated until there's 50 of them on screen) and coordinates of each letter are randomized, so most of the gradually increasing alpha values (from 5, 10, 15, ... all the way up to 100 percent) and thus gradually changing hues should be seen on screen.
As far as I know, the alpha property used to be an IE only property, but nowadays it works in Firefox/Mozilla too, though it's probably not a part of any current CSS standard.
Marko -- thanks
for the explanation
i'll look into the css specs -- meanwhile, a chance to play with alpha --
Web as Photoshop...
good stuff -- great piece!
/t.
Ted, if you search for alpha filter stuff, you might also come across other css filters, like motion blur, wave, etc. They're pretty cool and behave almost like real Photoshop filters but, unfortunately, all (or at least most) of them are Microsoft proprietary, so they work very badly, if at all, in other browsers than IE.
qpgmf
right,
so it probably is not advisable to go too far with this stuff if making it work on the web is a concern
my interest for now is to see what alpha/IE might be able to do as a programmable generator running offline
thx again for the info, M
/t.
I'm looking forward to seeing your alpha experiments, Ted! :)
& looking forward to showing 'em to you, Marko -- working on it right now -- and there's just a couple more things to get lined up...
playing with the various parameters you've defined -- adding, deleting, changing, and etc -- great fun
working with 144 alpha layers on IE just fine -- works with NB8.1 in IE-mode, but not Firefox
/t.
Sounds cool, Ted. And I thought 50 layers were much! :)
Marko -- <div> (position: absolute) has thrown a wrench into my styles cascade... am working to fix this but not exactly sure about how -- will be out most of today, and will play with it again later -- so far:
warnell.com/wip/alpha.htm
resize the screen and you can see my layers are relative (within an absolute cascade) while the alphas are absolute (wrenching the cascade)
also, this version using 180 alpha layers + 3 -- earlier it was up to 244 alpha, but starting to run slow
/t.
Ok,
final is here
now integrated CSS:
warnell.com/db11x85/lillies.htm
interesting possibilities with these alpha layers -- will be playing some more with this -- hope to see more of yours here at Nurotus
M, check the lillies source...
/t.
Oh yeah, this is a beautiful little baby, Ted. I like especially those red hues among green leaves.
Need to go to Helsinki now, but I'll check the source asap.
Cheers,
Marko
correct spelling & link to lilies at warnell.com:
Nea's Lilies
and this, 320 alpha layers at warnell.com:
Spirit of Guernica
for Pablo
and this blog entry at codepo():
codepo()
codepo() is accessible to all --
alpha layer works at warnell.com require browsers MSIE v.6+ or NB v.8+ IE MODE, possibly others, PCs OK, Macs ???
thank you Marko
/t.
Skicka en kommentar