Much like the folded paper, it relies primarily on linear, and this time radial, gradients to make it look a bit more 'life like'.Įxperiment 3: "Contact me" tear-off paper 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!). The fun part of this - of course - was the pin. Sticking with the 'pop it on your noticeboard' theme, it just has a simple reminder about a zoom call on the card itself. I then wanted to play about with some less crumpled paper, and had a go at a pinned card. 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. 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. 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 □). Over the last few days I've been playing around with a few paper-inspired CSS effects in CodePen, and thought I'd share!Įxperiment 1: Folded paper with taped edges
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |