Recently I was on Dribble and I found this design by Rogie. I had read somewhere on the web that implementing designs from Dribble was a good way to sharpen CSS skills. So I figured, why not, I would have at it.
One of the disadvantages of using box-shadow was that I could not figure out a way to have the face be a part of the shadow (if you know, let me know pls!) So, I had to figure out how to give the illusion of there being a box cutout where the screen is.
I started by making a black div with the face on it, but then it covered the outer screen's bottom right border radius. After much Googling, I found out about overflow: hidden. This attribute value clips the overflow content, making it invisible.
In order to have it shift left and right with the horizontal slider, I added a line to the changeShadow function.
Since the black screen had an absolute positioning, a negative left positioning would shift it out of the parent screen. The value goes from -100 to 100, so the left property would go from -10 to 10.
I had to round the bottom right corner of the Game Boy, but border-radius: value didn't suffice. I found out that one can specify the length of the curve on every edge of the border. Here's what I had for #gameboy.
The last big challenge of this implementation was prettying up the sliders. The style that Rogie chose was similar to the shadow of the Game Boy, so I couldn't just leave the default sliding styles. Little did I know of how picky each browser would be with slider styles. I found a great CSS-Tricks article that really helped me out.
Safari and Firefox have their own CSS selectors for the track (the sliding track) and the thumb (what you click to drag to a value.) There's not much more than I can say except to recommend the CSS-Tricks article.
I did however find out that an <input> with type="range" and orient="vertical" won't have css styles in Webkit (Chrome, Safari, Opera.) So I had to rotate the input instead. I was kind of sad about that though. I like adding new HTML attributes if they're helpful :(.