WebAppers

/ best free open source web resources /

Shopify

Free Download: Vector UI Kit for iOS 8

Posted · Category: License Free, PS Tutorials

Apple’s UI changes from iOS 7 to iOS 8 are often subtle, yet incredibly extensive. Spacing, positioning, and font sizes and weights were liberally tweaked and adjusted. To our surprise, almost every icon was redrawn as well. Even the lowly chevron and back arrow were reworked.

Mercury has released free vector UI kit for iOS 8. This file is compatible with Adobe Illustrator CC and newer. They’ve focused on making this file pixel-perfect. Everything is on a pixel, when possible, so that all assets are sharp and clean. They have also grouped like elements together so that it’s easy for you to grab an asset and drag it to your file or do isolated editing.

free-ios-8-ui-kit

Requirements: Photoshop
Demo: http://mercury.io/blog/ios-8-illustrator-vector-ui-kit-update
License: License Free

Create 360° Interactive Image Rotator with Rollerblade.js

Posted · Category: Gallery, License Free

With Rollerblade, you can easily give your webpage visitors a great 360° viewing experience with your products, images, or anything else you can think of. Rollerblade targets a container element with an image element inside that has the class of “rollerblade-img”. Make the src of the image the path to the first image in your rotator.

Rollerblade.js works on desktops, tablets, and smartphones (touch enabled). For all mobile devices, the rollerblade rotator will be activated when a user slides their finger from left to right. Image preloading is used to cache the images from your array to make sure the rotator performs as fast as possible. Rollerblade.js works well in IE9+.

rollerblade-js

Requirements: JavaScript Framework
Demo: http://www.iamapioneer.com/plugins/rollerblade/
License: License Free

Official iPhone 6 Plus and Apple Product Images

Posted · Category: License Free, PS Tutorials

Apple has released iPhone 6 and iPhone 6 Plus a couple of days ago. There are thousands of developers around the world have helped make the App Store a success. Apple has created some guidelines so developers can benefit from the Apple identity and contribute to its strength. They have released a set of official apple product images.

To display your app on Apple products, use the product images provided. Vertical and horizontal images are provided for each approved product color. Overlapping product images are provided for presentation of multiple Apple products on a single layout. The screen on the Apple product is blank so that you can display your app in the screen area.

apple-images

Requirements: -
Demo: https://developer.apple.com//app-store/marketing/guidelines/#images
License: License Free

Image Comparison Slider with CSS3 and jQuery

Posted · Category: Gallery, License Free

Image Comparison Slider is a handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery. When you create a product page, there are some effective UX solutions that can be used to make the user ‘feel’ the product.

A comparison image slider is one of those. If you look at the Sony Ultra HD TV product page, they use this approach to emphasize the difference between their display resolution and a standard one. Google uses it to show how cool is a Google+ Photos filter.

image-comparison

Requirements: CSS3 and jQuery Framework
Demo: http://codyhouse.co/demo/image-comparison-slider/index.html
License: License Free

The Most Complete iOS Design Kit You’ve Ever Seen

Posted · Category: License Free, PS Tutorials

InVision are obsessed with helping people become better product designers, thinkers, and creators of web and mobile products. That’s why they are so excited to introduce you to TETHR.

TETHR is the most beautiful, complete iOS design kit you’ve ever seen, and it also happens to be free. The kit features retina-ready, clean modern designs that can be mixed and matched to simply create beautiful iPhone interfaces. It includes 8 PSD files, 138 templates, and more than 250 individual components.

ios-design-kit

Requirements: -
Demo: http://www.invisionapp.com/tethr
License: License Free

Modern and Subtle Tab Styles for Your Inspiration

Posted · Category: Inspiration, License Free

Codrops has shared a couple of modern and subtle tab styles and effects for your inspiration. They use pseudo-elements, SVGs and CSS transitions for some of the techniques.

This Tab Styles Inspiration collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box and you’ll see how interesting the usually boring tabs can become.

tab-styles-inspirations

Requirements: -
Demo: http://tympanus.net/Development/TabStylesInspiration/
License: License Free

Picdeck – Tweetdeck-style Viewer for Instagram

Posted · Category: License Free, Tools

Picdeck is a Tweetdeck-style viewer for Instagram. Simply add columns for hashtags and users you want to follow and BAM! Photos start streaming in. Picdeck allows you to set-up individual columns for users and hashtags to monitor images as they get posted. Also the site is about as responsive as a rock.

instagram-deck

Requirements: Instagram Account
Demo: http://picdeck.co/
License: License Free

Awesome CSS Loading Effects for Grid Layout Images

Posted · Category: Gallery, License Free

TutsMix has shared with us some cool CSS loading effects for grid images. You can use them on your portfolio, blog, or anywhere you want. The setup is quite simple. We use Normalize.css as an alternative to the traditional CSS reset, ZURB Foundation to create a responsive grid, Masonry to create a dynamic grid layout, imagesLoaded to check if the images have been loaded, and Infinite Scroll by Paul Irish to load more images and append them to the gallery.

css-grid-loading-effects

Requirements: JavaScript Framework
Demo: http://tutsmix.com/demo/cool-css-loading-effects-for-grid-images/
License: MIT License

A Simple Responsive Charting Library Built with SVG

Posted · Category: Charts, License Free

Chartist.js is a simple responsive charting library built with SVG. Chartist’s goal is to provide a simple, lightweight and non-intrusive library to responsive craft charts on your website. It’s important to understand that one of the main intentions of Chartist.js is to rely on standards rather than providing a own solution to the problem which is is already solved by the standard.

Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist is not providing it’s own event handling, labels, behaviors and anything else that can just be done with plain HTML, JavaScript and CSS.

chartist

Requirements: JavaScript Framework
Demo: http://gionkunz.github.io/chartist-js/
License: License Free

Twibble.io – Publish Content from RSS to Twitter Easily

Posted · Category: License Free, Tools

Twibble.io gives you a better way to easily publish content from any RSS feed to Twitter with beautiful imagery in each and every tweet. They automatically pulls featured images and embeds them into each tweet. No fuss. Just beautiful media in each and every tweet.

Their advanced scheduling system allows you to create custom tweet schedules. Tweet every hour, only on certain days or even specific times. Now you can spend more time on the things that matter.

twibble

Requirements: -
Demo: https://twibble.io/
License: License Free

Page 1 of 96123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons