DEV Community

Cover image for 3 experiments with CSS paper effects

3 experiments with CSS paper effects

Suzanne Aitchison on January 08, 2021

Over the last few days I've been playing around with a few paper-inspired CSS effects in CodePen, and thought I'd share! Experiment 1: F...
Collapse
 
waylonwalker profile image
Waylon Walker

Those folds are fantastic!

Collapse
 
s_aitchison profile image
Suzanne Aitchison

thank you so much!

Collapse
 
thomasbnt profile image
Thomas Bnt

Beautiful! ☕

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Thanks! 😊

Collapse
 
eaich profile image
Eddie

Incredible work! Can I use this for my website?

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Sure! If you want to do a straight copy paste, it'd be cool if you could maybe credit me in a wee code comment, but otherwise just have fun adjusting it and making it your own 😊

Collapse
 
eaich profile image
Eddie

Nice thanks and will do on the code attribution.

Collapse
 
rhyed profile image
Mariano Maison

Awesome!

Collapse
 
jcarsan profile image
Júlio Santos

It's amazing. Good job.

Collapse
 
jnareb profile image
Jakub Narębski

The "contact me" design looks nice... but unfortunately the addresses are highly unreadable.

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Yes, I agree. Even at larger font sizes, rotating the text like that isn't very readable. Definitely more of an experiment than something immediately usable on a site 👍

Collapse
 
hkly profile image
hkly

These are great! I love the folded and taped effect!

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Thanks! Now I need to work out how to make it look like the paper's torn or crumpled or something 🤔

Collapse
 
evelarson profile image
Natalia Chernysheva

Love the paper notes!!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
s_aitchison profile image
Suzanne Aitchison

Woooah! Very small world! Nice to see you here 😁

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Oh nice! Love the post-its!

Collapse
 
hassan_k_a profile image
.

wonderful look, thanks a lot.

Collapse
 
bglamadrid profile image
Benjamin La Madrid

sweet!

Collapse
 
jasmin profile image
Jasmin Virdi

This looks so amazing!❤️

Collapse
 
mycodemagic profile image
My Code Magic

Really I love 1 paper effect

Collapse
 
mohammedfarrag profile image
Mohammed-Farrag

I like it

Collapse
 
galelmalah profile image
Gal Elmalah

Really cool stuff!

Collapse
 
nickytonline profile image
Nick Taylor

These look amazing! Nice work. 🔥

Collapse
 
realtoughcandy profile image
RealToughCandy.io

The folded paper with taped edges is my favorite.

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Thank you! Yeah I think it's my favourite too 😊

Collapse
 
alvaromontoro profile image
Alvaro Montoro

These demos look great. And the last one is a really cool idea.

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Thank you! I might keep noodling on the last one - I think there's something in it... maybe... but it's not quite there yet!

Collapse
 
akobey profile image
Aydın küçükoğlu

Thank you

Collapse
 
phongduong profile image
Phong Duong

Very beautiful 👏

Collapse
 
designeranna1 profile image
Designer Anna

Nice CSS tricks. 👏🏼👏🏼👏🏼

Collapse
 
anjil profile image
Anjil bishowkarma

nice work,

Collapse
 
singhnikhurpa profile image
Bhupesh Singh Nikhurpa

"Folded paper with taped edges" is the show stopper for me.

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Thanks so much! It was fun to make 😊

Collapse
 
hosseinazimy profile image
حسین عظیمی بیرجندی

It was great. You are the best

Collapse
 
pfc profile image
Pfc

Wow! Nice work

Collapse
 
allisonlu profile image
allisonlu

So cool! Thanks for sharing.

Collapse
 
blakecodez profile image
blakewood84

This is good stuff! Impressed with your skills

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Maybe we can tempt you over to the front end haha 😈

Collapse
 
makitsu profile image
Lhoutre

Impressive work ! I'm inspired now 😊

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Yay! Glad to provide some inspiration 😁

Collapse
 
chriscooper01 profile image
Chris Cooper

That looks so good

Collapse
 
katymoon profile image
Katy

These are so cool. Using the sellotape one for a school website I am building. Thank you!