WebAppers

/ best free open source web resources /

Shopify

How to Recreate Samsung Grid Loading Effect

Posted · Category: Gallery, License Free

If you already come across the Samsung Corporate Design Center, you certainly have noticed the stylish Samgsung Grid Loading Effect. The colored background of an item slides in first and when it slides out again to the opposite side, the image is revealed.

The idea is to load grid images showing a swiping animation of a colored element first. For that we’ll dynamically add a division that we’ll color with the most prominent color of the associated image and then we’ll animate that element to reveal the image. We’ll add an animation that looks like the one seen on the Samsung site and we’ll also add two more, a swipe to the bottom and a swipe rotation.

grid

Requirements: -
Demo: http://tympanus.net/codrops/2014/05/15/recreating…
License: License Free

Framer Turns Mockups into Prototypes with Animation

Posted · Category: License Free, Tools

Framer is a JavaScript framework that makes creating realistic prototypes a breeze, complete with filters, spring physics and full 3D effects. Define interactions and create animations in a simple, readable and powerful way.

Framer Generator is a desktop app that imports the resources and folder hierarchy from Photoshop files. Once your visual design is done, import your file with Framer Generator and immediately start to add interaction and animation.

prototyping-toolkit

Requirements: -
Demo: http://framerjs.com/
License: License Free

Quill: Open Source Rich Text Editor with API

Posted · Category: Forms, License Free

Quill was built to address the problem that existing WYSIWYG editors are themselves WYSIWYG. If the editor was not exactly the way you want it, it was difficult or impossible to customize it to fit your needs.

Quill aims to solve this by organizing itself into modules and offering a powerful API to build additional modules. It also imposes no styles to allow you to skin the editor however you wish. Quill also provides all of what you’ve come to expect from a rich text editor, including a lightweight package, numerous formatting options, and wide cross platform support.

quill

Requirements: JavaScript Framework
Demo: http://quilljs.com/
License: License Free

Guide Your Users Through Demo Tour with Shepherd

Posted · Category: Demo Tour, License Free

Shepherd is a JavaScript library for guiding users through your app. It uses Tether, another open source library, to position all of its steps. Tether makes sure your steps never end up off screen or cropped by an overflow. You can easily guide your users through a tour of your app.

shepherd

Requirements: JavaScript Framework
Demo: http://github.hubspot.com/shepherd/docs/welcome/
License: License Free

How to Create a Reading Position Indicator with HTML5

Posted · Category: License Free, Tools

There are some websites that have some kind of an indicator to display the current reading position (how much you have “read”, depending on how far you have scrolled down an article). Generally, such indicators are used on blog posts or long form articles and help readers understand how far they are from finishing the article.

CSS-Tricks has shared an article: Reading Position Indicator, uses a horizontal progress bar as the indicator. But instead of using traditional div/span(s) and some non-linear math to build the indicator, we will use the HTML5 progress element. It is much more semantically accurate and suitable to represent this information, and that too with no complex calculations involved.

progress-indicator

Requirements: -
Demo: http://css-tricks.com/reading-position-indicator/
License: License Free

Test Responsive Websites with Dimensions Toolkit

Posted · Category: License Free, Tools

Are you sick of having to constantly press that refresh button? Well no more. Dimensions Toolkit is compatible with all JavaScript auto-refreshers, so no more incessant button bashing.

Dimensions Toolkit is all for accurate measurements and sizes. We can control the dimensions of the preview by dragging handles, entering specific values manually or choosing from a selection of popular device measurements.

The toolkit is set to the default breakpoints of 320px, 480px, 768px & 1024px. Using the custom breakpoints feature, Dimensions allows you to change these values to anything you desire.

demensions-toolkit

Requirements: -
Demo: http://www.dimensionstoolkit.com/
License: License Free

Payment SVG Webfont Icons for eCommerce Websites

Posted · Category: Icons, License Free

Payment webfont icons set is handy for designing eCommerce websites. It’s an SVG webfont full of icons of main payment systems. It includes Mastercard, Maestro, Visa, Visa Electron, American Express, Postepay, Cartasì, Diners Club, Discover, Union Pay, Electronic Cash, TrustE, Amazon, JCB Google Wallet, Stripe, Square, Ogone, VeriSign, Bitcoin (2 glyphs), Ripple, Sofortüberweisung, Gittip, Flattr, Skrill Moneybookers, Cartes Bancaires CB.

payment-webfont-icons

Requirements: -
Demo: https://github.com/orlandotm/payment-webfont
License: License Free

Extract Every Layers from PSD with Project Parfait

Posted · Category: License Free, Tools

Project Parfait is an experimental service for designers and developers, who turn Photoshop comps into code-based designs. It lets you quickly and easily extract what you need from a PSD comp.

Project Parfait lets you do the following directly in your browser: Extract color, gradient and font info from a PSD, Copy text and CSS, Get accurate measurements between elements, Export production-ready optimized images.

Project Parfait is ideal for developers and designers who regularly receive Photoshop comps, and translate them into code-based designs. It makes it easier to extract vital information from PSDs. Developers working on native iOS, Android, Mac, and Windows applications may also find Project Parfait valuable.

parfait

Requirements: -
Demo: https://projectparfait.adobe.com/
License: License Free

Raindrop Makes Bookmarks More Vivid and Functional

Posted · Category: License Free, Tools

Raindrop makes bookmarks more vivid and functional. Save important pages, articles, video or photo in one click. Organize collection contents and share with friends.

Raindrop saves not just bookmarks but associated content depending on page type. If it’s an article, it will be cut and saved with the bookmark. The same applies to video, photo and presentations. So you can organize thematic collections with different content. Collections can be made public and used in your application or a website using API.

smart-bookmark

Requirements: -
Demo: http://raindrop.io/
License: License Free

How to Create Fluid Type with CSS Smarts

Posted · Category: Fonts, License Free

Keeping your type at comfortably readable line lengths can be quite a challenge with responsive design. When viewports can be nearly any size under the sun, it can feel like we’re going to need a whole lot of media queries and coaxing to keep our type in check. We want our type to be stretchy, but not too stretchy, and we want it to look good across the board.

Today, designer Val Head builds a demo to show us how to create Readable, Fluid Type With Basic CSS Smarts for all screen sizes and resolutions without a dev’s expert assistance and without a lot of complex code.

Centered, single text-column layouts are quite popular these days and are exactly the sorts of layouts that suit simple techniques to keep your type flowing flexibly and within a safe range. Beautiful, fluid type with less work.

responsive

Requirements: -
Demo: http://typecast.com/blog/readable-fluid-type-with-basic-css-smarts
License: License Free

Page 7 of 97«34567891011»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons