Pure CSS Perspective Portfolio

[joshuanhibbert]

G’day guys.

I have been working away at a concept and have finally got it to a stage where I need some outside input. It uses no images other than the photos.

Here is the link: http://jsfiddle.net/sl1dr/7PKvm/show/ (will only work in a webkit browser).

I would love some feedback on the usability and any advice in regards to improving the code.

I’m not too worried about the way it degrades currently, I will most likely use Modernizr to solve that if I end up using it.

If you want to view the source: http://jsfiddle.net/sl1dr/7PKvm

Thanks in advance!

[BoringCode]

Honestly it is awesome, but only in WebKit. Even in a somewhat equal browser such as Firefox it does not degrade very well.

[joshuanhibbert]

@BoringCode Thanks! Yeah it degrades terribly, but I can solve that if I do decide to use it. I guess I’m not sure if it’s intuitive enough?

[djpic]

Nice.

[BoringCode]

@joshuanhibbert I think it is intuitive enough, when I first visited it I didn’t know what to do and I could figure it out.

[joshuanhibbert]

@boringCode Awesome, thanks!

[joshuanhibbert]

@cnwtx Yeah that’s an issue with the positioning. I’m still figuring it out!

[clokey2k]

.gallery figure:hover {

-webkit-transform: translate(0,-150px);

}

Translate seams to move the content of the element, but not the element – so doesn’t send the ‘clickable’ area sky high.

EDIT: Actually translate made no difference :( sorry.

And oh yeah, AWESOME!!!

[joshuanhibbert]

@clokey2k Brilliant advice! If I could hug you right now…

I made it work and it helps the degradation issue to no end.

Thanks a tonne!

[rjambler]

Very cool!!! I think it’s awesome.

[allatonce]

This will be sexy portfolio great job

[joshuanhibbert]

@rjambler @allatonce Thanks guys!

[sliver37]

The fact we can do this stuff with nothing but CSS still blows my mind.

I love it, If only Chrome’s anti-aliasing was working correctly, even basic transforms turn into a staircase, oh well it’s something that will be fixed eventually.

Overall nice work :)

[joshuanhibbert]

@sliver37 Thanks! Yeah it still blows my mind too.

[Author]

Posts