@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 :)
@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.
25 Responses
Pro
Trent Walton
Sometimes CSS can be quicker than photoshop.
about 2 years ago
CSS3's transforms and web-fonts? Nice effect Trent, congrats!
about 2 years ago
Ohh.. Please, add a harmonica animation, you know, where the paper unfolds kinda like a map.
about 2 years ago
Awesome! Reminds me of that Goodwill store on Airport in Austin.
about 2 years ago
No way this is CSS. Damn nice work.
about 2 years ago
NICE! How'd you get the darker colors on the shaded sections? Different bg images or rgba()?
about 2 years ago
Very excited to see this live!
about 2 years ago
Pro
Anthony Lane
Beaut.
about 2 years ago
Pro
Louie Mantia
@simurai You mean "accordion"?
about 2 years ago
I'm gonna go ahead and presume that says "KABLAMO SCALE"
about 2 years ago
Pro
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
Giganews! :P
about 2 years ago
Pro
Joshua Sortino
You're a freaking CSS genius. This is brilliant.
about 2 years ago
Pro
Robin Kylander
Very excited and agree with Joshua!
about 2 years ago
Pro
Romain Diguet
waow
about 2 years ago
@Louie Ahh.. my English sucks.. yes, of course.. "accordion".
about 2 years ago
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
Pro
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.
about 2 years ago
Pro
Trent Walton
I added a file/screenshot of my code. Live results in just a few...
about 2 years ago
Rebound
Gone Responsive
by Trent Walton
My blog is now responsive and it makes me smile.
about 2 years ago
Oh wow, I had no idea there was a skew transform. That's excellent, thanks Joe!
And, great work, Trent!
about 2 years ago
Pro
Joel Glovier
Dude this is gorgeous...and kudos on the CSS implementation!
about 2 years ago
Pro
Alex Sheldon
My mind is blown!
about 2 years ago
impressive!
almost 2 years ago
Pro
Mani
fabulous @Trent Walton
11 months ago