Category Archives: Design

icomoon.io – best way to make a custom web font

Like it says on the intro “Custom built and crisp icon fonts, done right”

Why IcoMoon? / icomoon.io /

Build Custom Fonts

Using the IcoMoon App, you can build your own custom fonts that only contain the icons that you need.

Pixel Perfect Results

Unlike similar services, the IcoMoon app takes grid sizes of icons into account and generates crisp, pixel perfect results. With a proper alignment, the font size you set would directly translate to the size of the icons.

Free Icons, Free App

The IcoMoon app is free. You don’t need to pay anything or give back any credit for using it. IcoMoon’s Library features many high quality icon sets. All of these icons are designed on a grid and they are optimized to be used with the IcoMoon app. Add any set you wish to easily browse and search its icons.

Awesome Iconography Tool

The IcoMoon app is an advanced iconography tool. It lets you sort your icons, manage your icon collections, or make your icons searchable by adding tags to them. In addition to fonts, you can generate PNGs, SVGs and CSS sprites in any size and color you wish.

Import Your Own Vectors

In the IcoMoon app, you can import your own vectors (SVG images or SVG fonts). Importing icons happens locally, in your browser. Your vectors won’t get uploaded to our servers when you import them. Some basic editing options such as moving, mirroring and rotating are available too.

Works Offline

Once loaded in your browser, the IcoMoon app works offline. When you import an icon or generate a font, everything happens locally, in your own browser. Your icons/fonts won’t be uploaded to our servers. You can even load the IcoMoon app when you have no connection if you install it from the Chrome Web Store.

Multiple Ligatures Per Glyph

Instead of assigning single characters to your glyphs, you could assign different tags to them (ligatures). This feature is especially useful for fallbacks or desktop usage of the fonts. Learn More…

Collection of Free Page-Loading Effects (Tiny User-Friendly Animations)

The golden rule of creating great web-based projects that provide online audiences with good user experiences is to not let them wait. It seems like a really simple task, however it just sounds so. Completely upload your content-intensive website that is populated with high-quality, heavy multimedia data in the blink of an eye is simply impossible due to imperfections inherent to modern technologies. All that remains to do is find a way of forcing people to stay while they are waiting. And making use of page-loading effects is an optimal solution here.

Spinners, loading bars, basic counters can do the job perfectly well. They give a notion that something happens in a pleasant, entertaining and enticing manner. With just a bit of imagination, you can transform a plain loading indicator into a real masterpiece that will amuse users by diverting their attention from idle process as well as enrich your website design aesthetics.

Page-loading effects are not just whimsy; they are a must-have for any complex, content-heavy or dynamic project. If your project falls into one of these categories then you should definitely take a look at our varied and fresh collection of free page-loading effects; we hope you will definitely find a perfect match for your website here.

Free Page-Loading Effects

Inspiration for Article Intro Effects

Inspiration for Article Intro Effects

The team speculates about various intro animations that should accompany page appearance thereby enriching user experience. The collection includes:

  • Pushing techniques
  • Fade out effect
  • Slice effect
  • Grid-based solutions
  • Imitation of an effect seen on Jam3

You will be able to freely grab a source file; however it can only serve as a starting point.

Page Loading Effects

Page Loading Effects

The team gives you hints how to transform a boring loading time into an enjoyable and visually-appealing pastime by equipping your website with some fantastic SVG animations based on Snap.svg. The article covers a bunch of different effects, namely:

  • Lazy stretching
  • Windscreen wiper
  • Tunnel vision
  • Basic effects such as tilt, wave, and curtain

Page Preloading Effect

Page Preloading Effect

Unlike the previous two examples, this team has concentrated on producing only one solution that should brighten up an appearance of the page with a help of a simple, small yet fancy animation based on an effective collaboration of CSS3 3D transforms and SVGs. You will be also able to insert your logo into it thereby showing off your trademark from the first second.

Creative Loading Effects

Creative Loading Effects

The project is created in order to provide developers with a sheer inspiration, yet, you can still freely grab several valid code snippets that will enhance your page with some alluring loading effects. The range covers 13 solutions including popular YouTube loading bar, standard expanding box, circular indicators and others.

Display Animation While Page Loading Using jQuery

Display Animation While Page Loading Using jQuery

The tutorial regards a really simple but fundamental solution of how to properly implement a loading indicator in order to engage users. The author offers two ways of resolving this problem:

  • Using loading image in CSS and a HTML div element with jQuery bind function
  • Using loading image inline in HTML with jQuery load function

jQuery Full Page Loading Animation

jQuery Full Page Loading Animation

The developer shows a simple and easy-to-reproduce solution for creating a full page loading animation. You can modify it according to your wishes without hustle and bustle thanks to a really clean code and intuitive technique.

CSS Load

CSS Load

This is a small yet really useful online generator that will assist you with creating visually-appealing preloaders based on new CSS3 features. Thanks to several basic customization options you will be able to:

  • Choose an animation template
  • Set colors
  • Set size
  • Specify animation speed
  • Turn on reverse animation

Page Loading Effects

Page Loading Effects

Rik Roots gives you an opportunity to not only contemplate some interesting and original loading effects but also lets you use this piece of code. Here you will find enticing animations that include:

  • Fog
  • Rolling rectangle
  • Spinning star
  • “Chop from top” technique
  • “Clear with circles” approach

Preloaders

Preloaders

This is another helpful and feature-rich online generator that allows building your own preloading effect. The customization choices will surprise even a sophisticated user; the service offers plenty of categories, where you can find pre-made elements starting from standard loading bars and ending up with zodiac signs. Each category includes its own range of options, opening to you almost endless possibilities.

Display Loading Animation While an External Page is Loading in a RadPane

Display a loading animation while an external page is loading in a RadPane

Those who adore ASP.Net Ajax will definitely recognize the real worth of this short yet useful tutorial that features a basic technique of creating and displaying a loading animation. It is based on several steps that involve working with RadSplitter control, global variables and JavaScript functions.

The script is connected to RadPane that is used for loading external pages, so take it into account.

Loading Overlay

Loading Overlay

This is a tiny, lightweight and pretty helpful jQuery plugin that lets you both add and remove a loading overlay to a selected element. You can use it with any component you like. Available options allow:

  • Adding icons
  • Specifying text
  • Altering appearance through CSS styling

jQuery Loading Animation

jQuery Loading Animation

The author explains how to properly use jQuery in order to create a loading animation with your message. The technique is simple, the code is clean and styling is straight-forward, so you can easily adapt this code snippet to your needs as well as modify it. The solution looks good whether the user has disabled JavaScript or not.

Page Loading

Page Loading

Want to load your homepage gradually line by line or simply make the presentation of your images interesting? Then leverage this effect.

The animation was created by Pedro Ivo Hudson, who has implemented a CSS transitional changing effect based on Bezier Curve that allows controlling the timing function in order to set the required speed.

YouTube Page Load Effect

YouTube Page Load Effect

The developer has quite successfully imitated an elegant page load effect seen on YouTube. Though the solution is based on a quite complex linear interpolation function, yet it works like a Swiss watch: i.e., reliably and accurately. The code snippet is really clean and apprehensible, so even if you are only a newbie you will be able to put it to work.

Animation on “load”

Animation on "load"

The aim of this small project is demonstrate how to correctly initiate an animation when a page loads. Of course, you can add text, set a background color and change timing and duration.

CSS3 Spin Loader

CSS3 Spin Loader

Ricardo Zanutta created a subtle vibrant flat style CSS3 spin loader that will look wonderful on any web page whether it has dark or light coloring. The snippet includes a function for displaying a preload page as well.

Here, almost everything is done with a help of CSS, so you will be able to set your own parameters through the styles file.

PACE

PACE

Pace is a tiny, intelligent plugin that monitors various elements of your page including Ajax requests and event loop lag in order to decide the progress and switch on a nicely animated progress bar just in time.

It is easy to install with a help of Eager that sorts out all issues. As for modification, the development team has blessed you with dozens of neatly-crafted flat style themes.

Full CSS Ball Loader

Full CSS Ball Loader

This bouncing vibrant ball loader is well-suited for projects with an entertaining atmosphere. The effect is accomplished only with a help of CSS3, so it won’t work correctly on old browsers and on those that do not support new, advanced features.

Source: http://designmodo.com/free-page-loading-effects/

Color palette generators

tintui.com – A very useful color picker tool by João Piedade with all the famous UI colors in one place.

Collective151_TintUI[1]

 

 

 

 

 

———————-

Colourcode is another one which offers a very original-yet-easy way of creating them.

The color schemes are generated with the mouse location/movements and multiple options exist for setting the scheme type: monochrome (with light/dark grey), analogic, triad and more.

Colourcode

Once created, it can be downloaded as styles (.less and .scss) or .png. It is also possible to save the palette for future use or share with a link.

Colourcode can be used freely online or, it is open source, it can be self-hosted.

———————-

iWantHue is a web-based color palette generator that provides powerful settings for finding the colors that play well with each other.

It works by defining a range of hue, chroma +lightness and the app can return a palette of any size instantly.

iWantHue

The palettes are provided in multiple formats (RGB or HEX, as a list or JSON) and, also, there are also presets to create faster.

iWantHue is open source and anyone can use it to create palettes with only JavaScript.

———————-

COLOURlovers, an impressive website/community focused on colors, is sharing a handy tool named COPASO.

The tool is a web-based color palette generator for creating palettes and saving them for future use.

COPASO - Color Palette Generator

COPASO allows you to pick the colors from a color wheel or upload an image, optionally pixelate it, and grab from there.

There is a built-in search to find colors and palettes generated by the community with a sorting feature using various parameters.

P.S. Some features requires signing-in with a free membership.

———————-

source: http://www.webresourcesdepot.com