Inspiration for Text Input Effects with CSS3

Inspiration for Text Input Effects with CSS3

Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements.

Form inputs offer a great opportunity to add some subtle and interesting effects to a web page. They are elements that your user will interact with at some point and making them fun to use can enhance the experience. We are used to the default form resembling its paper counterpart but in the digital world we can be more creative. Today we want to share some experimental styles and effects for text inputs with you.

Architect : Site and HTML builder with JS & PHP

Architect : Site and HTML builder with JS & PHP

Architect is the most powerful and easy to use site and html builder not only on codecanyon, but probably on the internet as well. It has all the features you would except from a site builder, while also offering exclusive ones like themes & templates, closely integrated code editors, the best visual css and image editor around and much more.

Textroll.js : jQuery Animated Text Effect Plugin

Textroll.js : jQuery Animated Text Effect Plugin

Textroll.js is a jQuery plugin for adding some scroll effect to text.

3D Curtain Template with CSS3 & jQuery

3D Curtain Template with CSS3 & jQuery

A list of split blocks that reunite on scrolling, simulating a movement along the z-axis with the help of CSS transformations and jQuery.

CM-Rotate.js : Rotate js using CSS transition

CM-Rotate.js : Rotate js using CSS transition

Rotate js using CSS translate3d and transition

  • No dependencies
  • Works in all major browsers that support CSS translate3d or transition (IE9+)
  • Works on tablet PC

Scalem : jQuery plugin to make any Element Scalable

Scalem : jQuery plugin to make any Element Scalable

Scalem, short for scale elements or slang for scale ’em, is a light-weight responsive text jQuery plugin inspired by FlowType. Use it to “liquify” elements on your website so that they scale relative to the width of their parent element or, optionally, any element you specify (see Options below). Scalem is not just limited to text size—it can be used to scale any CSS style that takes a numeric unit such as px, em, or %.

Integrate Pixlr Online Photo Editor in Website

Integrate Pixlr Online Photo Editor in Website

In this tutorial we are going to integrate pixlr online photo editor in our web application or website.

Pixlr is an free online photo editor tool, using this pixlr editor we can edit photos like in adobe photoshop. pixlr has almost same interface of photoshop, if you know photoshop little bit then it’s easy for you to edit photos in pixlr editor. So now we are going to add this excellent pixlr photo editor in our website.

SParallax : jQuery Parallax Effects Plugin

SParallax : jQuery Parallax Effects Plugin

SParallax is a responsive Jquery plugin that allows you to bind element transitions to the native vertical scroll bar of any web browser, thus allowing you to create parallax effects that are only limited by your imagination.

jQuery Video Background plugin

jQuery Video Background plugin

HTML5 video background jQuery plugin.Will place a resizable video in to the background of the page or designated element. Browsers that don’t support the HTML5 video element will get an image if a poster image was provided.

If the containing element’s width and height does not match the aspect ration of the video, the video will not stretch to fill the container but will render based on the largest dimension.

Snabbt.js : Fast Animations with javascript and CSS transforms

Snabbt.js : Fast Animations with javascript and CSS transforms

Snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices.

snabbt.js is built to be fast. It will only animate things that modern browsers can animate cheaply: transforms and opacity. The goal is to make a library that will let the user make smooth animations without needing to know too much about browser rendering.