Modular Front-End Development with LESS
This article will explore the benefit of organizing your code efficiently while keeping it reusable and modular.
Use CSS transitions to link Media Queries and JavaScript
A common problem in responsive design is the linking of CSS3’s media queries and JavaScript. For instance on a larger screen we can restyle, but it might be useful to use JavaScript and pull in different content at the same time, e.g. higher quality images. With CSS transitions, specifically their transitionEnd events, we can marry up our media queries and JavaScript perfectly, without resorting to window resize events.
JavaScript File Uploads with resumable.js
It’s a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.
The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes. This allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause and resume uploads without loosing state.
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.