30
SpriteMapper: CSS Spritemap Generator
Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices.
Improve loading times. Only 10% of a webpage’s loading time is due to the actual page—the other 90% is spent downloading styles, scripts and images. By reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.
17
CSSWARP – CSS Text to Path Generator
CSSWarp is a tool for “warping” HTML text directly in the browser. It will apply text transforms to your CSS in a way that you will have native text in an HTML page that looks as if it were created with Illustrators attach to path tool.
16
CSS3 Buttons – Simple CSS3 framework for style button links
CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.
8
Not Just a Grid – a flexible and modular css framework
Not Just a Grid is a flexible and modular css framework that is designed to assist in the rapid prototyping and development of websites. It has been designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.
16
CSS3 PIE: CSS3 decorations for IE
CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.
CSS3 promises to do away with all that! But as we all know, due to Internet Explorer’s lack of support for any of these features, we must be patient and refrain from using them, and make do with the same old tedious techniques for the foreseeable future.
7
Spritebox – Create CSS from Sprite Images
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use!
4
CssUserAgent
This page demonstrates the power of CssUserAgent. This feature applies User-Agent specific CSS classes to the <html> tag to allow browser-specific CSS variation without resorting to CSS hacks. Since these are performed once at startup, CSS may be statically defined without the need to mix browser-specific logic into the presentation.
8
Head JS :: The only script in your HEAD
Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD. A concise solution to universal issues.
With Head JS your scripts load like images – completely separated from the page rendering process. The page is ready sooner. Always. This is guaranteed even with a single combined JavaScript file. See it yourself:
Sample page with 5 SCRIPT SRC tags
Same scripts loaded with Head JS
Non-blocking loading is the key to fast pages. Moreover Head JS loads scripts in parallel no matter how many of them and what the browser is. The speed difference can be dramatic especially on the initial page load when the scripts are not yet in cache. It’s your crucial first impression.
Pages no longer “hang” and there is less or zero “flashing” between pages. User only cares when the page is ready. Unfortunately current networking tools don’t highlight this crucial point. They focus on the overall loading of assets instead.
Head JS can make your pages load 100% or even 400% faster. It can make the largest impact on client side optimization.
30
Centage – The Smart and Fluid CSS/LESS Framework
Centage! is five cents in defining a good fluid css framework. Every framework has its shortcomings – as has Centage! too – but it also solves some major issues in existing ones.
Reason for Centage! is purely practical. I started to redesign my own site and wanted to go for a fluid grid, mostly just for the challenge of it. At the same time I had made some tests with Less and although it seemed pretty cool, it was still tricky to develop with command line compiler. When less.js came along, the pieces existed for putting together a next gen fluid framework.
None of the existing fluid frameworks worked as I wanted them to. Fluid 960Grid is an impressive achievement, but what if I want to start my grid from page edge? Or what about nested grids and their gutters? Another wonderful undertaking is Elastic, but it’s dependancy on javascript troubles me.
I have my roots in print design and designing complex grid systems for newspapers. So I wanted the same kind of grid into web as well. Especially nested, percentage width grids are a challenge that simply cannot be addressed with traditional css (because they inherit relative width from parent element).
requirements for a grid system are:
- It should work acceptably without javascript.
- It should mimic print grids as accurately as possible.
- Proportions of columns and gutters should be visually equal at any width.
- It should add minimum extra markup.
- No representational markup.
- Should work on most browsers after IE6. IE6 users can expect trouble anyway.
- It should be light + simple.
25
Pure CSS GUI icons
An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.
Sponsors
Categories
Recent Posts
Recent Comments
- Adobe Photoshop CS6 Beta Out | Lively Web Tuts on Adobe Photoshop CS6 Beta Out
- sams on Mobility – Free Mobile UI Design Elements
- Cutter.js – Truncate HTML code Client Side | Lively Web Tuts on Cutter.js – Truncate HTML code Client Side
- Page Scroller – jQuery Smooth Scrolling Plugin | Lively Web Tuts on Page Scroller – jQuery Smooth Scrolling Plugin
- The jQuery Slider Plugin with Infinite Style | Lively Web Tuts on The jQuery Slider Plugin with Infinite Style