CSS3 offers a lot; essentially it can let you programmatically draw whatever you want fairly easily. While it's cool to see demos and fun things made with it, I'm about as impressed by most "look what I can do with CSS3" things as I am with "look what I can do with <insert graphical design software here>". That's not to say that neither can create amazing things; I'm just noting that since it's apparent CSS3 is quite powerful, it'll take more to impress me. Regardless, it's always fun to see these things :)
Woah: I recognize these exact laser patterns and colors. I feel like there are school photos of my cousins from the late 80s or early 90s which have this pattern as a backdrop. Did you have a reference image?
I don't mean the undermine the skill required to achieve this but why would you use CSS to do something like this? I've also seen stuff like pure CSS logos, pure CSS fail whale, etc. and I have no doubt it helps you understand CSS inside out but what is the practicality of it? I love it, but I just want to know why you'd prefer pure CSS over images or some other way to display similar effects.
This is effectively a vector image. It can fit any window without losing quality. Something like this could also be done with an actual vector image (and there should eventually be good SVG support in all browsers), but I think CSS might give you more control in some situations.
Oh jeepers! - definitely not work safe. My boss was pretty much directly behind me when "MOTHERFUCKING LASERS" appears on my 24" screen in massive letters.
This is the one time I'm glad the place I'm working is so backward web-wise, as the lasers didn't work - no CSS3 for me! - and thus my screen wasn't turn into even more of a profanity-emblazoned eye-magnet.
Lawks, it must suck to work in a factory where scented water is puffed onto doilies by baby deer with adorable eyes (I am guessing). But seriously - "motherfuckinglasers.com" didn't alert you?
Unfortunately:
There are rendering problems in Firefox.
It's a fixed size and doesn't scale with the browser window resolution.
The same page can be achieved in a widely compatible way with a simple image.
The cut-off glow effect in Firefox? I guess the reason for that is a bug in the viewport calculation for the laser’s box-shadow. I mostly focused on webkit. If anyone knows a fix, code is here http://github.com/evilhackerdude/lasers
About resolution independence: I believe we could hack the CSS to use appropriate percentage values for the laser rays. Basically calculate a percentage for width or height in JS and apply that so it scales with the window automatically.
Scientifically proven thanks to modern laser technology:
According to Google Analytics adding “Rick Astley - Never gonna give you up” decreases Avg. Time on Site by 2 seconds.
So, I see something, but feel I must be missing the pièce de résistance here. There's a background covered with parallelograms and the words "Mother-Fucking Lasers" that flash every once in a while.
Should I be seeing something else? (I'm using Chrome on Ubuntu.)
[+] [-] photon_off|15 years ago|reply
[+] [-] jashkenas|15 years ago|reply
lasers.coffee http://github.com/evilhackerdude/lasers/blob/master/lasers.c...
lasers.sass http://github.com/evilhackerdude/lasers/blob/master/lasers.s...
[+] [-] evilhackerdude|15 years ago|reply
[+] [-] pepijndevos|15 years ago|reply
[+] [-] evilhackerdude|15 years ago|reply
[+] [-] decadentcactus|15 years ago|reply
[+] [-] evilhackerdude|15 years ago|reply
[+] [-] snprbob86|15 years ago|reply
[+] [-] GVRV|15 years ago|reply
[+] [-] nzmsv|15 years ago|reply
[+] [-] bialecki|15 years ago|reply
[+] [-] wihon|15 years ago|reply
This is the one time I'm glad the place I'm working is so backward web-wise, as the lasers didn't work - no CSS3 for me! - and thus my screen wasn't turn into even more of a profanity-emblazoned eye-magnet.
So thankfully, she didn't notice. Phew.
[+] [-] nathanwdavis|15 years ago|reply
[+] [-] confuzatron|15 years ago|reply
[+] [-] daten|15 years ago|reply
Unfortunately: There are rendering problems in Firefox. It's a fixed size and doesn't scale with the browser window resolution. The same page can be achieved in a widely compatible way with a simple image.
[+] [-] TeHCrAzY|15 years ago|reply
[+] [-] evilhackerdude|15 years ago|reply
About resolution independence: I believe we could hack the CSS to use appropriate percentage values for the laser rays. Basically calculate a percentage for width or height in JS and apply that so it scales with the window automatically.
[+] [-] evilhackerdude|15 years ago|reply
[+] [-] albemuth|15 years ago|reply
[+] [-] pontifier|15 years ago|reply
[+] [-] roofone|15 years ago|reply
Should I be seeing something else? (I'm using Chrome on Ubuntu.)
[+] [-] Ganthor|15 years ago|reply
[+] [-] evilhackerdude|15 years ago|reply
Ok, I couldn’t resist.
[+] [-] ludwig|15 years ago|reply
[+] [-] Groxx|15 years ago|reply