CSS3 Transitions are effects that allow you to change the style of an element gradually to another style. This is a great new property that adds animation without having to use Javascript or Flash. We used this in our top navigation so when you hover over one of the navigation icons it gradually drops the name of the link. see CSS3 transition property tutorial

CSS3 Border Radius property lets you create rounded corners without having to use photo editing software to create rounded corners and piecing it together in HTML. We used this property throughout the entire site. see CSS3 border-radius property

CSS3 Box Shadow property adds a shadow to elements like your div. We used this property right on homepage so when you hover over our featured sites there’s a light glow around the image. It’s not a shadow, but it’s done with the box-shadow property. see CSS3 box-shadow property

CSS3 Media Queries have been around, but with CSS3 you have much more control. Now you can assign different style sheets depending on the screen resolution, which is extremely helpful with the amount of devices that websites are viewed from. This feature was put into good use helping us create a responsive designed website, so as the resolution changes it’ll adjust to a better viewable layout. There’s more to responsive design than just media queries but that’s for another post. see CSS3 media queries tutorial

Those are examples on how we used CSS3 in the redesign of the Pure Adapt site and that’s only small sample of all the great stuff the CSS3 has to offer. Visit PureAdapt.com to see the complete redesign. Also note that CSS3 doesn’t work across all browsers. Working properties may vary across browsers, but most modern browsers have adopted CSS3. For more details on CSS3 visit w3schools.com for CSS3 tutorials and much more, it’s great web design resource.

LockerPulse now also offers the ability to change your background or upload your own background for premium members. Give your LockerPulse aesthetic brilliance by customizing your background. Check out my Frank Gore background. Looks pretty dang sweet doesn’t it. This is a very simple way to customize your LockerPulse. Quick tip, you can easily find great backgrounds from your favorite teams official website.

For a free LockerPulse account follow my promo link. Don’t miss out it’s for a limited of time only.

24 Ways To Impress Your Friends inspiration stems from it’s unique calendar styled navigational layout. The hover effects throughout the layout gives it an interactive feeling while layers and transparency effects add a level complexity. When you put all that together you get cool functional user experience.

The navigation stands out to me the most and makes me rethink the possibilities of a site navigation.

Not only is the design inspirational, the site is all about web design and development. Since 2005 the site has been featuring 24 posts about design and development from different writers during the holidays.

24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.

The navigation makes the design and only posting during Christmas makes for a very creative unique website. Check the site out now at http://24ways.org/.

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.

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.

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.

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.

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.

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.

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!