Thursday, November 26th, 2009

If That Is An Awesome CSS3 Gallery, How Would You Call Mine?

Category: CSS, Examples

>Tutorialzine is a nice blog but I think sometimes it should should re-dimension chosen titles.
I have discovered only yesterday and thanks to my good old favorite Web related italian blog, a nice (or if you prefer another) jQuery lightbox style experiment.

The post is complete with examples and explanation over PHP, CSS, jQuery, and finally jQuery UI.
So what is the problem? The title: An Awesome CSS3 Lightbox Gallery With jQuery

At the end of the day, the total size of the demo is massive, compared with what it offers, plus the only piece of CSS3 in the stylesheet is a box-shadow and a rotation via -webkit-transform.

Is That It?

If we can define awesome a basic usage of CSS3 requiring both jQuery and jQuery UI to create a Gallery, included a server side language, how can we define my latest experiment realized in half an hour and without using JavaScript, PHP, or whatever programming language at all?

The answer is simple: CSS3 and we can read how I did it via the not-minified and hopefully well commented css file.
OK, agreed my page is dynamically fake and a proof of concept, but honestly, which title would consider appropriate for above example?
Thanks in any case to Tutorialzine for the interesting step by step explanation and to let me try above experiment which works with latest WebKit, Chrome, Safari, and somehow with Firefox, I’ve not tried the nightly, and Opera as well but in latter cases without transitions.

P.S. for those with poor computation performances like me, here there is a fluid concept variation ;-)

Posted by webreflection at 6:00 am
27 Comments

++---
2.1 rating from 126 votes

27 Comments »

Comments feed TrackBack URI

I’d say neither are ‘awesome’, purely because they are both a pain to use.

Comment by kissmyawesome — November 26, 2009

What’s the point of this article ?

Comment by ywg — November 26, 2009

Well, at least the gallery on Tutorialzine lets one zoom the middle images easier. Try to zoom the car photo in the second gallery. It’s like finding the path in a little maze :)

Comment by igstan — November 26, 2009

how can we define my latest experiment realized in half an hour and without using JavaScript, PHP, or whatever programming language at all?

Innovative yet unintuitive.

Comment by Darkimmortal — November 26, 2009

http://people.mozilla.com/~vladimir/demos/photos.svg

Comment by grayrest — November 26, 2009

The pure CSS demo is both impressive and unusable (aiming at the car picture is difficult with just a few pictures on screen) but it’s both a demo and a proof of concept so that must be excused. Add some JS to it and it will be so much better than the lightbox experiment.

@grayrest: it’s a very cool demo but I keep preferring HTML/CSS to SVG for the same reasons I prefer HTML/CSS/JS over Flash. It’s a matter of live contents vs dead contents you can’t do anything with.

Comment by pmontrasio — November 26, 2009

@ywg the point of the article is to show you, as proof of concept, a full CSS 3 driven gallery without using any programming language, informing you at the same time about another more complete and good article (except the wrong title) used as inspiration for my test.
If there was already a full CSS 3 based gallery similar to the one I have created specifically for this post, please share, or ask me more which part of the commented CSS file is not clear, cheers.

Comment by webreflection — November 26, 2009

@pmontrasio: what is dead about SVG? It’s just part of the DOM structure, like everything else (even in IE, if you use the svgweb library).

Comment by Joeri — November 26, 2009

Pointless use of CSS, yay. Awesome, not so much. This doesn’t scale without javascript.

Comment by Jadet — November 26, 2009

People, it is a demo. Never mind it being unusable, be impressed with what you can do with pure CSS. Well done :-)

@pmontrasio: Have you actually _seen_ the SVG demo? It’s an interactive demo that let’s you translate, scale and rotate the photos in a similar way as the demo from the article. Nothing ‘dead’ about it.

Comment by MartijnHoutman — November 26, 2009

The code of the SVG demo illustrates my point. It’s just a svg element with a piece of javascript in it. It’s much like any flash movie. There are plenty of flash photo galleries movies that basically lock down the content and that SVG demo is much the same.

At least SVG has a couple of advantages over flash: we can read the code, we can access some of the content even if in some inconvenient ways. But it shares many of the disadvantages: bad accessibility, bad SEO, substantial content lock down, bad maintainability.

HTML+CSS are much better IMHO. If you look at the code of the CSS demo you’ll see only plain old HTML that anybody can read and create. That said, there will be plenty of applications where SVG is perfectly appropriate and I’ll recommend it over using flash or similar technologies. We (web developers and designers) should just not overuse it.

Comment by pmontrasio — November 26, 2009

@pmontrasio – what is this code-lockdown you keep mentioning? Can you not interact with SVG using javascript as you can do with canvas? Is SVG close-sourced? Pre-compiled? Stop talking bollocks! :P

Comment by sixtyseconds — November 26, 2009

Redundancy, unnecessary specificity, poor prepositional usage, over-eager capitalization—this article is screaming for an editor.

Ex.
“sometimes it should should re-dimension”
“complete with examples and explanation over PHP…”
“Tutorialzine is a nice blog but ”
“thanks to my good old favorite Web related italian blog, ”
“the only piece of CSS3 in the stylesheet ”
“If we can define awesome a basic usage”
“OK, agreed my page is dynamically fake ”
“and to let me try above experiment”

Not to mention the embellished modesty, and subtle egotism as you push your own code as some enlightened experiment in response to the (admittedly) awful contrasting tutorial.

Congrats on finishing your latest “experiment” in “half an hour”. Please don’t bore us with any more.

Comment by jlukic — November 26, 2009

i must say we are not impressed with the facet of the articles’ description as being awesome for us.

i must say too we are impressed – NOT – by the himself important aurthor’s code.

Comment by thnkfstr — November 26, 2009

@sixtyseconds: well, try building an application that HTTP GETs the URL of that svg demo and does anything with the data in it. That’s the problem: that page is a program, not data. All the content is built programmatically and that’s ok only because it’s a demo. For a real application I’d use img tags for the pictures and css and javascript to rotate and zoom the images, not svg. Then anybody could GET the page and use selectors to parse it and use its contents in another webapp.

Comment by pmontrasio — November 26, 2009

This is a great ‘use the right tool for the job’ story. In this case, the right tools are svg and js.

Comment by okonomiyaki3000 — November 26, 2009

@pmontrasio: No they couldn’t. Whether you’re loading html or svg, if it’s coming from a different domain, it’s dead to you. In the W3C model, SVG and HTML are simply two forms of content part of the same DOM tree, but with different rules for markup. Technically you may be right that at this moment it is more difficult to work with SVG, but in the end it’s all going to end up being the same thing. Unlike flash, which is always going to remain a proprietary blob because it’s forced into a box by the use of a plugin (if browsers could implement flash natively, they could DOM-ify it, and then we would have the same advantages there).

Comment by Joeri — November 27, 2009

At the end of the day, the total size of the demo is massive, compared with what it offers, plus the only piece of CSS3 in the stylesheet is a box-shadow and a rotation via -webkit-transform.
It’s very unuseful to compare these two examples. The first one is really more complete and does a lot more stuff.

If we can define awesome a basic usage of CSS3 requiring both jQuery and jQuery UI to create a Gallery, included a server side language, how can we define my latest experiment realized in half an hour and without using JavaScript, PHP, or whatever programming language at all?
I don’t how to define your last experiment but, for the same reason I already explained, we can define you at least arrogant.

Comment by agiardina — November 27, 2009

get this arrogant asshat webreflection off ajaxian. period. absolutely no value added to this blog.

Comment by thnkfstr — November 27, 2009

@agiardina Absolutely agree

Comment by jeromew — November 27, 2009

I guess this post is too much WebReflection style, rather than Ajaxian one, got it!

In WebRefection the nit’n'pick style is by default, I guess the reason I have definitively less followers but that is my space and I agree here things should be different as the target is as well.

Arrogant is, in my opinion, such empathized title chose for a post which aim is to explain how to create a gallery via PHP, CSS, jQuery and jQuery UI.
That title in any case has been simply the pretest to create an experiment, the one I have showed here and wrote for this blog and its readers, the one “born” because of that title first, and Ajaxian after.

My post used the same “strategy”: an overloaded title to introduce a proof of concept about CSS 3 plus the original post, which is still a truly good one and that is why there is a link here, to share that post, criticizing, again, just one thing: its title!

Moreover, my goal has somehow been reached: my title captured more readers and comments than usual and this post criticized, since it does not provide content able to justify its title.

The showed proof of concept is not a real case scenario, it is an experiment, and it cannot be defined a CSS3 Gallery since, as is, is almost useless as most of you already figured out.

Apparently only few devs got the meaning of this post but I would like to thank everybody here or via twitter for both good and bad comments because this is the active Web 2.0 I love.

get this arrogant asshat webreflection off ajaxian. period. absolutely no value added to this blog.
This comment, plus the “Scream for an Editor” one, let me think my English knowledge is still superficial and I am not able to write well formed or provocative posts in the way I mean them, since everything, as example and in this case, has been partially misunderstood.

As summary, if this is what Ajaxian readers want I don’t want to disappoint their expectations ’cause we are here for you and still for you we write, comment, and share posts, code, or analysis.

I will talk about this with Ben and Dion but if this is my last post here, I want to thank them for the opportunity, and every reader for every feedback I’ve had during these months.

Best Regards,
Andrea Giammarchi

Comment by webreflection — November 27, 2009

This comment, plus the “Scream for an Editor” one, let me think my English knowledge is still superficial and I am not able to write well formed or provocative posts in the way I mean them, since everything, as example and in this case, has been partially misunderstood.

I couldn’t agree more. I’ve no opinion on the content of your post because I’ve no idea what you were saying in most of it.

Comment by jonhartmann — November 27, 2009

I’m really annoyed by this post. To me, if I have to be clear, you example it’s absolutely interesting but – you have to admit or maybe realize – you wrote only to show other people how your code is clean and beaty and for “flaunting” your absolutely-opinionated skilness, disregarding an honest comparison of different approaches.
I have already read some of your posts, I don’t like either your pointless and arrogant criticism, maybe you should just start demonstrate respect to other people’s efforts.

Comment by leevin — November 28, 2009

@leevin few people respect my posts and you are not one of them, so how can you ask me to respect other people posts?
BTW, your feelings about this post are exactly the same I had reading the other one, due such title choice, and this is the reason I wrote this provocative misunderstood post.
I have twitted, and wrote here as well, the cited post, as its blog, is good, truly good, and I do appreciate the effort, I would not have posted it otherwise.
I hopefully brought more followers to Tutorialzine which is, at least for me, a new space to read interesting stuff.
I am sure as side effect they will be happy about this post, and I still respect their effort, as I always do, but the point is that it is not clear for readers, so I should definitively change posts style.
I’ll try eventually here and definitively in WebReflection as well, so thanks again for feed backs.
Finally, I would like to underline this post had not been edited, so if there is someone responsible for this post, that would be entirely me.
This is why I am ready to leave Ajaxian letting it be the best Web.Next blog I have ever read, as this is what we all expect, me included.
Regards

Comment by webreflection — November 28, 2009

Everyone makes mistakes, no one got hurt. Anyone who’s prepared to learn from their mistakes should be given a second chance. For me, I don’t see any reason why you should fall on your sword – how about everyone puts it down to how easy it is to pick up different nuances from a piece of writing, when you can’t see the other person’s body language and wry smiles?

Comment by jeromew — November 28, 2009

Just another me too. This post belongs on webreflection, not Ajaxian. If you want to show off do it on your own blog – this isn’t your private platform. Bleh.

Comment by eatworms — November 28, 2009

Andrea: Sei un genio. Questa stronzata e meno interessante che le vostre altre. Assomiglia a qualcosa fatto nella rapidita. Dai, usa un’ora e diaci l’oro! (Anche io chiedo perdono per il mio italiano)

Comment by nataxia — November 29, 2009

Leave a comment

You must be logged in to post a comment.