Create a fancy web form with field hints using only CSS3
CSS3 tricks have been pretty popular in the last while on various design blogs and with good reason. Like many of you, I've caught the CSS3 bug and this afternoon I took a stab at this nifty little method of adding hints to your form fields (as well as some fancy style enhancements) using CSS3. The cool part is you don't require Javascript for the form field hints. Here's a demo and run down of the code used.
CSS3-only horizontal drop line tab menu
Recently, Web Designer Wall posted this really cool tutorial on creating a dropdown menu using only CSS3 (no javascript). Not being one to just sit back and let things sit as is, the approach inspired me make a variation. The result, however directly derivitive, is this horizonatal drop line menu based on a variation of WDW's tut.
Twitter-style login with jQuery & CSS3
Following my posting of the Twitter-style confirmation message with jQuery method, I thought it would be fun to recreate the Twitter login form. It's actually pretty straightforward and took me about a half hour to develop. Using a splash of jQuery to toggle the form and some CSS3 to apply the design you can implement a similar approach on your own web site.
Create a toggle footer with jQuery & CSS
This is one of the easiest implementations of jQuery but underlines the simplicity and robustness of the library as a powerful web development tool. Here I used the slideToggle & toggleClass functions to create a sliding sticky footer, in this instance as use for a 'Contact Me' panel. You could use it for just about anything including login & contact forms, slideshows, or you can combine it with cookies to create a user-controlled sliding message.
Twitter-style confirmation message with jQuery
One of the cool ways that Twitter interacts with users (when you're not too busy seeing that pesky fail whale!) is how they display their error and confirmation messages. I especially like the clean approach and displaying the messages at the top of the page. If you're looking for a similar approach with your web application or dynamic web site, here's one way you can do it using the jQuery form & some validation.
User-controlled sliding jQuery panel (with cookies)
One of the ways you can communicate with your users is with a dynamic message that is displayed when your page loads. This is a common method of adding important information (or possibly promo items). While it can add some immediate accessibility, having to force the message on them again after already seeing it once isn't the most ideal user experience. The method I developed here displays such messages but gives the user the option of not seeing it again by setting a browser cookie, thus eliminating that "ugh, not again!" reaction that your users may feel.
A jQuery-powered social dropdown menu
When David Walsh posted his article on using jQuery's sliding effect for use in FAQs, I was once again reminded of the beauty of jQuery in its simplicty. I thought I'd take it a step further and show how it could be used for a static dropdown menu for your site/blog's social media links.












