We are always in search of great free tutorials, resources, tips, tricks, etc. for our readers. Everyday we work hard to find new and useful stuffs for designers like you. Today, we have another great post related to design a beautiful website using stylish effects with CSS/jQuery. In this, we made a list of 21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs. We obviously cannot cover all of the best available on internet, but we have tried to cover as much as possible.
You are welcome to share more CSS/jQuery tutorials and resources which our readers/viewers may like.Â Do you want to be the first one to know the latest happenings at SmashingApps.com just subscribe to our rss feed and you can follow us on twitter as well.
Fancy Thumbnail Hover Effect w/ jQuery
This is very beautiful thumbnail hover effect with jQuery tutorial using xHTML and CSS. If you switch up the absolute position coordinates, you can create various ways the hover effect pops out as well.
In this tutorial, author combine the versatile canvas element with the robust jQuery library to create a bar graphing plugin. In this first part, he is going to code the core logic of the plugin as a standalone version.
Styling and Adding Sort Options
This article consists of 2 parts: one is marking up and styling tags and the second is adding behavior to tag cloud using client-side script.
Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.
FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.
This tutorial will show you how to create beautiful animated menus using jQuery.
Improve form usability with auto messages
Animated auto messages are useful to improve FORM usability and Scriptaculous is a great framework to use in this case. In this article, you will learn how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.
Unobtrusive Table Actions Script
An attempt at writing an unobtrusive (and fast) script that adds commonly required “actions” to data tables.
Simple Page Peel Effect with jQuery & CSS
You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but this one was developed using some simple lines of jQuery.
Create a Slick Tabbed Content Area using CSS & jQuery
Create Vimeo-like top navigationÂ
In this tutorial, you will learn to create Vimeo-like top navigation. The base for this tutorial is simple CSS drop down menu based on unordered list.
Animate an image while hovering it and show the visitors information while doing that. Itâ€™s quite simple, you will make a list with a relative position, the image you will place with an absolute position, while hovering it you will give jQuery the command to give it a nice animating effect.
jQuery Tutorials for Designers
Style Your Website’s Search Field with JS/CSS
SearchField is a simple lightweight, unobtrusive script that adds styling and behaviour to your search form fields. All you need to make SearchField work is a simple form field and 2 lines of code (links to css and js file) and you are ready to rock.
FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
Create an Image Rotator with Description (CSS/jQuery)
An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
Create astonishing iCal-like calendars with jQuery
This is really useful tutorial to create astonishing iCal-like calendars with jQuery.
How to implement a news ticker with jQuery and ten lines of code