WebAppers

/ best free open source web resources /

Shopify

An Interactive Drag and Drop Coloring Experiment

Posted · Category: Color Schemes, License Free

Interactive Drag and Drop Coloring Concept is a little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it like sections or texts. You might have encountered customization tools before, but Codrops wanted to add some fun to this idea and make it enjoyable to use.

You can drag a color from the color palette and drop it on any area that lights up with a blue outline, including text elements. Once the droplet that you are dragging gets dropped on a content area, a fun little Google Material like animation happens and the whole area gets filled with a colored circle. For that effect we use an SVG element that we create on the fly and then scale it up and fade it in with a CSS transition.

coloring

Requirements: –
Demo: http://tympanus.net/Development/InteractiveColoringConcept/
License: License Free

Simple Autocomplete Widget with Zero Dependencies

Posted · Category: Forms, MIT License

Awesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. You can simply add awesomplete for it to be automatically processed (you can still specify many options via HTML attributes) Otherwise you can instantiate with a few lines of JS code, which allow for more customization. Awesomplete is released under the MIT License.

awesomplete

Requirements: JavaScript Framework
Demo: http://leaverou.github.io/awesomplete/
License: MIT License

Type.js – Take Finer Typographic Control on the Web

Posted · Category: Fonts, License Free

Type.js is a typography tools for better web type. It allows you to write new CSS properties to take finer typographic control of type styles on the web. Set up is simple. Upload type.js to your site, and link it in your HTML, just before the end of the body.

Next, add a style tag before the script, and write these new CSS properties just like you would any other styles. You can also manually adjust the space between two specific glyphs with a simple syntax. You can also set rules for where lines will to break in a paragraph.

Screen Shot 2015-03-19 at 12.31.05 am

Requirements: JavaScript Framework
Demo: http://typejs.org/
License: License Free

A Minimal and Customizable Contact Form

Posted · Category: Forms, License Free

Codyhouse has just shared a minimal and customizable snippet to throw a semantic form into your web projects on the fly. There are some optional features (i.e. floating labels) that can be easily removed in case you want the form to be simpler. We included all common form elements like radio buttons, checkboxes, select, error messages etc.

Screen Shot 2015-03-17 at 12.25.30 pm

Requirements: CSS and JavaScript
Demo: http://codyhouse.co/demo/contact-form/index.html
License: License Free

EventRay UI Kit – Layouts & UI Elements for Web & Mobile

Posted · Category: License Free, PS Tutorials

EventRay UI Kit is a free ready-to-use interface kit includes multiple layouts and UI elements designed for Web and Mobile use. All you need to do is download this ui kit, simply plug it in and take it for a spin. You can check out the full preview on behance.

eventray-ui-kit

Requirements: –
Demo: http://dtailstudio.com/#work
License: License Free

Fresh Button Styles and Effects for Your Inspiration

Posted · Category: Buttons, License Free

Codrops has shared a collection of fresh button styles and effects for your inspiration. They use CSS transitions and pseudo-elements for most of the effects. What they all have in common is simplicity and effect subtleness. They tried to create a balanced set where they don’t animate too much but try to add a sensible effect that goes along with colors and shapes. Some of the styles are a bit bolder — they might fit into some special designs.

button-effect

Requirements: –
Demo: http://tympanus.net/Development/ButtonStylesInspiration/
License: License Free

Subway Icon Set – 306 Pixel Perfect Crafted Icons

Posted · Category: CC License, Icons

Subway Icon Set is a set of 306 pixel perfect crafted icons optimized for: iOS, Windows Phone, Windows 8 and BlackBerry 10. They are delivered in PNG, SVG, XALM, PSD, CSH, SKETCH, PDF, AI and EPS format. They are licensed under Creative Commons 4.0 License.

subway-icon-set

Requirements: –
Demo: https://github.com/pixle/subway
License: Creative Commons 4.0 License

Stocksnap – High Quality Free Stock Photos

Posted · Category: CC License, Stock Photos

StockSnap is the best place on the internet to find beautiful free stock photos. They select nothing but the highest quality, highest resolution pictures and add them to their database on a daily basis. This is not your typical crappy stock photo site.

All photos uploaded to the site are released under Creative Commons – CC0 and do not require attribution. No more hassle trying to figure out whether you can use photos for commercial use and whether you need to provide attribution.

beautiful-free-stock-photos

Requirements: –
Demo: https://stocksnap.io/
License: Creative Commons License

How to Create Animated Text Fills and Strokes

Posted · Category: Fonts, License Free

Codrops has shared a tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG. In the article: How to Create (Animated) Text Fills, there are five ways to create patterned filled text.

In three out of these five cases we will retain the ability to select the text. For each of the techniques it shows the browser support, the ability to select text and, most importantly, the possibility to animate the fill (highly experimental).

text-animation

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

Free Download: 40 Flat Icons from Squid Ink

Posted · Category: Icons, License Free

Squid.ink Flat Icon Pack offers 2000 handcrafted, consistent and pixel-perfect icons ready to use. The icons have been specially built to match the current design trends and to help you expand on your projects. This beautiful icons are perfect to create a unique design experience.

They are happy to share with you 40 of their best icons from Squid.ink Flat Icon Pack. It includes PSD files for 32px & 64px Icons, PNG files for 32px & 64px Icons, SVG files for 32px & 64px Icons, AI & EPS vector files. Big thanks to Squid.ink for providing us with this wonderful freebie! Be sure to check out their full pack of 2000 flat icons here.

Squid_Ink_Dribbble_Shot

Free Download: Click to Download icons

Page 1 of 56123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons