WebAppers

/ best free open source web resources /

Graphic Resources

Dropcap.js Makes Beautiful Drop Caps Easy for the Web

Posted · Category: Fonts

Decorative initials, also known as drop capitals or “drop caps”, should be positioned on a baseline of the adjoining text; they should also be tall enough to reach the cap height of the first line of text.

Though drop caps are very common in magazines and books, they remain rare on the web. We believe this is because doing it right simply and reliably is too difficult. A simple CSS float:left on a ::first-letter pseudo-element is not enough. Dropcap.js makes beautiful drop caps easy for the web. We tested dropcap.js on Windows (IE10+, Firefox, Chrome) and OSX (Firefox, Chrome, Safari).

dropcap-javascript

Requirements: JavaScript Framework
Demo: http://webplatform.adobe.com/dropcap.js/
License: Apache 2.0 License

Find the Name of a Font with Fontface Ninja

Posted · Category: Fonts, License Free

You’re browsing a website and you want to find the name of a font? Here comes the Fontface Ninja. You can easily hide all pictures and commercials. You can now enjoy fonts on a blank background. You can also try or download a font with Fontface Ninja.

fontface-ninja

Requirements: –
Demo: http://fontface.ninja/
License: License Free

Google Released Noto Free Font for All Languages

Posted · Category: Fonts

Noto is Google’s font family that aims to support all the world’s languages. Its design goal is to achieve visual harmonization across languages. With multiple styles and weights. Freely available to all. Noto fonts are under Apache License 2.0.

Currently, Noto covers all major languages of the world and many others, including European, African, Middle Eastern, Indic, South and Southeast Asian, Central Asian, American, and East Asian languages. Several minority and historical languages are also supported. Support for Simplified Chinese, Traditional Chinese, Japanese, and Korean has been added in July 2014.

google-noto-font

Requirements: –
Demo: http://www.google.com/get/noto/
License: Apache 2.0 License

The Best Typefaces from Google Web Fonts Directory

Posted · Category: Fonts, License Free

Beautiful Web Type is a showcase of the best typefaces from the Google web fonts directory. There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Check out the examples to get the typeface from the Google web fonts directory.

google-web-fonts

Requirements: Google Web Fonts
Demo: http://hellohappy.org/beautiful-web-type/
License: License Free

Shine.js – A Library for Pretty Shadows

Posted · Category: Fonts, MIT License

Shine.js is a library for pretty shadows. You can set dynamic light positions, Customizable shadows. And there is no library dependencies, AMD compatible. It works in browsers that support textShadow or boxShadow and auto-prefixes if necessary.

shine-js

Requirements: JavaScript Framework
Demo: http://bigspaceship.github.io/shine.js/
License: MIT License

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

Gridlover – Typographic System with Modular Scale

Posted · Category: Fonts, License Free

Gridlover gives you adjustable css for font sizes, line heights and margins. The default css output is for body, p and h1 – h4 headings, but you can of course apply your adjusted values to any element by editing the css.

Simply drag the numbers in the top toolbar left and right to adjust their value. Elements in Gridlover are always kept aligned to a pixel perfect baseline grid. The font scale in Gridlover is calculated by stepping up the font size by the scale factor for each heading level. Line heights are fitted to the font size.

grid-lover

Requirements: –
Demo: http://www.gridlover.net/
License: License Free

Brick – Web Fonts that Actually Look Good

Posted · Category: Fonts, License Free

In the age of the Internet, we’ve found ourselves in yet another typographic battle. In an effort to speed up loading times, we’ve compressed fonts, and along the way, we’ve lost the majority of the quality of rendered type.

Let’s change that. The fonts served by Brick are clones of the original, converted without modification to several formats for wider browser compatibility. All fonts are served as WOFF-compressed versions of the originals—no quality lost.

bricks-fonts

Requirements: –
Demo: http://brick.im/
License: License Free

Glyphr – A Free HTML5 Based Font Editor

Posted · Category: Fonts, License Free

Glyphr is a free, html5 based font editor. Font design has a high barrier of entry. Professional font design programs are very complex, and quite expensive. Glyphr is accessible, streamlined, and made for font design hobbyists, and it’s free.

You can create complex shapes, copy & paste, flip ’em around or lock them down, drag & resize to your heart’s content. Edit paths with cubic Bezier curves. Define a shape once, like an ‘o’, and re-use it across many characters, like ‘bdgpq’. Make changes to the Linked Shape, and it updates all the characters linked to it.

font-designer

Requirements: –
Demo: http://glyphrstudio.com/
License: License Free

Tiff – A Visual Typeface Diff Tool

Posted · Category: Fonts, License Free

Tiff is a typeface diff tool that visually contrasts the differences between two fonts. It’s a tool to help comparing two fonts while learning about typography. At this point, Google Web Fonts serves as the only source of external fonts for Tiff. Since the app uses some features only available in HTML5 and CSS3, use recent versions of modern web browsers for maximum compatibility.

tiff

Requirements: –
Demo: https://tiff.herokuapp.com/
License: License Free

Page 2 of 8«12345678»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons