Comments on: Futurebox, lightbox without the javascript and target pseudo-class

By: Cameron Milton

Cameron Milton — Fri, 18 Nov 2011 09:46:08 +0000

Hi, I have been following your awesome ninja skills with css for sometime. However, I have taken your ninja skills and mixed it together with the aid of CSS3 to create a transition effect for the future/lightbox.

My code is here, it’s just a proof of concept, feel free to use, polish, take credit,etc.

HTML :: http://pastebin.com/RhUgv6QN
CSS :: http://pastebin.com/KFYWTL30

Please note I did not embed the images so you will need to provide your own if you try this.

By: pinar

pinar — Mon, 07 Nov 2011 20:48:24 +0000

doesn’t work with IE8…is there a hack I can use?

By: CSS3 Round Thumbnail Gallery « BCmoney MobileTV

CSS3 Round Thumbnail Gallery « BCmoney MobileTV — Fri, 16 Sep 2011 13:56:54 +0000

[...] to pure CSS3 popups, I take no credit at all, the credit is due to The CSS Ninja and his excellent Futurebox tutorial. DEMO Rounded Thumbnail gallery CSS3 is shaping up to be quite promising. The following is an [...]

By: Prayag Verma

Prayag Verma — Thu, 01 Sep 2011 12:34:41 +0000

I can’t see the meta tags you mentioned in the Black box in the code , please mention them without the Black Background

Thanks a lot

By: Ryan Seddon

Ryan Seddon — Sun, 21 Aug 2011 22:56:39 +0000

@Prayag Verma –

The meta tag in your current example is using width and not device width

You should instead use the following:

See safari docs on the viewport meta tag for more info

By: Denis

Denis — Mon, 15 Aug 2011 15:17:22 +0000

I used a CSS lightbox to display Youtube videos once a user clicks an image earlier last week. However, I found that after I played the video and closed the lightbox, the video would continue to play in the background.

I found the same issue with futurebox, is it just impossible to close the window and the video.

I hope what I said makes sense. If you have a fix for this I would highly appreciate it. Or would I have to just use a javascript lightbox

By: Prayag Verma

Prayag Verma — Wed, 10 Aug 2011 17:43:06 +0000

Hi nice Box

I was trying to implement this in Blogger Platform but there was no overlay so after Inspecting the Element I found this error

Viewport width or height set to physical device width, try using “device-width” constant instead for future compatibility.

I am a newbie to this ,please recommend a solution,This is a place where I implemented this http://www.demo.stylifyyourblog.com/2011/08/futurebox.html

By: Gwen

Gwen — Sun, 26 Jun 2011 10:58:19 +0000

Hi!
Sorry for my english, i’m french and a novice in webdesign.
Firstable, i’d like to say thanks for the article, very usefull!
But, I’m having an issue, the picture won’t close. I don’t know if it’s due to the position of .overlay (i made it fixed). I don’t have a link to show you, my website’s not online yet -__-
i don’t put the iframe’s line on the CSS, maybe it’s the problem?

here’s a pic with firebug open.
http://imageshack.us/photo/my-images/820/capturedcran20110626125.png/
Maybe it could help.

By: Ryan Seddon

Ryan Seddon — Mon, 13 Jun 2011 04:11:11 +0000

@Stijn - Hard to say without a link or testcase with the issue you're having.

By: Stijn

Stijn — Wed, 08 Jun 2011 17:20:32 +0000

Hello great tutorial.
But I have a few problems, my futurebox won’t close and the background is restricted to a div (wrapper). How can I fix this?