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)

Just in time for the holidays is My-Wish-List.com. Create your own wish list online and share it with your friends and family via email, Facebook, and Twitter.

Simply enter your name and the gifts you desire most then click “Create Wish List Now”. All done, your wish list is created with your personal permanent link to share with friends and family. No registration is necessary, create unlimited lists and it’s completely free.

Once your wish list is created, you and your friends and family can check Amazon and Ebay for the gifts to making shopping easy.

This was a fun little side project where I got to better my programming skills slightly. A little help from Adam and his programming expertise it’s up and ready for the holidays.

It’ll be interesting to see if this catches on with it’s easy sharing capability. If one person shares their wish list with their friends and family then one of them likes it and does the same it could get viral.

Create your own wish now! Happy Holidays!

Comments (0)

PicApp has just made life easier for bloggers and web content creators with their innovative news and stock photo website. All their images are free and legal for you to use. This is super convenient to bloggers looking for images for their posts. With PicApp there’s no more worries on finding free and legal photos to use.

The picture below from PicApp of Larry Fitzgerald comes from a game that was played just earlier today between the Arizona Cardinals and Seattle Seahawks. When you use a PicApp image it also offers thumbnails of additional images and the option for others to embed the image.

PicApp is easy to use. All you have to do is search for the image you desire, click on it, then copy and paste the code into your blog. PicApp has also partnered up with some major content providers like Getty Images, Corbis, Pacific Coast News, and Newscom just to name a few, to bring you premium images. On top of all that PicApp is always updating with new content as you can see from the Larry Fitzgerald image from a game that finished no more than a few hours ago.

For funsies lets search for Transformers Revenge of the Fallen and embed some images. I got a badass picture of Optimus Prime and the stunning Meagan Fox.

The only downside is that the image code automatically links back to the image at PicApp, but that’s nothing that can’t be changed with a little HTML editing. (Update: The link must stay intact, it’s part of their terms)

Worry free image use, what more can you ask for. When you’re looking for stock images or up to date news images I think you got start at PicApp.

Comments (1)

What is Z.ips.ME you say? Z.ips.ME is a little open source program that my business partner Adam came up with that lets you create your own URL shortening service.

Simple to use and easy to install, Z.ips.ME gives you control of your URLs. I think it took me less than 10 minutes to get everything set it up. Follow the 5 installation steps and you’ll be golden. The installation process is just like WordPress.

Key benefits of Z.ips.ME:

• URL naming control with keywords. (i.e. I twittered about Jet Blue’s unlimited flying for $599 using my very own shortened link http://www.michael-li.com/zipsme/JetBlue)
• Peace of mind that your URLs are safe from being dead links because the service you used closed down.
• Private admin system with robust statistics with clicks, referring sites, browsers, and operating systems.
• Branding your own domain.

Don’t know how to do the installation or just don’t want to, Z.ips.ME does offer a installation services if you contact them.

This is one of the many little projects that I hope Pure Adapt, Inc will continue to develop.  We have tons of ideas.  While developing these little projects, hopefully we hit a couple more like Sports Lizard and HotteeeZ.  Those twos sites make some decent money for very little amount of work.  Minimal work and maintenance equaling continuous income is a no brainer, I think.  Like Adam said about projects that don’t pan out, ” If not, there’s really no loss for us and we can just try some more until something works. How fun is that?“  That’s the truth, these are not high risk projects that we’re taking on and it’s fun as H E double hockey sticks.

Back on to Z.ips.ME.  If you’re looking for your very own URL shortening service Z.ips.Me is simple to use and gets the job done.  Check out the Z.ips.Me for more information and screen shots.

Comments (0)