DEV Community

loading...
Cover image for 3 experiments with CSS paper effects

3 experiments with CSS paper effects

s_aitchison profile image Suzanne Aitchison (she/her) ・2 min read

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: Folded paper with taped edges

Inspired by new year's resolutions (and my lack of them), for this experiment I had a play about with a folded paper effect, and transparent layers to look like sellotape (or whatever brand of tape is popular in your country 😂).

The folded paper effect is created with an ::after pseudo element (I used ::after instead of ::before to make sure the text looked like it had been folded in the paper too), with two layered linear-gradients - one running left to right, and another top to bottom.

The tape itself has opacity set to 0.5 to give the semi-transparent effect, and I added a small dotted border on the tape ends to make it look a little serrated like it'd been cut.

Experiment 2: Pinned card

I then wanted to play about with some less crumpled paper, and had a go at a pinned card. Sticking with the 'pop it on your noticeboard' theme, it just has a simple reminder about a zoom call on the card itself.

The fun part of this - of course - was the pin. I love a bit of CSS art 😄. The different components of the pin are commented in the code so you can see how I went about it (much like all these experiments, the CSS could very usefully be tidied up in future, but hopefully you'll get the idea!). Much like the folded paper, it relies primarily on linear, and this time radial, gradients to make it look a bit more 'life like'.

Experiment 3: "Contact me" tear-off paper

Remember in the old days when you'd see adverts on noticeboards/lamp-posts/wherever with little phone number slips you could rip off and take home? I thought it might be fun to try to make one in CSS as an alternative "contact" section.

I wanted to try and make this semantic and accessible, so the contact links are all marked up as list items (this makes sure they're announced as a list to screen reader users, and show as a nice vanilla list if the CSS fails to load). I've also made heavy use of rem units, as a slightly hacky way of making sure that if a user has a larger font-size set on their browser, the content scales up without affecting the "CSS art" of it 🙂

I've tried to make some of the paper slips stick out a bit more, as if they'd been folded out from the poster slightly. To do this I used skew and - yet again - some linear gradients. It would be cool to make this interactive at some point, to let a user "tear" an item off of the list. Maybe a future experiment!

Discussion (43)

pic
Editor guide
Collapse
waylonwalker profile image
Waylon Walker

Those folds are fantastic!

Collapse
s_aitchison profile image
Collapse
thomasbnt profile image
Thomas Bnt

Beautiful! ☕

Collapse
s_aitchison profile image
Collapse
eaich profile image
Eddie

Incredible work! Can I use this for my website?

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

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
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 (she/her) Author

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 (she/her) Author

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

Collapse
jcarsan profile image
Júlio Santos

It's amazing. Good job.

Collapse
jasmin profile image
Jasmin Virdi

This looks so amazing!❤️

Collapse
mycodemagic profile image
MyCodeMagic

Really I love 1 paper effect

Collapse
rhyed profile image
Mariano Maison

Awesome!

Collapse
mohammedfarrag profile image
Mohammed-Farrag

I like it

Collapse
galelmalah profile image
Gal Elmalah

Really cool stuff!

Collapse
nickytonline profile image
Nick Taylor (he/him)

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 (she/her) Author

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 (she/her) Author

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
Collapse
phongduong profile image
Phong Duong

Very beautiful 👏

Collapse
myrtle profile image
Mrtl

love them! the taped ones are 5☆
check out my post-its :)))
codepen.io/mrtly/full/vYOWBPg

Collapse
myrtle profile image
Mrtl

good lord, I just noticed Edinburgh and your name!
such a tiny world, we worked at the college around the same time :)))

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

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

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Oh nice! Love the post-its!

Collapse
designeranna1 profile image
Designer Anna

Nice CSS tricks. 👏🏼👏🏼👏🏼

Collapse
anjil0000 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 (she/her) Author

Thanks so much! It was fun to make 😊

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

It was great. You are the best

Collapse
hassan_k_a profile image
.

wonderful look, thanks a lot.

Collapse
pjotre86 profile image
pjotre86

I'm absolutely not into front end stuff. But I have to admit that I like this a lot!

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

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

Collapse
bglamadrid profile image
Collapse
allisonlu profile image
allisonlu

So cool! Thanks for sharing.

Collapse
felipepinheirodev profile image
Felipe Pinheiro Correia

Wow! Nice work

Collapse
blakecodez profile image
blakewood84

This is good stuff! Impressed with your skills

Collapse
makitsu profile image
Lhoutre

Impressive work ! I'm inspired now 😊

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her) Author

Yay! Glad to provide some inspiration 😁

Collapse
chriscooper01 profile image
Chris Cooper

That looks so good