Create a Pentagon Hover Effect with CSS3 and jQuery

Create a Pentagon Hover Effect with CSS3 and jQuery

This is a new series that will focus on cool web elements on the web. My goal is to try and replicate these sleek elements using a combination of HTML, Javascript and CSS3 and hopefully teach something along the way. It’s a portfolio site that implements a cool pentagon hover effect for displaying his work. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image. Note: This is using CSS3 Transitions which is still not completely standard and browser compatibility may be limited.

 

Flipload.js : Flipping HTML elements to show a loading indicator easily

Flipload.js : Flipping HTML elements to show a loading indicator easily

Flipping HTML elements to show a loading indicator easily.

It’s compatible with:

  • Chrome
  • Firefox
  • Safari

Gridforms : Data entry can be beautiful with jQuery & CSS

Gridforms : Data entry can be beautiful

Grid forms are dense forms designed for use in applications that require lots of data to be entered regularly. A tiny Javascript/CSS framework that helps you make forms on grids with ease.

An effort to make beautiful forms for web applications that make data entry less painful. Grid forms is a front-end library (Just CSS at the moment) which handles the boiler plate necessary to build grid based forms.

Formbuilder.js : Graphical Interface to build Webforms

Formbuilder.js : Graphical Interface to build Webforms

Formbuilder is a graphical interface for letting users build their own webforms. Think Wufoo or Google Forms, but a lightweight component that can be integrated into your application.

As of right now, Formbuilder only handles the client-side logic of creating a form. It will output a structured JSON representation of your form, but saving the form, rendering it on the server, and storing users’ responses is all up to you. I’m planning on releasing a Rails gem to handle this logic, but the ETA on that is pretty up in the air. If you’d like to help, feel free to reach out.

jQuery Responsive Portfolio Gallery

jQuery Responsive Portfolio Gallery

Responsive Fully Customizable jQuery Portfolio Gallery. Image preloading

Responsive elements : Helps you build better responsive websites

Responsive elements : Helps you build better responsive websites

Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny javascript library that you can drop into your projects today.

Squiggle : Scribble out your content with jQuery Plugin

Squiggle : Scribble out your content with jQuery Plugin

This jQuery plugin will generate a HTML5 Canvas made png to draw a ‘squiggle’ over your text, like a strike-through or underline.You can configure the plugin, with scribble thickness; colour; intensity or leave it in its auto state, which will callibrate itself to match your text’s CSS.

Ion.Tabs : jQuery tabs plugin

Ion.Tabs : jQuery tabs plugin

jQuery tabs plugin.Easy and well done tabs with many options and skin support.

Description:

  • Supports many groups of tabs at one page.
  • Generate events and callbacks.
  • Support many types of position saving, for each tabs group on the page.
  • Very easy in set up and customisation. Has skin support.
  • Has public methods for outside control.
  • Cross-browser support: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Ion.Tabs supports touch-devices (iPhone, iPad, etc.).

Fancy Timeline Transition with CSS3

Fancy Timeline Transition with CSS3

This is a port of the Google+ iPad app timeline purely done with CSS3.

WhatWeather : jQuery Weather’s Widgets plugin

WhatWeather : jQuery Weather's Widgets plugin

WhatWeather is a jQuery plugin which provides weather’s data. It uses worldweatheronline.com API to get, parse and deliver data in order to create weather’s widgets. WhatWeather provides data and let you manage the display. However, it uses Mustache. In this way, you can easely change the template of your widgets.

You can get weather data from cities all over the world. The plugin uses the name of the city, geographic coordinate system, IP adresse or the HTML5 geolocation API. The plugin have also a client-server caching system by using Web Storage API and text file for the server side.