Open Source Resources for Web Application Developers

CSS3Warp is a proof of concept: create Illustrator like “warped” text (text following an irregular path) with pure CSS and HTML.

CSS3 brings new text-transform options: rotation, skew, matrix, transform-origin… By applying the right transformations to every single letter it is possible to create the illusion of text following a path.

Type your text into the webform, click “Warp it!”, then alter the path as you like. You can attach your text to a circle or a bezier. Add or delete points, or change position, angle and radius of the circle. When your done, click “Generate code”. Copy the CSS and HTML into your document.

Requirements: CSS3 Support
Demo: http://csswarp.eleqtriq.com/
License: License Free

• 4 Comments

HSL (Hue, Saturation, Luminosity) allows us to describe meaningful relationships between colors. Give this brown color, hsl(36, 73%, 10%), it’s clear that if we desaturate 40 steps and lighten 70 steps we get hsl(36, 33%, 80%), a cream color. HSL Color Picker can help you with this.

In graphics software, it feels more natural to work with HSB (Hue, Saturation, Brightness) than RGB or CMYK. Now, with CSS3 we can use HSL which is actually quite different than HSB. Without a decent HSL color picker, it’s difficult to understand.

Requirements: -
Demo: http://hslpicker.com
License: License Free

• 1 Comment

D3 is a small, free JavaScript library for manipulating HTML documents based on data. D3 can help you quickly visualize your data as HTML or SVG, handle interactivity, and incorporate smooth transitions and staged animations into your pages.

D3 is not a traditional visualization framework. Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data. This gives D3 extraordinary flexibility, exposing the full capabilities of underlying technologies such as CSS3, HTML5 and SVG. It avoids learning a new intermediate proprietary representation.

Requirements: Javascript Enabled
Demo: http://mbostock.github.com/d3/
License: License Free

• 1 Comment

Have you been fascinated by the visual clarity of the London Underground map? Finally, with the advent of HTML5 element and jQuery, it is now possible to implement this in a way that with a little bit of effort, anyone who knows HTML can easily create a subway map.

Subway Map Visualization jQuery Plugin lets you create a beautiful, interactive subway map visualization for their website using HTML markup. The map size, line width and colors can all be customizable. The markup used to create the map is search engine friendly too.

Requirements: jQuery Framework
Demo: http://www.kalyani.com/2010/10/subway-map-visualization…
License: License Free

• 1 Comment

Text messaging has become extremely widespread throughout the world – to the point where an increasing number of web applications have integrated SMS to notify users of events, sales or coupons directly through their mobile devices. Nettuts has written a tutorial: How to Send Text Messages with PHP.

There are a myriad of methods to accomplish the task of sending a SMS through a web application. This method is really meant for low volume messaging (most likely less than 1,000 text messages per month) and developers looking to get their feet wet without forking out cash.

Source: http://net.tutsplus.com/tutorials/php/how-to-send-text-messages…

• 0 Comments

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. The article: CSS drop-shadows without images, is a summary of the technique and some of the possible appearances.

There is no need for extra markup, the effect can be applied to a single element. A couple of pseudo-elements are generated from an element and then pushed behind it.

Requirements: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+
Demo: http://nicolasgallagher.com/css-drop-shadows…
License: License Free

• 5 Comments

AddyOsmani has written a really throughout article on Building Single Page Applications(SPAs) With jQuery’s Best Friends; DocumentCloud’s Backbone.js, Underscore.js, LAB.js and jQuery templating.

SPAs are web applications or websites which persistently run in the same page without requiring a reload for further navigation. All of the code needed for your initial load in these applications is driven by either local data or data retrieved from a web server on demand, such as any additional data required from your app that might be driven by user actions.

Requirements: jQuery, Backbone.js, Underscore.js, LAB.js
Demo: http://addyosmani.com/resources/backbonegallery/
License: License Free

• 3 Comments

Webalys has created a Free User Interface Design Framework for Web Designers. It includes GUI library – Hundreds vector elements for interface design, Minimal UI icons set – 260 vector icons for Illustrator, Styles library – 200 styles to apply in Illustrator.

You can now design faster wireframes and create better mockup deliverables in Illustrator. You can customize easily the vectors GUI elements to your own needs : you can easily resize, color or tweak their appearance.

Requirements: -
Demo: http://www.webalys.com/design-interface…
License: License Free

• 3 Comments

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. CSS3 promises to do away with all that! But as we all know, due to Internet Explorer’s lack of support for any of these features, we need CSS3 PIE.

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. CSS3 PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

Requirements: -
Demo: http://css3pie.com/
License: License Free

• 5 Comments

Tutorialzine are teaching us how to build a cross-browser, jQuery Custom Confirm Dialog Replacement. You can choose the text, buttons, and actions that will be executed when they are clicked.

You can customize the appearance of the dialog by modifying jquery.confirm.css. As the message attribute of the dialog takes HTML text, you can further customize it by displaying images and icons in the confirm window. You can even alternatively use this plugin as an alert dialog – you will just need to pass a single button with no action attribute.

Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/12/better-confirm-box…
License: License Free

• 3 Comments