Category: CSS

GFX – jQuery CSS3 Animation Library

on April 23, 2012 in CSS, Development, Effects

GFX is a jQuery library for easily creating CSS3 transitions programatically.

Currently, only webkit browsers are supported which makes this plugin ideal for use in mobile web development.

The syntax for creating an animation is $("#element").gfx(properties, options) where the properties can be any CSS you want to transition. In the options you can specify the duration of the animation, easing effect, queuing the animations and a callback for when the animation completes.

GFX currently has five built-in transitions available (Explode Out, Explode In, Blip, Fade In and Fade Out).

In addition, there are three plugins to support GFX – Overlay, Flip and Cube. Overlay is a light box effect which displays some content above an overlay. Flip is a method of flipping between two elements with a nice effect. Cube will rotate up to six faces in the style of a cube.

Sone nice tutorials and examples are provided here but remember to view them in a webkit browser.

GFX - jQuery CSS3 Animation Library

Speed Up Development Time With CSS Refresh

on March 14, 2012 in CSS, Development, Toolkit

CSS Refresh is a JavaScript file that automatically refreshes a browser if a change is detected in any loaded stylesheet on a web page.

This will save large amounts of development time, particularly on front-end work.

All that is required is either include the JavaScript file after all the stylesheets, or use the provided bookmarklet without the need for any code changes.

Speed Up Development Time With CSS Refresh

Impress.js – CSS3 Presentation Framework

on February 4, 2012 in CSS, Development

Impress.js is a framework for presentations (with keyboard support) that utilises CSS3 transforms and transitions to create an infinite scrolling canvas of elements that can scale and rotate.

Only modern browsers with CSS3 transition and transform are currently supported such as the latest Chrome and Firefox. It will also not work on touch devices such as Android/ iPad.

An editing tool is rumoured to be in development but currently only examples and source code are provided with limited documentation.

Impress

320 and up – HTML5 Boilerplate Extension

on January 31, 2012 in CSS, Development

320 and up is an extension to the HTML5 boilerplate that starts with a style sheet for small screen devices and then uses progressive enhancement by using media queries to load enhanced layout and assets as they are required.

320 and up can be used standalone or by using it with the HTML5 boilerplate, in which case some files need to be replaced within the boilerplate package.

It includes:

  • five media query increments: 480, 600, 768, 992 & 1382 pixels
  • a vertical grid based on Less Framework 4
  • either a single style sheet with multiple media queries or multiple linked style sheets
  • combined HTML5 boilerplate and mobile boilerplate components
  • typography preset styles
  • imgsizer.js to improve IE’s rendering of resizeable images
  • selectivizr.js - bootstrap CSS3 selector support
  • jquery-extra-selectors.js to boost Selectivizr

320 and up

OSX Lion Style CSS Buttons

on November 14, 2011 in Buttons, CSS, Design, Development, Icons

If you want to style your interface based on OSX Lion, this complete set of icons and buttons can be easily integrated with CSS.

The buttons can also be easily grouped together to either the left, middle or right by adding another class.

An apple style progress bar is also provided.

OSX Lion Style Buttons