digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

Awesome: Pure CSS Image Gallery

cssplay.co.uk — This is a pretty cool multi-page, cross-browser image gallery made completely in css. Check it out!

Bury
show profanity settings
expand all
  • ThePhilomath, on 10/12/2007, -1/+6There's another example of this here: http://www.mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/

    This time with javascript to display the final image; although, I think that it is degradeable.
    • BluParadox, on 10/12/2007, -14/+2Ooops didnt mean to post here...
  • dshPls, on 10/12/2007, -58/+7This could have been done alot smoother and better in flash.
    • jord, on 10/12/2007, -3/+14flash is a little to "heavy" for a simple gallery... thats the point of all this..
    • berean, on 10/12/2007, -51/+7Yeah, but CSS elitists wouldn't like it then. It's Digg.com. CSS?!@?!#!!! ZOMGZ TEH ROXROZ!!!!
    • sembetu, on 10/12/2007, -20/+19hey idiot, try knowing something about web design before you go making the web all screwy with flash splash pages...

      damn, anytime you can achieve something this elegant in pure CSS and XHTML and have it validate, you offer more content in more ways to more people, including the people who still use a 2.0 browser or a screen-reader.

      now shut up.
    • haooken, on 10/12/2007, -15/+4I completely agree with berean. Glad to see I'm not the only one thinking it.

      however, that is a nifty little widget. Quick and painless. I approve.
    • ryanknapper, on 10/12/2007, -10/+2sembetu: A 2.0 browser that supports CSS?
    • MyBotPiko, on 10/12/2007, -8/+52.0 browser with CSS support.... easy...

      Safari currently 2.0, Mozilla before changed to seamonkey 1.7, seamonkey 1.0, Firefox 1.5
      The only browsers has a version number higher than 2.0 is the obsolete browsers like netscape and internet explorer with one exception, Opera (yes I'm trolling a bit, just ignore it)
    • BluParadox, on 10/12/2007, -1/+2@ryanknapper: The idea is that you used semantic markup so it makes perfect sense even without any styling. Obviously it will look different though.

      That or he was refering to firefox 2.0, lol
    • kimc, on 10/12/2007, -5/+4"hey idiot, try knowing something about web design before you go making the web all screwy with flash splash pages..."

      Actually, I think you'll reach a broader audience with a Flash-app than with CSS. Using Flash 4/5 supported scripting I think you'll reach something like 99.9 % of all users.

      And I don't think you'll find the ones with screen readers among your audience if you have an image gallery... lol
  • collintheweak, on 10/12/2007, -5/+3This is nice but it's missing the functionality of Lightbox.
  • jord, on 10/12/2007, -5/+8looks kinda wonky in IE
    • berean, on 10/12/2007, -38/+3No, that's just the site. It's wonkified. Who cares that it's in pure CSS when it's so effing annoying to have to look at? I hate it.

      All you CSS nazis can go have a CSS-gasm somewhere else, please.
    • ManInTheBunker, on 10/12/2007, -1/+3hey berean: Its not to convice people to use CSS and only CSS, its to show off a proof of concept. You know you can choose to not click on CSS articles right??

      I think your Mom's calling you anyway...
  • speel, on 10/12/2007, -26/+6If I see another CSS article I think i'm going to hang my self.
  • tweakr, on 10/12/2007, -9/+2maybe it looks right in IE, and it's just IE looks wonky.
    • zybch, on 10/12/2007, -1/+2Looks very nice in FF. But then, pretty much everything does compared to what you see in IE :)
  • Bucky, on 10/12/2007, -4/+12Did anyone else read the description of this and think that there were actual images created via CSS? I expected something like that one page that validates your brower's ability to conform to Web standard by drawing a smiley face.
    • screaminmartin, on 10/12/2007, -4/+5I thought so too... so we're both idiots.
    • adizzle, on 10/12/2007, -0/+2I must admit, I am guilty as well...
  • illu45, on 10/12/2007, -1/+3Nice.... Very fast menus, although it is a bit annoying if you move your mouse over it accidentally and all of these thumbnails pop out. Still, very interesting stuff...

    P.S. Oh... anyone else notice that the "flower" pictures aren't actually pictures of flowers? :D
  • craigtheguru, on 10/12/2007, -0/+4Usually I don't digg this kinda stuff, but this time I'll digg due to its lack of JavaScript. Not that I'm a JS hater.
  • cadavreexquis, on 10/12/2007, -4/+1Very slick. I still love my PhotoStack though...
  • bigpeeler, on 10/12/2007, -0/+1I thoroughly enjoyed that. Very slick & intuitive. And yes Bucky, I too at first thought there were CSS created photos. ;-) Hey, now that would be something!
    • DocXango, on 10/12/2007, -3/+1I just hacked my wife's MySpace page and the results weren't pretty. When I posted the code in to MySpace, MySpace changed some parts of the tags. You could probably going and hack the code so it would semi sorta of work, but if you're on MySpace you probably can't.

      Hmmm, that should have appeard as a reply to the guy below...
  • akolozvary, on 10/12/2007, -4/+3Does anyone know if this works in MySpace. Would be nice to add something similar to this in my profile.
  • dudinatrix, on 10/12/2007, -1/+4So many CSS (&JS) image galleries lately! The lack of JS in this digg is awesome though!

    http://picsir.com css & js incrementing image gallery builder
    http://picsir.com/gallery.php?url=http://www.picsir.com/demo/picsir_sample_01.jpg demo
  • gambl0r, on 10/12/2007, -5/+2Description misleading. There was (x)html involved in that too, was not JUST css. ;)

    Seriously though, why digg this stuff? It's not like he is using any new techniques...
    • dudinatrix, on 10/12/2007, -1/+2I've seen much worse stuff get many more diggs :) New or not, it's a good effort and fun to play with.
  • DigitalDud, on 10/12/2007, -0/+1It's interesting that the IE7 beta displays a lot of the "Mozilla only" stuff on that site.
    • nthitz, on 10/12/2007, -1/+1The site doesn't seem to work for me in IE7.
    • DigitalDud, on 10/12/2007, -0/+2Well, I'm using the March 20th release maybe you have the older one? It had a lot of rendering bugs.
  • datagod, on 10/12/2007, -1/+5It sure looks pretty and everything, but when I want to views photgraphs the last thing I want is a stupid mouse pointer hovering over some chicks face. I got annoyed after about 8 seconds. Is there any way to make the cursor fade away, as the picture comes into view?

  • garraeth, on 10/12/2007, -1/+5A 100% CSS gallery. Now that I have seen this, my life is complete.
  • burnt1ce85, on 10/12/2007, -2/+2I have a question.. not that i am belittling the story but what are the advantages of just using CSS and no javascript? yes i am a noob but everybody has to start somewhere.
    • jutendouji, on 10/12/2007, -1/+5I believe that CSS is lighter than JS, and it's a lot more powerful in many ways. And basically all browsers support CSS correctly so it's a better alternative than JS sometimes.
    • kyrre, on 10/12/2007, -1/+1@jutendouji: That would be wrong. Basically no browser support CSS correctly. However CSS could be considered lightweight than Javascript, and CSS will support "fallback" for browser not supporting CSS (or Javascript). Examples could be old hardware, loonies on Netscape 3, many cell phones, and the really important one: Search engines. The layout on that site absolutely makes sense even for browsers with no CSS support. If you have Firefox or equivalent you can see for yourself. Open the menu view -> page style -> no style.

  • Shinglor, on 10/12/2007, -0/+4Nice use of CSS certainly but it's not really that amazing. I don't understand why there are unordered lists with a single element, I would have put each image in it's own list item. What's with the blank title attributes?
  • jon3k, on 10/12/2007, -3/+2How in god's name does it work? I'm not willing to try and dig through all that CSS.

    I just can't figure out how you can trigger a hover event without JS?
    • jon3k, on 10/12/2007, -4/+3Ok, nevermind, I'm an idiot. Apparently there is an item:hover thats available. Wow, I'm totally unimpressed now :)
    • DocXango, on 10/12/2007, -1/+3A:Hover{} for one, whenever you mouse over a link, it will trigger the CSS.

      -digg for you, dig through all the CSS.
  • lostboytexas, on 10/12/2007, -3/+4Anyone else feel violated by the 'copyright' section? I feel like telling him to shove his CSS up his ASS and get a real job. Typical Brit.
    • economissed, on 10/12/2007, -1/+4I'm curious how much he paid the suckerfish and lightbox folks.
    • arizonagroove, on 10/12/2007, -1/+4Typical stupid yank comment.

      Hey, if you can make a dumb all encompassing statement about an entire nation then so can I.


      (Just to be very clear, I'm not saying all American's are stupid or trying to start a pointless US v UK flame war. I'm just making a point.)
  • odysseus, on 10/12/2007, -1/+1Maybe it's my slow computer, but I have to hover over the thumbnail for 2-3 seconds before it's clickable into a 640x480 image. Otherwise, clicking the thumbnail does nothing. (using all 3 browsers)
    • arizonagroove, on 10/12/2007, -0/+1"(using all 3 browsers)"

      I think you mean 'all 3 browsers I have installed on my computer'. There are more than 3 browsers in the world you know.
  • markos, on 10/12/2007, -0/+3Dugg, but I don't need you to tell me it's awesome.
  • MasterDwarf, on 10/12/2007, -0/+3no java script? Nice.
  • aThing, on 10/12/2007, -1/+2Breaking news: It is literally impossible to make a page just with CSS!
  • arizonagroove, on 10/12/2007, -0/+2Nifty, but not awsome. You have to click the back button after viewing the large version of any image, for me that quickly gets irritating. It also looks a bit inelegant because everytime you click on an image you get taken away from the styled page to one which just contains the image.
    I much prefer being able to see the thumbs along side the large version of the image. I dont have to keep clicking back all the time.
  • Zippo, on 10/12/2007, -0/+2Wow, that's impressively sexy.
  • Marshy, on 10/12/2007, -0/+1i thought this was like my idea of converting images to pure css with lots of absolute divs with php.

    but only i would do that
  • vstarre, on 10/12/2007, -2/+1Another CSS page taylored to one specific text size, one specific resolution, and one specific content size! Awesome!! CSS IS SUCH A GREAT LAYOUT TOOL!!!
  • Hacktivist, on 10/12/2007, -0/+2Isn't this the same as that suckerfish-lighbtbox hover thing with just the js removed?
  • lostboytexas, on 10/12/2007, -0/+2right, he ripped someones elses idea, amde a few changes and wants donation for all his 'hard work'. *****
    • prence, on 10/12/2007, -0/+2Agreed, just what the Internet needs huh? Another bastard content thief.
  • runningnick, on 10/12/2007, -0/+0Really impressive, and neat use of CSS! But: now resize your browser's window to 800 x 600, and try to scroll down without using the scroll wheel on your mouse (ie, try to use the scroll bar).

    You think all Web surfers are going to know when to press the down arrow key?

    At least with JavaScript, you could set some sort of timer.
    • 2L84ME, on 10/12/2007, -0/+0Good point, I don't even have a mouse (I use a touchpad on a laptop); I rely on the scroll bars.
  • meowcow, on 10/12/2007, -0/+1it seems to use alot of memory too. My memory on my box skyrockets
  • noseeme, on 10/12/2007, -1/+1There are a lot of articles on digg about AJAX and CSS, but this is really cool.
  • Tripcast, on 10/12/2007, -0/+2Nice to see something like this done simply in CSS. It's not going to work for every situation, but it's another option available from the myriad of galleries out there
  • ecb29, on 10/12/2007, -0/+1I'd just like to point out that the IMAGES are not CSS. If you want your images in CSS too, check out my nifty and useless waste of time converter: http://elliottback.com/wp/archives/2005/04/25/convert-image-to-css/
  • Powerdrift, on 10/12/2007, -0/+1This is actually quite simple to do.
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.