15 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
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
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
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
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
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
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
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
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
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
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
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
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.
Originally posted 2014-11-15 19:30:08.