The new and improved Detailed Image homepage has arrived. It wasn’t too long ago since our last homepage design but after taking a few steps backwards in that design we started a new homepage to return to our roots as an ecommerce site with a design that is up to par with the rest of the site.

Hover over the image below to see some of the key features in the design

Using the CSS image swap I posted about back in February you can hover over the above image to see some of the key design features we implemented. Some highlights of the new design include CSS3 @font-face and drop shadows which was nice because we had the opportunity to try CSS3. Ultimately the new design should convert better with the focus on selling products then content.

Comments (0)

I found this fantastic icon library at IconFinder.com.  This is a very useful site for web designers like myself.  Targeting web designers and developers IconFinder provides an easy to use icon search engine with high quality icons.

Search includes auto-suggest.

Easy to navigate results and you can filter by size and licenses. Both PNG and ICO formats are available as well.

The site is wonderfully designed and it functions fantastically. The bottom line is it provides an efficient way to find high quality icons which is useful to almost any web designer. Another tool added to my web designer arsenal.

Comments (2)

A new venture has arrived at Pure Adapt, Inc. as we start the development of Adam’s brainchild. With Adam’s expertise in programming and using RSS he has developed a better way to keep up with everything happening with your favorite sports teams. LockerPulse will bring you an innovative and better way to get your team news.

Locker Pulse began as a side project that Adam was working on but now it has become our next major business venture at Pure Adapt. Read more about the conception of LockerPulse on Adam’s blog.

The design process has begun and I’m very excited to be involved in this unique venture into sports with the design ideas that we have. Take a sneak peek at what we have so far on the LockerPulse splash page and if you sign up now you’ll receive a special offer on launch. In the LockerPulse design we hope to bring users a better way to stay connected with their favorite sports teams through usability and simplicity with some badass aesthetics.

Starting with this unique design concept that we have really gives me an opportunity to push my design skills to the next level. Speaking of design, I want to say how much I hate IE for the umpteenth time, because it renders everything like crap. Now getting off that topic I’ll be using resources like Smashing Magazine for inspiration to get my design juices flowing and inject them into LockerPulse. The design is coming along and I can’t wait till we unveil it to the world in May.

LockerPulse is coming 5.1.2010! Sign up today to get a special offer when it goes public.

Comments (0)

While I was redesigning my blog and looking for inspiration I stumbled upon an amazing web design site, SmashingMagazine.com, which is choc full of useful web design information and inspiration.  When I first found the site I couldn’t get off it because of all the great information it had.

Smashing Magazine was founded in 2006 with the purpose of providing readers information about the latest trends and techniques in web development.

While I was on the site I found myself constantly pondering things like “I want to read this, I want to try that, or that’s awesome”. The quality of content that SmashingMagazine.com offers makes it one of my top design resources. Since discovering the site when I redesigned my blog about 5 months ago, visiting Smashing Magazine has become one of my beginning steps in my design process for inspiration and the latest design trends.

Check out some of their recent posts:

• 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
• The Seven Deadly Sins Of JavaScript Implementation
• Email Newsletter Design: Guidelines And Examples
• 35 Beautiful E-Commerce Websites

Smashing Magazine is an awesome design resource so as designers lets take advantage of resources like Smashing Magazine to keep up with trends and continue to innovate the web.

Comments (0)

When I was designing the new Ask-a-Pro Detailer blog for Detailed Image I figured out a way to do an image swap without using Javascript.

The basis of this image swap technique is to set a background image to be your image you want to have swapped when you hover over it. Then insert the default image which will sit on top of the background hiding the background. Create a style to change the opacity of the default image to full transparency when you hover over it, voila you have an image swap.

Requirements
CSS3 Property: Opacity
Opacity changes the transparency of an element. Most modern browsers already support this CSS3 property. Set values between 0.0 (full transparency) to 1.0 (no transparency).

CSS2 Property: Pseudo Class :hover
Pseudo Class :hover is a dynamic action that happens when you hover over an element.

Examples:

Basic image swap using CSS.

The Code:
HTML
<div id=”css-image-swap-1″>
<img id=”swap-1″ src=”default-image-url” alt=”CSS image swap” />
</div>

CSS
#css-image-swap-1{
width:300px; height:150px; background:url(swap-image-url);
}
#css-image-swap-1 img:hover{
opacity:0;
}

I mentioned above that this method should work with most the modern browsers but I know it doesn’t work for IE7 and older because IE totally sucks.

I’m sure this has been done before but I’d thought I’d share this with everyone. I didn’t find this particular technique when I searched for CSS image swap but I did find others using this basic concept using CSS visibility instead of CSS opacity. Both techniques will get the job done for an image swap.

Comments (3)

I present to you Woody Paige’s Chalkboard from Around the Horn. We threw this site together in a matter of days after Adam did some analytics evaluation of Tastefully Driven and discovered that our Woody Paige thread was one of the most popular pages.

WoodyPaigeQuotes.com features Woody’s past chalkboard quotes, submit your own Woody Paige Chalkboard Quote, easy way to follow via RSS Feed, Twitter, and email, and lastly user comments.

This was a quick and fun project. Adam posted details on the our WoodyPiageQuotes.com to do list on his blog. Woody Paige’s Chalkboard always gives me a laugh which made making this site all the more fun to do. Enjoy Woody Paige’s Chalk Board Quotes.

Comments (0)