Notepad in CSS & Html

24 December 2011

I’ve been fiddling around today with converting a PSD from Premium Pixels to HTML and CSS and I don’t really know what to do with it now that I’m done so I thought I’d post it here for people to download.
screenshot
View the Demo

The original PSD was meant for blog comments, but I designed it with whatever in mind.

Bear in mind that I don’t own Internet Explorer, so I can only vouch for Chrome & Firefox compatibility wise. I know that IE9 supports multiple background images but I don’t think 7 or 8 do, so although the structure might be fine, the notepad background might be missing! In which case you’ll have to write some fallback code if you’re concerned about older browsers.
Download a zip of all images & code

Comments on this entry


  1. Jenn commented on December 26th, 2011 at 00:50:36

    That is super cute. You are always so creative. I wish I had 1/2 your talent as a web designer. :)

    I might be using this soon enough. I am not to proud to have help from amazing people!


  2. Rose commented on December 28th, 2011 at 15:47:51

    Oh thank you! I don’t think I’m super creative – I didn’t design the notepad, just coded it. But I’ll take the compliment anyway!


  3. Sarai commented on February 27th, 2012 at 07:27:16

    This is gorgeous Rose! I’ve been looking around for little tips/scripts/code awesomeness so that when I get back into the loop I’m not completely blindsided. I’m hoping to be able to use this :)

Leave a comment