The 100% CSS Post-It® Note Who doesn’t love Post-it notes? After extensive CSS study I have come to realize that some things can be done with CSS alone. Here is how it is done. Annika Hey Design Principal Atanas Atanasov Software Development Manager – Agile Frameworks Björn Stansvik Founder & Chief Executive Officer Daniela Nazim MentorMate Alumni Dimitar Dobrev MentorMate Alumni Craig Knighton Chief Operating Officer Eleonora Georgieva Global VP, Delivery George Dormishev System Administration Manager Ivaylo Kostadinov Director, Software Engineering - .NET Jamie Bolseth MentorMate Alumni Jay Miller President Jeni Kyuchukova Director, Quality Engineering Jessica Anderson VP of Finance and Administration Liz Spolyar Global Director, Continuation Engineering Nick Curran Technical Architect Nikolay Lyubchev Global Director, Talent Acquisition, MentorMate Stefan Tsvyatkov Director, Software Engineering - Mobile Stefan Tzanev Chief Financial Officer Vesselin Dobrev General Manager (Bulgaria) Sylvia Vassileva Software Development Manager - Spok Filip Gajtanovski Software Development Manager - Storyworks Krasimir K. Nikolov VP of Technology Katherine Kelly Director of Operations (USA) Carrie Siewert Strategic Account Manager Brady Swanson Global Director, Marketing Eve Poeschl MentorMate Alumni Ryan Peña MentorMate Alumni Vassil Vassilev Software Development Manager - .NET Pavel Petrov Director, Software Engineering - LAMP&FE Ivan Peev Senior Technology Manager Bob Reuss MentorMate Alumni Vera Kasapova QA Manager Greta Yamacheva QA Manager Robert Samuelsson General Manager (Sweden) Kyle Simmons Solutions Architect Robin Thomas Solutions Architect Nataliya Naydenova MentorMate Alumni Adam Malone Alexander Dimitrov Enterprise Architect Andrea Kates CEO, LaunchPad Central Andrew Eklund CEO, Ciceron Andrew Marinov Angel Nikolov MentorMate Alumni Anurag Shukla Aron Wolde MentorMate Alumni Ashley Goodridge Office Assistant Benjamin Gramlich MentorMate Alumni Chris Black MentorMate Alumni Christa Haeg MentorMate Alumni Colin Lee MentorMate Alumni Deyan Stoynov MentorMate Alumni Dimitar Danailov MentorMate Alumni Dobrinka Tabakova Doug Leatherman Emily Genco MentorMate Alumni Fanka Vassileva Gabriela Zagarova MentorMate Alumni Gary Conkright CEO, physIQ Gary Fingerhut Executive Director, Cleveland Clinic Innovations Gavin Finden MentorMate Alumni Georgi Graham Klang Hyusein Hyuseinov Senior Automation QA Ian Good Global VP, Operations Iva Jack Cosentino James Williams John Byrne Kaloyan Stoilkov MentorMate Alumni Kosta Hristov Krasimir Gatev Senior Android Developer Lazar Petrakiev Lyubomir Dobrev Senior .NET Developer Lubomir Velkov Marin Yotovski Mark Smith MentorMate Alumni Martin Dimitrov MentorMate Alumni Martin Kalyonski Mike Hagan MentorMate Alumni Nikolay Andonov Nikolay Arhangelov Riley Panko Guest Contributor Roger Ferguson MentorMate Alumni Ryan Sysko Chairman, WellDoc Ryan Blake MentorMate Alumnus Sarah Rockholt MentorMate Alumni Sean McDevitt CEO, Sensei Siyana Slavova Stanislas Walden MentorMate Alumni Stanislav Atanasov Stanislava Bogdanova MentorMate Alumni Stefanie Trimble MentorMate Alumnus Stephen Fluin Stoyan Stoyanov MentorMate Alumnus Tessa Cacek Staffing Manager Tom Clemens MentorMate Alumnus V8 JavaScript Engine Viktor Mitev Yolanda Petkova Marketing Design Lead Pete Anderson Lead Product Owner, Target Vasil Nonchev Java Software Development Manager Dilyana Totseva QA Manager Stanimir Nikolov Software Development Lead - iOS, MentorMate Rosen Kolev Technology Principal Dimitar Mihaylov MentorMate Alumni Nikola Genov Software Architect - .NET Neli Todorova Software Development Manager - LAMP Yavor Dimitrov MentorMate Alumni Georgi Karanedyalkov Software Development Lead - Android, MentorMate Denislav Ganchev Technology Principal Stefan Shopov QA Manager Konstantin Rusev Java Developer Borislav Dimitrov Senior Android Developer, MentorMate Tsvetelina Lazarova MentorMate Alumni Dimitar Gadzhev Developer Plamen Stoev Software Development Manager - Front-end Jake Nelsen Senior Experience Designer Zlati Pehlivanov Senior Software Engineer II Kate Tolmie Senior Experience Designer Martin Angelov Director, Software Engineering - LAMP&FE, MentorMate Dimitar Zhelev Senior .NET Developer Joel Swenson Content Manager Kiril Ivanov Quality Assurance Analyst Viktor Hristoskov Software Development Lead - iOS, MentorMate Violeta Nikolcheva Database Developer Biliana Kadakevlieva Senior Quality Assurance Analyst Chris McLeod Senior Solutions Consultant Antonii Georgiev Junior .NET Developer Alexander Rusev Front-End Developer Matt Erickson MentorMate Alumni Brian Buchkosky Global Director, PMO David Tran MentorMate Alumni Kristin Krueger MentorMate Alumni Magdalena Chervenkova Business Analyst Denny Royal Chief Design Officer Joe Bodell MentorMate Alumni Viktoria Chuchumisheva HR Manager Kalina Tekelieva Senior Content Marketing Artist Daniel Rankov MentorMate Alumni Alexander Alexandrov BA Lead MentorMate Clint Rowles VP, Business Development Nikola Donev SysOps & DevOps Lead Tseko Tsolov Frontend Developer Denislav Lefterov Automation QA Analyst Dilyana Kodjamanova MentorMate Alumni Emma Jorstad Project Manager, Lead Georgi Georgiev Software Development Lead - LAMP, MentorMate Martin Panayotov Senior iOS Developer, MentorMate John Blake Senior Account Manager Tyler Compton Solutions Architect Nikola Peevski Software Developer — Lamp & Front-End Aaron Whitney Director of Client Strategy Veliko Ivanov Senior Cloud Engineer Suzanne O’Brien Senior Project Manager Svetlin Stanchev Software Development Lead - Front-end, MentorMate Todor Todorov Senior Cloud Engineer Kate Stamatova Senior QA Analyst Frank Anselmo Global Director, Project Management Gyuner Zeki Solutions Architect Galin Stanchev QA Analyst Sarah Hoops Business Development Manager Brenden Diehl Business Development Manager Anna Krivova Software Development Lead - Front-end, MentorMate Ivelina Kavalova Senior Business Analyst, MentorMate Paul Sanders MentorMate Alumni Jim Cikanek Senior Client Strategist Samuil Yanovski Software Development Manager - Android, MentorMate Krasimir Gatev Senior Android Developer, MentorMate Kristina Goryalova Talent Acquisition Manager Elena Petrova HR Specialist Jay Matre Senior Business Architect, MentorMate Lilyana Dimitrova QA Specialist Josh Marquart Chief Strategy Officer Mario Gorki Senior Mobile Developer Simeon Zhekov Cloud Engineer Hristo Stoyanov Cloud & DevOps Lead Ben Wallace Enterprise Architect Boyan Stoyanov Data & Dota Specialist Petya Ivanova Director, Software Engineering - Java Sebastian Ortiz-Chamorro VP of Engineering, Latin America Consuelo Merino Director of Operations, MentorMate Carlos Rodríguez Data & Analytics Manager, MentorMate Joel Hernandez CTO, eLumen 100% CSS Post-It® Check it out! I have updated the final code to function properly with the Firefox14 update from July 2012. Firefox stopped using transform skew, and moved to transform matrix code. -Alex Who doesn’t love Post-it notes? In my previous life, before I started learning CSS, I would ask myself “how can I make a convincing looking Post-it note in Photoshop?” After extensive CSS study and research I have come to realize that some things can be done with CSS alone. That’s right, the post it you see on the right is 100% CSS. Go ahead, check it out. Here is how it is done. I broke the instructions up into key elements so the uninitiated can get a feel for how I constructed everything. The process itself might be helpful for some people – it was certainly helpful for me. If you aren’t interested in my life story, feel free to skip to the end for a quick ‘plug and play’ code snippet. Making the Post-it margin: 25px; width: 250px; min-height:250px; max-height:250px; padding-top:35px; This is the basic square that will be built around your content. The height is somewhat complicated because I want the text to begin lower on the Post-it rather than at the top. To ensure the padding doesn’t add any height while still lowering the text, set a min and max parameter on the height. The Yellow Hex Color background: #ffff88; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */ background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ This is where much of the magic happens. When you think of a Post-it note you probably think of the yellow hex color, right? It’s true, but we need to think in 3D terms. It needs a yellow gradient that fades at a 45-degree angle into a slightly lighter color at the bottom right. This will help with creating a “peeled up” illusion later on. I just used this amazing tool (http://www.colorzilla.com/gradient-editor) to make mine. This code looks like a huge mess, but it’s mostly due to cross-browser support. Speaking of cross-browser support, Internet Explorer 6-9 does not like diagonal gradients so this website provides a nice fallback and converts our diagonal gradient into a horizontal gradient. This is not optimal so I recommend changing the last line of code here: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ Either make startColorstr and endColorstr the same number (which will turn off the gradient and make the Post-it a solid color) or change GradientType from 1 to 0 (this will make the gradient vertical instead of horizontal). I chose to remove the gradient. border:1px solid #E8E8E8; border-top:60px solid #fdfd86; I am doing something special with the border. You could easily give this a 1px light grey border and it would look fine, however, Post-its have that sticky glue-like substance on top that, when in use, has a slightly different look than the rest of the Post-it. I created a thick top border that is nearly the same color as the yellow I used. The effect is so slight you almost can’t tell it’s there, but anyone who does will surely appreciate it. Font Styling font-family:'Reenie Beanie'; font-size:22px; text-align:center; This is my font styling. Consider putting a script font on your post it, something like Marker Felt or Comic Sans, or preferably something interesting from the Google Font API like Reenie Beanie seen here. A Peeled Corner Although Post-its are square, the bottom corners tend to peel off the surface a bit when stuck to something. This 3D effect is subtle, but adds a ton to the feel of the note. This is the code to make only the bottom right corner look peeled for most browsers. As usual, sorry IE users. border-bottom-right-radius: 60px 5px; And there we have it. The final code for the Post-it class looks like this: .postit { line-height: 1; text-align:center; width: 275px; margin: 25px; min-height:250px; max-height:250px; padding-top:35px; position:relative; border:1px solid #E8E8E8; border-top:60px solid #fdfd86; font-family:'Reenie Beanie'; font-size:22px; border-bottom-right-radius: 60px 5px; display:inline-block; background: #ffff88; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */ background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */} I know what you are thinking. Where is the shadow? Well, the shadow is actually a different piece of CSS. We’re doing more than simply adding a box shadow around the note. We could do that, but then it would look like the Post-it is floating rather than stuck on the wall. Creating a non-box shadow is a bit of a workaround. We are actually going to be making a shape, giving that shape a shadow, and carefully adjusting that shape/shadow so only about 5% of it is visible. Sounds easy, right? I used this website to fine tune my effect (http://www.wordpressthemeshock.com/css-drop-shadow). It took me some playing to get it right, but I am happy with the result. The Bottom Corner Shadow content: ""; width:200px; height: 25px; -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0); -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0); -o-transform: matrix(-1, -0.1, 0, 1, 0, 0); -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0); transform: matrix(-1, -0.1, 0, 1, 0, 0); Here is our shape. It’s a long rectangle that has been skewed to have more acute angles. position:absolute; right: 0px; bottom:20px; z-index: -1; This positioning hides the box behind our Post-it and makes sure it stays underneath. I ran into an interesting problem when using this on a template sites like the one you are on now. The negative z-index actually put the shadow behind the background, making it invisible. I am not sure if this will be the case on other CMS sites, or other templates, but to get around this problem you simply need to give your background a z-index of 0. background: rgba(0, 0, 0, 0.2); box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40); Finally, the shadow. It takes a bit of tweaking to make it show up just right. Also you might have noticed that box-shadow is commented out. This is the IE workaround. IE doesn’t support rotation or skew so the shape that is actually making our shadow doesn’t cast the correct shadow. Without a box-shadow, it is just hidden under the yellow not not bothering anyone. The shadow website I provided above wants you to put together your inline code in a funny way. After you wrap your content in the .postit class, you need to make another empty div just to hold the box shadow. Like this: Here is my postit content That is a bit clunky and I always want to do less inline work, so I put my own spin on things. Instead of making a separate class for the cornershadow, which would look like this: .cornershadow { content: ""; position:absolute; z-index:-1; right: 0px; bottom:9px; width:125px; height: 25px; background: rgba(0, 0, 0, 0.2); -moz-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); -webkit-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); -o-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); /* box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); */ -moz-transform:skew(10deg,10deg) translate(-45px,-15px); -webkit-transform:skew(5deg,5deg) translate(-45px,-15px); -o-transform:skew(5deg,5deg) translate(-45px,-15px); transform:skew(10deg,10deg) translate(-45px,-15px) } The above code is now obsolete as browsers have moved to using matrix over skew. Here is functionally equivalent code, also updated in the final code. -Alex content: ""; position:absolute; z-index:-1; right:-0px; bottom:20px; width:200px; height: 25px; background: rgba(0, 0, 0, 0.2); box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40); -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0); -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0); -o-transform: matrix(-1, -0.1, 0, 1, 0, 0); -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0); transform: matrix(-1, -0.1, 0, 1, 0, 0); …I used the pseudo class :after to simply put the cornershadow code after all postit class divs! So now all you need to do is make a div class=”postit” and put whatever you want in it! The complete code: (Updated July 2012) .postit { line-height: 1; text-align:center; width: 275px; margin: 25px; min-height:250px; max-height:250px; padding-top:35px; position:relative; border:1px solid #E8E8E8; border-top:60px solid #fdfd86; font-family:'Reenie Beanie'; font-size:22px; border-bottom-right-radius: 60px 5px; display:inline-block; background: #ffff88; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */ background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .postit:after { content: ""; position:absolute; z-index:-1; right:-0px; bottom:20px; width:200px; height: 25px; background: rgba(0, 0, 0, 0.2); box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40); -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0); -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0); -o-transform: matrix(-1, -0.1, 0, 1, 0, 0); -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0); transform: matrix(-1, -0.1, 0, 1, 0, 0); } And the inline code: Check out this Post-it It’s 100% CSS! If you want to further increase your Post-it fun consider separating the colored gradient and borders into its own class, naming that class .yellow. Then create a class for other Post-it colors like .blue, .pink, .orange, and so on. That way you get to name your div class=”postit pink” and get different colors. You can also give your Post-its a rotation (like the one I have at the beginning of this post) by wrapping it in a div and giving that div rotate transformation. Tags Culture Share Share on Facebook Share on LinkedIn Share on Twitter Share Share on Facebook Share on LinkedIn Share on Twitter Sign up for our monthly newsletter. Sign up for our monthly newsletter.