WebAppers

/ best free open source web resources /

Shopify

How to Create BonBon Buttons with CSS3

Posted · Category: Buttons, License Free

BonBon Buttons are sweet CSS3 buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. There are 3 different materials. A “mate”, “glossy” and a “glass” version. The difference of the later two is that the glass version adds a dark blurry text-shadow which makes it look like you can see trough the button to its bottom.

However, BonBon Buttons are not meant to be used on your next project that targets the average internet user. He just wanted to show a couple techniques how to use some of the new CSS3/HTML5 features. So only the current version of Safari, Chrome and Firefox are supported.

css3-buttons

Requirements: CSS3 Support
Demo: http://lab.simurai.com/css/buttons/
License: License Free

How to Implement an Ajax Appreciate Badge

Posted · Category: License Free, Polls

When you publish something online, there are not that many ways to determine whether people like what you have to say. Comments, the cornerstone of blogging, are too demanding, and users often prefer not to post one.

If you’ve dropped by Behance, you’ve probably noticed their appreciate badge, which is a neat solution to this exact problem. With it people share their appreciation for somebody’s work. Tutorialzine taught us how to implement An AJAX Click to Appreciate Badge, which you can include in every page of your website with a bit of jQuery magic.

appreciate-badge

Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/07/click-to-appreciate-badge…
License: License Free

How to Add Finger-Swipe Support to Webpages

Posted · Category: Framework, License Free

One of the more interesting and fun aspects of iPad usage is the ability to effect change in a webpage by swiping a finger across the screen of the iPad. For example, swiping to the left to navigate to the next page in a series of pages, or swiping to display the next image in a series of images. For iPad users, these actions are intuitive and natural.

However, for those who compose webpages, adding touch detection to a page can be a challenging and difficult process. No more. The information presented on Padilicious: Add Finger-Swipe Support to Webpages, will make it easy to add touch sensing to your pages, requiring only a minimum of JavaScript coding on your part.

touch-script

Requirements: –
Demo: http://padilicious.com/code/touchevents/basicswipe.html
License: License Free

Useful Hover-based User Interface with jQuery, CSS3, HTML5

Posted · Category: License Free, Menu

AddyOsmani is going to teach us how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? With the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, there’s room for us to look into ways of making it even easier for people to use sites in desktop-based browsers too.

WanderWall achieves that and what it could easily be used for a portfolio or business site but the concepts we’ll learn could certainly be used to expand the idea further.

hover-interface

Requirements: jQuery Framework
Demo: http://www.addyosmani.com/resources/wanderwall…
License: License Free

126 Circular & Rounded Vector Social Media Icons

Posted · Category: Icons, License Free

Buddycons Icon Set includes includes 126 vector social media icons. Included in the set are PNG versions of all 126 icons in both circular and rounded variations as well as a vector source file for easy resizing.

The original .ai file is included in the download! In order to be able to edit the raw files you will need a vector based editing program such as illustrator. Feel free to use the icons for both personal and commercial projects without attribution. You are free to modify them as you wish to suit your needs.

vector-social-icons

Requirements: –
Demo: http://www.webdesignerdepot.com/2010/08/buddycons…
License: License Free

Animated Table Sort with REGEXP Friendly

Posted · Category: License Free, Tables

Animated Table Sort is a plugin that allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

animated-table-sort

Requirements: Javascript Enabled
Demo: http://www.mitya.co.uk/scripts/Animated-table-sort…
License: License Free

Stylish Simple Navigation with jQuery & CSS3

Posted · Category: License Free, Menu

Everyday on the web there’s something that we all do, almost regardless of the site that we’re on – we scroll down. In every case we need to scroll back up to the top of the page if we want to use the site navigation again or perform a site search. RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.

RocketBar consists of two main components – the first is the jQuery code that powers it, adding the floating class and attributes to the bar that make it appear ‘detached’ when the user scrolls up and down the page. The second element are the CSS3 buttons you find along the bar.

rocketbar

Requirements: jQuery Framwork
Demo: http://addyosmani.com/blog/rocketbar/
License: License Free

How to Create a Gallery with Scrollable Thumbnails

Posted · Category: Gallery, License Free

Thumbnails Navigation Gallery with jQuery tell us how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style.

The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right. When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.

thumbnail-gallery

Requirements: –
Demo: http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
License: License Free

How to Build a Custom HTML5 Video Player with jQuery

Posted · Category: License Free, Video

As professional web designers, we want to create a video player that looks consistent across browsers. Each browser however provides its own different look and feel for the player, from the minimal approach of Firefox and Chrome, to the more shiny controls of Opera and Safari. If we want our controls to look the same across all browsers, and integrate with our own design, we’ll have to create our own controls from scratch. This is not as hard as it seems.

All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

Article: Building a custom HTML5 video player with CSS3 and jQuery taught us how to build an easily customizable HTML5  <video> player, including packaging it as a simple jQuery plugin, choosing control types and outputting custom CSS for your own situation.

html5-video-player

Source: Building a custom HTML5 video player with CSS3 and jQuery

Adds Notes Below Input Fields Based on Regex Patterns

Posted · Category: Forms, License Free

InputNotes jQuery Plugin automatically adds notes below textareas and input fields based on regex patterns. The patterns are normal JavaScript regex patterns and you are free to create and style any type of notes and note texts as you want. Note texts can contain HTML. It has been tested on IE 6 and 7, Firefox 3.5, Safari 4, Google Chrome, Opera 9.6.

input-notes

Requirements: jQuery Framework
Demo: http://fredibach.ch/jquery-plugins/inputnotes.php
License: License Free

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

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons