WebAppers

/ best free open source web resources /

Graphic Resources

Create Folded Paper Effect in JavaScript and CSS3

Posted · Category: CC License, Tools

Paperfold CSS takes a dom element, slices it into parts and arranges them like a folded paper in 3d space. It was a proposal for a visual folding-effect for hidden comments. It works best on Chrome and Safari. In Firefox there are still gaps in the folds (probably because of rounding). It is built using JavaScript, HTML5, CSS3, and released under Creative Commons License.

paper-folding

Requirements: –
Demo: https://developer.mozilla.org/en-US/demos/detail/paperfold-css…
License: Creative Commons License

Create Your iOS App Icon with App Icon Template

Posted · Category: License Free, PS Tutorials

iOS App Icon Template is an App Icon Template that, through Smart Objects in Photoshop, attempts to automate the process of rendering the various sizes that needs to be bundled with iOS Apps.The idea is to edit the largest size and have the smaller sizes automatically rendered enabling a much quicker workflow when designing icons. You’ll also find a selection of ready-made textures that you can build on and easy export actions that spit out the exact files you need to deliver to Apple.

You’ll need Photoshop CS2 or later. Open the PSD file in Photoshop. Find and right click the layer called ‘EDIT THIS SMART OBJECT’ and hit ‘Edit Contents’. This opens the Icon.psb file – create your artwork in this canvas. After saving the Icon.psb, the multiple sizes in the Main PSD file should be automatically rendered. Use the Photoshop Actions bundled with the resource to export your icon files in both squared and rounded corner versions.

app-icon-template

Requirements: Photoshop
Demo: http://appicontemplate.com/
License: License Free

Present Clients Different Interface Choices with Style Tiles

Posted · Category: CC License, Tools

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.
An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups? Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.

style-tiles

Requirements: –
Demo: http://styletil.es/
License: Creative Commons License

Gumroad – A New and Pretty eCommerce Platform

Posted · Category: eCommerce, License Free

If you are a creative person, you create a lot of content. But most of it sits, archived, on some computer somewhere for the rest of time. It’s either too hard, or too time-consuming, or it doesn’t even make sense to put in a store! Gumroad is a relatively new eCommerce platform that let you easily sell the stuff you haven’t been able to, yet.

You can price a link for as little as $1, and as much as $1,000. They support all major credit cards. That includes Visa, MasterCard, American Express, Discover, JCB, and Diners Club cards. They take 5% + $0.30 of each transaction. There are no setup fees, no monthly fees, and no bandwidth fees.

You can also take a look at other Open Source Ecommerce Platforms we mentioned some time ago.

gumroad

Requirements: –
Demo: https://gumroad.com/
License: License Free

Build Your Mobile Native Games with HTML5 and JavaScript

Posted · Category: Framework

Spaceport helps you build beautiful high-performance games and run them as native apps. Spaceport uses OpenGL to accelerate rendering on native devices. With Spaceport’s graphics engine, you use versatile and efficient vector graphics formats instead of bloated sprite sheets. Doing so minimizes the size of asset downloads and drastically reduces loading times.

Spaceport leverages universal web standards like HTML5 and Javascript to deliver remarkably consistent gaming experiences across platforms. Spaceport allows you to create dynamic online games for multiple devices without a large development team. Better yet, Spaceport is completely free to use. Only pay if your game makes you money.

spaceport2

Requirements: –
Demo: http://spaceport.io/
License: See Agreement

Panning and Zooming Panoramic Images with PanoJS3

Posted · Category: License Free, Tools

PanoJS3 is an interactive JavaScript widget for panning and zooming a panoramic image stitched together dynamically from smaller tiles. This widget can be used for viewing images that are much larger than the available space in the browser viewport. Examples include panoramas, maps or high resolution document scans.

PanoJS3 supports native navigation on most popular platforms: PCs, Macs, Mobile devices with touch interfaces, Phones and tablets. It has been tested on Chrome 3+, Safari 3+, FireFox 2+, Internet Explorer 8+, Opera 9+.

panojs3

Requirements: JavaScript Enabled
Demo: http://www.dimin.net/software/panojs/
License: License Free

Intuitive Timeline jQuery Plugin from Different Sources

Posted · Category: Charts, GPL License

There are lots of timeline tools on the web but they are almost all either hard on the eyes or hard to use. The goal is to create timelines that are at the same time beautiful and intuitive for users.

Timeline is great for pulling in media from different sources. Just throw in a link from Twitter, YouTube, Flickr, Vimeo, Google Maps or SoundCloud and Timeline will format it to fit perfectly. More media types will be supported in the future. Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.

timeline

Requirements: jQuery Framework
Demo: http://timeline.verite.co/
License: GPL License

Control Gestures on Touch Devices with jQuery Plugin

Posted · Category: License Free, Tools

Hammer.js is a javascript library (that depends on jQuery) that can be used to control gestures on touch devices. It supports the following gestures: Tap, Double Tap, Hold, Drag, and Transform. It is lightweight with only 2kb.

Hammer.js has been tested on iPad1 with iOS5, iPhone4 with iOS5, Samsung Galaxy S with Android 2.3.3 and Google Chrome 17. On a desktop browser the mouse can be used to simulate touch events with one finger.

touch-gesture

Requirements: jQuery Framework
Demo: http://eightmedia.github.com/hammer.js/
License: License Free

Define Your Custom Scroll Path with jQuery Scroll Path

Posted · Category: MIT License, Tools

jQuery Scroll Path is a plugin that lets you define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initating the plugin.

Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.

jQuery Scroll Path also allows rotating the entire page, using CSS transforms. This can be done either along a path, or around the current position. In browsers without CSS transform support, all rotations are ignored, but paths are still followed. This means the plugin works with graceful degradation in all browsers.

jquery-scroll-path

Requirements: jQuery Framework
Demo: http://joelb.me/scrollpath/
License: MIT License

Dynamic Grid Layout Plugin for Pinterest-like Websites

Posted · Category: Framework, MIT License

Pinterest is getting very popular recently. Would you like to design a website with layout like Pinterest? The Wookmark jQuery Plugin is designed for laying out a dynamic grid of elements similar to jQuery Masonry. The Wookmark plugin detects the size of the window and automatically organizes the boxes into columns. You can resize your browser to see the layout adjust.

You can either set the width and height of all images in the HTML img attributes. The grid layout can be performed as soon as the document is rendered, before images are loaded. Or you can perform the grid layout after all images are loaded if the width and height of the images is not known.

You can also check out 15 Great Examples of Websites using Dynamic Grid Layout we have published some time ago. It gives you some ideas when creating such websites.

grid-layout

Requirements: jQuery Framework
Demo: http://www.wookmark.com/jquery-plugin
License: MIT License

Page 154 of 312...«150151152153154155156157158»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons