WebAppers

/ best free open source web resources /

Shopify

30 CSS3 Progress Bars 100% Free for Download

Posted · Category: License Free, Upload

Galen Gidman has made a set of 30 CSS3 Progress Bars – each it’s own color. He is offering them as a 100% free download. Those progress bars were using no images what-so-ever… just CSS3. You can use them wherever you like, even in commercial projects.

You can also check out Pure CSS Progress Bar with Animation and CSS Javascript Progress Bar we mentioned before. I am sure they will be useful when creating web applications.

css3-progress-bar

Requirements: CSS3 Supported Browsers
Demo: http://lab.galengidman.com/progress-bars/
License: License Free

Checking Quality of Your Code with Holmes.CSS

Posted · Category: License Free, Tools

The holmes.css is useful for checking the quality of your code (up to W3C HTML5 standards), nitpicking over ensuring markup is valid and semantic and accessility guidelines are met, and when you are tasked to fix up and debug an old, OLD website.

The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as: Missing required attributes on tags, Potentially improvable markup, Deprecated and Non-W3C Elements and Non-W3C Attributes.

css-markup-detective

Requirements: –
Demo: http://www.red-root.com/sandbox/holmes/
License: License Free

Create HTML5 Digital Publications with Laker

Posted · Category: Information, License Free

Laker is a compendium of files, styles and tips for designing digital publications in HTML5. This development guide shall help you solving some of the common problems when designing and building a digital publication with HTML5. It provides you with all information about files, scripts, styles etc. used in Laker.

Laker uses a customized version of the “Baker ebook framework” for producing an iOS app. It basically reads a bunch of HTML files and displays them one after another. Designing pages and adding interactivity is all done in HTML5. That makes it more accessible and cheap to develop, because you do not need any proprietary software.

html5-publications

Requirements: –
Demo: http://www.lakercompendium.com/
License: License Free

WhatFont Tool Bookmarklet and Chrome Extension

Posted · Category: Fonts, License Free, Tools

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

WhatFont Tool can easily get font information about the text you are hovering on. There is a Bookmarklet and Chrome Extension available for download. I am sure it will make web designer’s life much easier.

what-font-used

Requirements: –
Demo: http://chengyinliu.com/whatfont.html
License: License Free

A Toolset For Managing Screen Resolutions

Posted · Category: License Free, Tools

With the increasing demand for unique mid-screen devices, it is becoming an even more arduous task to keep all of the device resolutions and screen sizes straight. So Punchcut has packaged up their Toolset For Managing Screen Resolutions, that help them stay current and they are offering it for download.

It contains a collection of Photoshop CS5 marquee-tool presets for common screen resolutions. These cover both fixed-screen resolution sizes and ratios for less common resolutions that fall within standard ratios. It also contains a collection of layered Photoshop CS5 PSDs each providing common devices for comping and design presentations.

screen-resolutions

Requirements: –
Demo: http://punchcut.com/perspectives/expanding-universe-toolset…
License: License Free

39 CSS3 Box Shadows Effect for Google Chrome

Posted · Category: Information, License Free

Box-shadow is a pretty powerful property in modern browsers. With just six little values, you can make some really neat stuff. How much neat stuff, you ask? The result is 39 Ridiculous Things To Do With CSS3 Box Shadows that, due to whatever issues, can only be viewed in Chrome 11 or better.

You can navigate with the arrow keys, and he has moved the CSS for each object into the object HTML, which should make it easier to look at particular effects.

css3-box-shadow

Requirements: Chrome Browser
Demo: http://www.viget.com/uploads/file/boxshadows/
License: License Free

HTML5 Music & Audio Solutions for jQuery

Posted · Category: GPL License, License Free, Sound

Speakker is a crossbrowser Audio solution featuring HTML5. It comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors and two different button sets for light and dark themes. Easy to set up. Just a few lines of Javascript and a quantum CSS.

speakker

You can also check out HTML5 Music Portfolio Template with jQuery. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The artist albums are shown using the jCarousel plugin and the user can add song samples to the play list and reorder the songs by dragging them.

music-portfolio-jquery

Requirements: jQuery Framework
Demo: http://www.speakker.com/demo/
License: GPL License
Demo: http://tympanus.net/Development/MusicPortfolioTemplate/
License: License Free

CSS3 Image Gallery with 3D Lightbox Animation

Posted · Category: Gallery, License Free

Having been inspired to get ‘Hardboiled’, Tom Kenny has started playing around with a few cool techniques and exploring how to make the content accessible in less capable browsers while giving the best possible experiences to the ones that support the latest advancements in CSS.

He has Create a CSS3 Image Gallery with a 3D Lightbox Animation by taking Benjamin’s CSS lightbox gallery and built upon by adding a few hover effects for the gallery grid itself and a 3D rotation for the lightbox content, all with the use of CSS.

css3-3d-gallery

Requirements: jQuery Framework
Demo: http://inspectelement.com/demos/css3/3dgallery/
License: License Free

Three.js: A Lightweight JavaScript 3D Engine

Posted · Category: Framework, License Free

Three.js is a lightweight Javascript 3D Engine with a very low level of complexity – in other words, for dummies. The engine can render to the typical 2D , the new WebGL 3D , and . With 20 lines of code, you can easily create a camera, then create a scene, add a cube on it, create a renderer and add its viewport in the document.body element.

3d-javascript

Requirements: –
Demo: https://github.com/mrdoob/three.js/
License: License Free

How to Create an Animated Scroll to Top Button

Posted · Category: Information, License Free

Nick La has written a detail tutorial on how to create an Animated Scroll to Top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top.

Note the back to top button is linking to anchor #top which is the ID of the <body> tag. Technically speaking you don’t need to assign any anchor link because jQuery can scroll the page to any position. However, it is nice to include it because it provides a fallback if Javascript is not supported.

animated-scroll

Requirements: jQuery Framework
Demo: http://webdesignerwall.com/tutorials/animated-scroll-to-top
License: License Free

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

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons