WebAppers

/ best free open source web resources /

Shopify

How to Create a Non-Javascript Lightbox with CSS

Posted · Category: License Free, Popup

We have seen lots of Javascript Lightbox plugins. It is good to see someone who has created a valid markup Lightbox purely with XHTML and CSS for us.

ThinkVitamin has published a detailed tutorial of How to Create a Valid Non-Javascript Lightbox. Please note that this article assumes you have a basic understanding of (X)HTML and CSS.

CSS Lightbox

Requirements: FF, Safari, Chrome, IE6, IE7 and IE8
Demo: http://www.growldesign.co.uk/projects/lb/
License: License Free

9 Comments
  • Rich

    Spelling Mistake I think.

    How to Creare a Non-Javascript Lightbox with CSS

    should be

    Create not Creare?

    If I’m wrong or you fix it you can just delete my comment!

  • Lorenzo

    @Rich: in italian “Creare” means “to Create” ;)

  • http://fedmich.com/life fedmich

    yep, wrong spelling.
    and if you change the permalinks too, you should also redirect that as google might have index this page already.

    nice concept on the css though I’ll stick with the javascript because of its interactions like next/back etc.

  • http://www.crearedesign.co.uk/ rory

    RICH it should always be CREARE! thanks a joke as I work for http://www.creare.co.uk check it out ha ha…..anyway

    Great article didn’t realise you could do a lightbox with purely CSS and XHTML I’ll give it a go see if its any quicker than an average lightbox plugin. Thanks for sharing

  • Pingback: Comment créer des « Lightbox » sans javascript ? « Tout simplement…

  • Bob

    When you scroll it messes the light box up.

  • Pingback: Gözde Berberoğlu » Günün Derlemeleri / 28 Eylül 2009

  • Alina9914

    This is still a test product as we can make them but they do take ages to make and you will need to allow one month for delivery as we are still learning the quickest method of production.Stainless steel was invented early in the 20th century when it was discovered that a certain amount of the cheap letters metal chromium (usually a minimum of 11 per cent) added to ordinary steel gave it a bright shiny gloss and made it highly resistant to tarnishing and rusting.

  • http://www.talkezy.com/ Mark against Bullying

    How do you get it where if you scroll or previent scrolling when the light box is active?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons