Scale

1 Attachment

25 Responses

  1. Pro Trent Walton Trent Walton

    Sometimes CSS can be quicker than photoshop.

    likes

    about 2 years ago

  2. Mattia Forza Mattia Forza

    CSS3's transforms and web-fonts? Nice effect Trent, congrats!

    about 2 years ago

  3. simurai simurai

    Ohh.. Please, add a harmonica animation, you know, where the paper unfolds kinda like a map.

    likes

    about 2 years ago

  4. Brandon Wilson Brandon Wilson

    Awesome! Reminds me of that Goodwill store on Airport in Austin.

    about 2 years ago

  5. Rodrigo Maia Rodrigo Maia

    No way this is CSS. Damn nice work.

    likes

    about 2 years ago

  6. Anthony Calzadilla Anthony Calzadilla

    NICE! How'd you get the darker colors on the shaded sections? Different bg images or rgba()?

    about 2 years ago

  7. Sophie Shepherd Sophie Shepherd

    Very excited to see this live!

    about 2 years ago

  8. Pro Anthony Lane Anthony Lane

    Beaut.

    about 2 years ago

  9. Pro Louie Mantia Louie Mantia

    @simurai You mean "accordion"?

    likes

    about 2 years ago

  10. Kyle Steed Kyle Steed

    I'm gonna go ahead and presume that says "KABLAMO SCALE"

    likes

    about 2 years ago

  11. Pro Trent Walton Trent Walton

    @Anthony Calzadilla: Thanks! Flat #hex colors for each red, but they each have the beige flecks as a bg image. I hope to publish this tomorrow—feel free to pick it to pieces then :)

    @simurai The use here will be a little more modest... though that sounds like a job for you anyhoo :)

    about 2 years ago

  12. Jamie Marciano Jamie Marciano

    Giganews! :P

    about 2 years ago

  13. Pro Joshua Sortino Joshua Sortino

    You're a freaking CSS genius. This is brilliant.

    about 2 years ago

  14. Pro Robin Kylander Robin Kylander

    Very excited and agree with Joshua!

    about 2 years ago

  15. Pro Romain Diguet Romain Diguet

    waow

    about 2 years ago

  16. simurai simurai

    @Louie Ahh.. my English sucks.. yes, of course.. "accordion".

    likes

    about 2 years ago

  17. Scott Cranfill Scott Cranfill

    Leaving a comment so I'll see updates in my Incoming Activity feed :)

    I'm very curious to find out how you skewed the text like that.

    about 2 years ago

  18. Pro Joe Barrett Joe Barrett

    @Scott, when using the transforms you can set a -transform-origin: x,y; property. Something like this text could conceivably be done by using -transform-origin: left center; and then -transform: skewY( +/- 15deg ); to go up and down.

    Plus it's more accurate and less painful than dealing with creating it in photochop.

    likes

    about 2 years ago

  19. Pro Trent Walton Trent Walton

    I added a file/screenshot of my code. Live results in just a few...

    about 2 years ago

  20. about 2 years ago

  21. Scott Cranfill Scott Cranfill

    Oh wow, I had no idea there was a skew transform. That's excellent, thanks Joe!

    And, great work, Trent!

    about 2 years ago

  22. Pro Joel Glovier Joel Glovier

    Dude this is gorgeous...and kudos on the CSS implementation!

    about 2 years ago

  23. Pro Alex Sheldon Alex Sheldon

    My mind is blown!

    about 2 years ago

  24. Chey Russell Chey Russell

    impressive!

    almost 2 years ago

  25. Pro Mani Mani

    fabulous @Trent Walton

    11 months ago

keyboard shortcuts: previous shot next shot L or F like