Bulletproof CSS3 Dropdown Navigation Menu

A step-by-step Tutorial on How to Build a Bulletproof Cross-browser Dropdown Navigation Menu with HTML5 and CSS3.

Arctext.js - Curving Text with CSS3 and jQuery

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Combining AJAX, pushState and CSS3 transitions

An in-depth look at (and demo of) how AJAX, HTML5 pushState and CSS3 transitions can be combined for subtle but rewarding progressive enhancement - but not without some unexpected bumps in the road.

Sliding Image Panels with CSS3

Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We’ll use radio buttons with labels and target the respective panels with the general sibling selector.

Tiny CSS3 Preprocessor Function for PHP

This is a small and easily extendable CSS3 preprocessor function written in PHP that:
- Detects and renders both vendor-specific properties and values, such as CSS3 functions;
- Supports multiple CSS3 property values;
- Combines multiple CSS files into one;
- If GZIP is available, the output stylesheet is gzipped and its size is much smaller than the size of all CSS files;

Filter Functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Animated Web Banners With CSS3

Today we’re going to take a look at spicing up our web banners, ads or any content for that matter, with CSS3 animations.

CSS Image Reflection With Webkit

Before CSS this had to be done by adding the reflection in the images, by using an image editor such as photoshop or gimp, and then there was javascript alternatives to add an image reflection. But now the people at webkit have put this feature into CSS by just using one line.

Revolver.js — A New Content Slider with No Assumptions

Revolver is a new content slider with no assumptions about your markup. Think of Revolver as a boilerplate or framework for making your own slider, exactly the way you want it. But dont let that scare you, its really easy, I promise

How To Work Out Distance Between Mouse And Element With jQuery

In the tutorial today you will learn how you can use jQuery to get the distance of the mouse from a certain element on the page. This bit of code can be useful on a small web app which has a lot of user interaction and you want an event to run when the user mouse is in a certain distance from an element.

Colors: JavaScript Color Library

Colors converts color models of a given color both to and from hex, RGB, HSV and even HTML named colors - as well as providing complimentary and random colors.

What CSS Properties Are Supported When You Drop IE6 Support

While Internet Explorer 6 used to be the darling of the internet world, it has long since become the limiting factor in web application development. If you drop support for IE6, however, a number of new CSS Cascading Style Sheet properties become [much more] universally supported. I took some time this morning to look at the following compatibility charts to see what gems I might not be leveraging effectively.

jQuery Map Marker Plugin

This plugin makes it easy to put multiple markers on Map using Google Map API V3.
Map Marker is very useful when you have a list of data & you want to show all of them on Map too.

Like most of the jQuery plugins, this plugin is very straight forward to setup.
It has some nice options & uses JSON formatted data for every Locations.

Impress.js

It’s a presentation tool inspired by the idea behind prezi.com
and based on the power of CSS3 transforms and transitions in modern browsers.

Fullscreen Background Image Slideshow with CSS3

Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations.

Fallback on Local jQuery If CDN Fails

If CDN jQuery fails to load your jQuery will not load and some of your website features will no longer work.

Therefore you need a way to load a local jQuery file if for some reason your CDN jQuery fails to load.

Use the following snippet you can download jQuery from the Google CDN if it fails then you will use a local version.

Maintainable CSS3 Using PHP

Using PHP-generated CSS, you can abstract your multi-line CSS3 stuff into just one line of maintainable code.

CSS Filters

CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Lets have a look at how CSS filters work and how you can quickly create elements that are beautifully filtered

Collapsing Site Navigation with jQuery

Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, an image slides down from the top and a submenu slides up from the bottom. Clicking on one of the submenu items will make the whole menu collapse like a card deck and the respective content area will slide out.

Creating Your Own XHTML & CSS Framework

Throughout the years I’ve found that it’s a waste of time trying to adapt a pre-made framework to a site, it rarely works well and you end up spending more time fighting to get the framework to fit, than if you had just coded the site from scratch.

Using something you’ve built ensures it works, remains elastic for all of your sites, contains the same coding style and saves you time for each site you build.