Script & Style

3D Gallery with CSS3 and jQuery

2012-02-09T16:37:38Z

With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.

Creating “Next Level” Search Form Using jQuery & CSS3

2012-02-09T16:35:47Z

Lately we found ton of new style search form crafted beautifully using CSS3 and JavaScript. Apple’s for example, widen the input field when it receive focus from user. The question is “how far we can go for styling search form?”, in this tutorial we are going to move search form to next level using jQuery & CSS3.

Create A Weather Application With Google API Using PHP

2012-02-09T16:34:04Z

In this tutorial you will learn how to create a quick and easy weather application in PHP using the Google Weather API.

How to Create Animated Tooltips with CSS3

2012-02-07T03:55:48Z

How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after

Create A Minimal Single Page Portfolio With HTML5/CSS3

2012-02-07T03:52:51Z

This tutorial is the second installment of how to create a minimal single page portfolio using HTML5 and CSS3, take a look at part one where I initially designed the single page portfolio concept. In this tutorial I will walk you through the basic front-end build and what resources I used to rapidly build the page.

Pushing CSS to its Limits

2012-02-07T03:51:19Z

Review of the latest CSS3 techniques including the use of pseudo elements and classes, animation, boilerplates, LESS & Sass; and the new W3C layout modules.

Page Transitions with CSS3

2012-02-04T17:02:29Z

In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic.

Modular Front-End Development with LESS

2012-01-30T03:07:10Z

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

2012-01-30T03:05:26Z

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

2012-01-30T03:05:25Z

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

2012-01-27T00:45:56Z

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

2012-01-25T14:56:17Z

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

2012-01-19T18:17:16Z

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

2012-01-19T18:11:41Z

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

2012-01-16T17:57:49Z

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

2012-01-10T17:08:22Z

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

2012-01-10T17:07:55Z

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

2012-01-09T16:13:17Z

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

2012-01-09T16:12:51Z

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

2012-01-08T23:35:39Z

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.