DEV Community

Cover image for 3 experiments with CSS paper effects
Suzanne Aitchison
Suzanne Aitchison

Posted on

3 experiments with CSS paper effects

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!

Top comments (44)

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.