Grow your CSS skills. Land your dream job.

Pure CSS Perspective Portfolio

  • # September 11, 2011 at 5:43 am

    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!

    # September 11, 2011 at 9:04 am

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

    # September 11, 2011 at 9:10 am

    @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?

    # September 11, 2011 at 9:11 am

    Nice.

    # September 11, 2011 at 9:34 am

    @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.

    # September 11, 2011 at 9:49 am

    @boringCode Awesome, thanks!

    # September 11, 2011 at 2:00 pm

    Very cool. I’ve noticed if you hover on say, the deer, then move you mouse up to the image above nothing happens. Also if you hover right below your last name, the picture above kinda goes crazy.
    Overall it’s very good!

    # September 11, 2011 at 6:39 pm

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

    # September 14, 2011 at 8:38 am
    .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!!!

    # September 14, 2011 at 9:29 am

    @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!

    # September 14, 2011 at 5:12 pm

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

    # September 14, 2011 at 5:47 pm

    This will be sexy portfolio great job

    # September 14, 2011 at 5:56 pm

    @rjambler @allatonce Thanks guys!

    # September 15, 2011 at 4:14 am

    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 :)

    # September 15, 2011 at 7:35 am

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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".