New Tutorials For CSS And jQuery To Improve Web Designers’ Skills

As good as you think you might be, there is also room for improvement and learning new techniques is vital in a technological domain like web design where everything changes very fast. I’ve been researching for this article for some time and it is the time to publish it, now that I’ve collected a relatively large set of interesting and useful tutorials.

jQuery PointPoint – A Plugin For Pointing To Things

jQuery PointPoint – A Plugin For Pointing To Things

In this tutorial, we will be writing a jQuery plugin that will help you draw users’ attention to a specific part of the page, in the form of a small arrow that is displayed next to their mouse cursor. This can be useful for pointing to missed form fields, buttons that need to be pressed, or validation errors that need to be scrolled into view.

How to make the input placeholder more user friendly

How to make the input placeholder more user friendly

Placeholder text can be very helpful and can save a lot of page space while also being aesthetically pleasing. With this great feature, however, comes a problem: If the placeholder text is being used in place of a label, it can become very confusing when you focus on the field and the ‘label’ disappears.

Create An Animated Bar Graph With HTML, CSS And jQuery

Create An Animated Bar Graph With HTML, CSS And jQuery

How can we as Web designers get in on all of this hot graph action? There are actually quite a few ways to display graphs on the Web. We could simply create an image and nail it to a Web page. But that’s not very accessible or interesting. We could use Flash, which is quite good for displaying graphs — but again, not very accessible. Besides, designers, developers and deities are falling out of love with Flash. Technologies such as HTML5 can do many of the same things without the need for a plug-in. The new HTML5 < canvas > element could even be adapted to the task. Plenty of charting tools are online that we might use. But what if we wanted something a little more tailored?

Flared Borders with CSS

Flared Borders with CSS

Ever wondered how to create an element that flares into another using only CSS? Here’s a quick tutorial using existing CSS attributes, in combination with CSS generated content, to produce the effect using no images at all, and no additional markup. And it falls back gracefully for older browsers.

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

It’s pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here’s a whole bunch of those amazing things.

Shuffle Letters Effect: a jQuery Plugin

Shuffle Letters Effect: a jQuery Plugin

In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.

Interactive Google Map using the Twitter API

Interactive Google Map using the Twitter API

In today’s tutorial we will create an interactive Google map using the geocoding service. Using the Twitter API we will retrieve the user’s location, and then display the profile picture on the map. We will also add the click action, after which we will retrieve the user’s 5 latest tweets.

Custom Scrollbars in WebKit

Custom Scrollbars in WebKit

Building a Website with PHP, MySQL and jQuery Mobile, Part 1

Building a Website with PHP, MySQL and jQuery Mobile, Part 1

In this two-part tutorial, we will be building a simple website with PHP and MySQL, using the Model-View-Controller (MVC) pattern. Finally, with the help of the jQuery Mobile framework, we will turn it into a touch-friendly mobile website, that works on any device and screen size.

Creating A Rocking CSS3 Search Field

Creating A Rocking CSS3 Search Field

In this tutorial, we will explore some of these features like text-shadow, border-radius, box-shadows and transitions to create a rocking search field.

Creating a sphere with 3D CSS

Creating a sphere with 3D CSS

Bubble Slideshow Effect with jQuery

Bubble Slideshow Effect with jQuery

Today we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow. And as the code will be completely modular, you will be able to easily use it and modify it.

Responsive Image Gallery with Thumbnail Carousel

Responsive Image Gallery with Thumbnail Carousel

Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

Radio Buttons with 2-Way Exclusivity

Radio Buttons with 2-Way Exclusivity

Making a CSS3 Animated Menu

Making a CSS3 Animated Menu

In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements.

Portfolio Image Navigation with jQuery

Portfolio Image Navigation with jQuery

Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.

Tabs with Round Out Borders

Tabs with Round Out Borders

Rounded corners are now trivially easy to achieve via border-radius. But that only allows us to cut into the shape. What if we want to connect a shape to another with a rounded outward corner.

Photobooth with PHP, jQuery and CSS3

Photobooth with PHP, jQuery and CSS3

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

As you might know, it is not possible to access web cameras and other peripheral devices directly from JavaScript (and it won’t be for some time). However there is a solution to our problem – we can use a flash movie. Flash has perfect web camera support, and is installed on nearly all internet – enabled computers.

The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.

Animated Text and Icon Menu with jQuery

Animated Text and Icon Menu with jQuery

Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

Create an Attractive Before and After Photo Effect with jQuery

Create an Attractive Before and After Photo Effect with jQuery

Seamless Responsive Photo Grid

Seamless Responsive Photo Grid

Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. You don’t care if they are resized, but they should maintain their aspect ratio.

Making a Custom Facebook Wall with jQuery Templates

Making a Custom Facebook Wall with jQuery Templates

In this tutorial, we are going to create our own version of Facebook’s wall. We will be using Facebook’s Graph API with jQuery, and the template plugin. The jQuery.tmpl plugin will allow us to define templates within our page, and convert the posts we’ve obtained from the API into a real HTML page.

!important CSS Declarations: How and When to Use Them

important CSS Declarations: How and When to Use Them

When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration.

Fullscreen Slideshow with HTML5 Audio and jQuery

Fullscreen Slideshow with HTML5 Audio and jQuery

In today’s tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.

Quick and Easy jQuery Read More Script Tutorial

Quick and Easy jQuery Read More Script Tutorial

Better Check Boxes with jQuery and CSS

Better Check Boxes with jQuery and CSS

In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.

Image Wall with jQuery

Image Wall with jQuery

Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Fold Out Popups

Fold Out Popups

How To Use CSS3 Pseudo-Classes

How To Use CSS3 Pseudo-Classes

CSS3 is a wonderful thing, but it’s easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec) enable us to select elements based on a range of new criteria.

Simplest jQuery Spotlight Effect Tutorial

Simplest jQuery Spotlight Effect Tutorial

Rotating Image Slider with jQuery

Rotating Image Slider with jQuery

In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.

Little CSS Stuff Newcomers Get Confused About

If you’re a pro, it’s easy to forget the confusion you felt when you just started learning CSS. Just for fun, let’s try and remember some of those little weird confusing moments. I’ll start us out by listing some random ones I remember and have picked up on while helping others recently. Then you folks take it from there in the comments.

These aren’t huge big things like broken layouts in IE or which vendor prefixes should you be using. It’s the little fundamental stuff, like tiny differences in syntax that change meaning in a big way.

The Easiest Javascript Sliding Door Effect Tutorial with jQuery

The Easiest Javascript Sliding Door Effect Tutorial with jQuery

Animated Skills Diagram with Raphaël

Animated Skills Diagram with Raphaël

In this tutorial we will show you how to create a diagram using Raphaël – a small JavaScript library that is great for working with vector graphics. The idea is very simple: we will draw some arcs using mathematical functions and we’ll be displaying a skill percentage in a main circle when we hover over those arcs.

Five Useful Interactive CSS/jQuery Techniques Deconstructed

Five Useful Interactive CSS/jQuery Techniques Deconstructed

Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated.

Moving Boxes Content with jQuery

Moving Boxes Content with jQuery

Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.

Speed Up with CSS3 Gradients

Speed Up with CSS3 Gradients

Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now supporting CSS3 gradients. This wide browser support makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead.

But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

Animated Content Menu with jQuery

Animated Content Menu with jQuery

Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked.

The Future Of CSS: Experimental CSS Properties

The Future Of CSS: Experimental CSS Properties

Enjoyed this article? Subscribe to read more like it

 
 
 
 
 

Sponsors