indie_preneur

An FPO’ed image with HTML + CSS3

1.29.2010

By indie_preneur

I know I’ve had many projects that I had to create an extra step in Photoshop to accomplish. Whenever I used to comp a layout and the images either weren’t approved, or even  in a remote ballpark of being approved, I used to find an image similar to what I thought the client would want, and then ‘FPO’ it in Photoshop. And seeing as how I’m trying to design in the browser as much as I can, and with CSS3s awesomeness, I thought how could I skip this step in Photoshop.

This was never a hugely time-consuming step, but it was a whee bit annoying. For the record, I’m not sure if other people have done this before, I’m sure someone has, but after a quick search on google, I didn’t see anything.

I created some dummy content and explained what I was doing and then pulled a dummy pic from a previous (also FPO) project. I marked it up without any major CSS, just normal body stylings. Here’s the HTML:

<div id="demoWrap">
	<div class="fpo">
		<img src="images/holderOne.jpg" height="164" width="249" alt="" />
		<abbr>FPO</abbr>
	</div>
	<h1>This is cool stuff.</h1>
	<p>This way, you don’t need to create a PSD file with FPO and then
	remove it later.</p>
</div>

Here’s the before look:

Then I added a bit of CSS:

#demoWrap .fpo { float:right; margin:10px 0 -50px; }
#demoWrap .fpo image { display:block; position:relative; z-index:1; }
#demoWrap .fpo abbr { display:block; font-size:300%; font-family:Helvetica,
Arial, sans serif; font-weight:bold; position:relative; z-index:100; top:-115px;
left:75px; color:rgba(255, 255, 255, 0.8); text-shadow:#101010 0 1px 2px; }

And voila, I got just what I was looking for:

Like in the image, in modern browsers, this adds a nice flavor that we used to get only in Photoshop. Older browsers will ignore them and this effect will still be effective, just not as glamorous.

Post this goodness to twitter.

Tags: CSS3, fpo, Photoshop

This entry was posted on Friday, January 29th, 2010 at 6:57 pm and is filed under code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.