WebAppers

/ best free open source web resources /

Shopify

Apple iPad GUI in PSD Format using Vectors

Posted · Category: Information, License Free

Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. That’s why Geoff Teehan created iPad GUI PSD for us.

The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.

ipad-gui-psd

Source: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

Protect Your Email Address with PHP Hide_Email()

Posted · Category: License Free, Tools

PHP hide_email() is a PHP function to protect the E-mail address you publish on your website against bots or spiders that index or harvest E-mail addresses for sending you spam. It uses a substitution cipher with a different key for every page load.

PHP hide_email() encrypts your E-mail address and generates the javascript that decrypts it. Most bots and spiders can’t execute javascript and that is what makes this work. A visitor of your web page will not notice that you used this script as long as he/she has javascript enabled. The visitor will see “[javascript protected email address]” in stead of the E-mail address if he/she has javascript disabled.

You can also use the generator if you have no PHP support on your web server. Change the E-mail address into your own E-mail address and press “Generate”. Cut and paste the generated XHTML into your own web page.

php-hide-email

Requirements: -
Demo: http://www.maurits.vdschee.nl/php_hide_email/
License: License Free

Sublime Video – A HTML 5 Video Player

Posted · Category: License Free, Video

Sublime Video is a HTML5 Video Player, users can play videos without the need of browser plugins or Flash dependencies. It supports Full-window mode with sleek zoom-in/out transitions. There are more advanced controls on a draggable pane. Sublime Video will be soon released for free (at least for non-commercial use).

html5-video

Requirements: Safari 4.0.4+, Google Chrome 4.0+, IE with Chrome Frame
Demo: http://jilion.com/sublime/video
License: License Free

A Free Set of Social Media Icons in Vector Format

Posted · Category: Icons, License Free

We have got Circular Social Media Icons and The Social Network Icon Pack already, however they are all in PNG format only. How about a free set of Social Media Icons in Vector? IconDock released a set of 50 Vector Social Media Icons of the most popular social media networks on the internet.

The icons are designed in 32px and 16px vector format. With the vector format, you can scale the icon to any size to fit with your design or use it in high quality print materials. What you will get from the zip package: 32px and 16px in three different file formats: vector EPS, PNG, and GIF. What more can you ask for?

vector-social-media-icons

Requirements: -
Demo: http://icondock.com/free/vector-social-media-icons
License: License Free

How to Create Dynamic Tabs with jQuery

Posted · Category: License Free, Menu

When we talk about tabs on web we usually think about tabs used for navigation. However, in this case we want to use them for showing different entities on the same page. We will try to simulate tabs as seen in browsers. Take Google docs for example, instead of opening each document in a new window (or browser tab), you could open them in page tabs.

Janko has written a throughout tutorial that shows you How to Use jQuery to Create Dynamic Tabs that can be added and removed dynamically. He has also mentioned how to use tabs and in which context should they be used in order to make them meaningful and usable.

page-tabs-jquery

Requirements: jQuery Framework
Demo: http://www.jankoatwarpspeed.com/examples/dynamic_tabs/
License: License Free

31 Shiny Realistic Icons Free for Download

Posted · Category: Icons, License Free

Shine has 31 icons ranging from 24px square icons to 128px square icons. With the fresh color scheme combines with prominent realistic shapes, Shine will make your websites and interfaces really stand out from the crowd. Shine is shipped in two versions: vector and pixel sets.

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes.

free-icons

Requirements: -
Demo: http://iconeden.com/icon/shine.html
License: License Free

Create a MS Excel Style Spreadsheet with jQuery.sheet

Posted · Category: License Free, Tables

jQuery.sheet gives you all sorts of possibilities when it comes to giving your web application a spreadsheet style interface with MS Excel style calculations.

jQuery.sheet addresses the web-based spreadsheet or “websheet” in a different, simple, approach – using html, you simply load the sheet from a url, and you save it to a url. jQuery.sheet manages the sheet creation, viewing, and editing processes, you simply build your application around it.

jQuery.sheet is also theme-able, using jQuery UI ThemeRoller, so you make the spreadsheet look like you want. For a complete list of all the MS Excel style functions that jQuery.sheet supports, take a look at the Demo, which is the documentation.

jquery-spreadsheet

Requirements: jQuery Framework
Demo: http://jqueryplugins.weebly.com/jquerysheet.html
License: License Free

How to Build the New Visual Annotations with CSS3

Posted · Category: License Free, Tooltips

ZURB has taught us How to Build the New Visual Annotations. The solution was not technically too complex. With Notable, they have embraced the concept of graceful degradation: they take advantage of new CSS techniques that degrade cleanly to older browsers.

The note overlays are composed of two main elements, an outer border div and an inner overlay div. The trickiest piece, and most fun, was actually the gradient on the border. They didn’t want to use a canvas knockout so instead they used border-image, which is a really versatile but slightly tricky CSS property.

The basic gist of border-image is that you can set an image of your choosing as the overlay for the border of an object, but the truth is quite a bit more complicated.

new-annotations

Requirements: CSS3 Support
Demo: https://zurb.notableapp.com/website-feedback/10696…
License: License Free

How to Create Facebook Style Footer Admin Panel

Posted · Category: License Free, Menu

The popularity of social media has been booming in the past few years and Facebook definitely has climbed high to the top of the social network rankings. Facebook has many Ajax driven features and applications that are very impressive, and one of the things is the footer admin panel, where it neatly organizes frequently used links and applications.

SohTanaka has created a tutorial about how to recreate the Facebook Style Footer Admin Panel with CSS and jQuery Part I and Part II. The footer panel can be useful for admin driven applications and much more. There are many useful techniques like the fixed footer, CSS tooltips, height calculation function, and multiple toggle function, that can be used in various ways for your future projects.

facebook-admin

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/footer-panel/
License: License Free

Sleek Event Timeline with PHP, MySQL, CSS & jQuery

Posted · Category: Calendar, License Free

Tutorialzine has just showed us how to make an Advanced Event Timeline with the help of PHP, MySQL, CSS & jQuery, that will display a pretty time line with clickable events. Adding new events is as easy as inserting a row in the database.

The main idea is that we have two divs – timelineLimiter and timelineScroll positioned inside it. The former takes the width of the screen, and the latter is expanded to fit all the event sections that are inserted inside it. This way only a part of the larger inner div is visible and the rest can be scrolled to the left and right by a jQuery slider.

Now you can create a sleek event timeline that you can modify to showcase the important events that mark your days. It is easily modifiable and you are free to use it in your or your clients’ projects.

event-timeline

Requirements: PHP, CSS and jQuery Framework
Demo: http://demo.tutorialzine.com/2010/01/advanced-event-timeline…
License: License Free

Page 59 of 96...«555657585960616263»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons