In my previous post about box outlines in Photoshop, I mentioned that I would show you how to create them with CSS. The CSS term for a box outline is border (as opposed to stroke in Photoshop). CSS borders can be of any thickness and color. There are even dotted and dashed borders, not to mention the classic “groove” and “ridge” borders that just shout out, Hey, it’s 1997 again! In today’s tutorial (inspired by Book of Love’s I Touch Roses), I used a few extra CSS properties to make the example prettier and more interesting. So in addition to borders, I’m also going to touch briefly on fonts and positioning.
I know this tutorial is pretty simple, but I wanted to show what you can do with just a little CSS. In future tutorials, I’ll show you how to combine elements to create some pretty cool border effects. Anyway, they’ll be coming up in future weeks.
BTW, if you’re new to HTML, you might want to get started by checking out my HTML screencast. And, if you want to learn more about CSS, I show you all that I know here.
And TA-DA!! We’re done! :D
layer text on photos (tutorial)
tiny grid background from subtle patterns
things to do with boring nature photos (tips)
museo (myfonts)
futura pt from typekit
instagram photo edited with radlab
futura medium (osx default font)
