Listelog » Resources

78+ Awesome Gradient Resources for Web Design

uralozden — Fri, 30 Oct 2009 21:19:10 +0000

It is unevitable to use gradients for web designers. The links above is a huge collection for you to find or make the best gradient effects for your website. They are not only about photoshop, illustrator or gimp, but also tools, generators and inspiration. If you still not using gradients, I think after this post you will start using some.

Photoshop Tutorials:

30 Awesome Photoshop CS4 Tutorials From MirazWeb

Using Photoshop Gradient Tool from FreeTimeFoto.

Photoshop 101 – The Gradient Tool from Shape Shed.

A Gradient Tutorial from 9rules.

Creating Web 2.0 Effects with Photoshop – Part 1 from SitePoint.

Smooth Gradient Header Photoshop Tutorial from Tutorial Blog.

How to Create a Transparent Gradient in Photoshop from MediaCollege.com.

Creating Stylish Gradient Buttons from Wipeout44.

Jazzed Up Text With Gradient Effects from Wipeout44.

Become a Gradient Junkie from Wipeout44.

Gradient Mapping Effect in Photoshop from Wipeout44.

Web 2.0 Badge Photoshop Tutorial from Ajax Lessons.

Create a Shiny Badge Photoshop Tutorial from Tutorial Blog.

Tutorial: Rays of Light from Bartelme Design.

Sleek and Spicy Website Header Tutorial “Web 2.0 Style” from Photoshopit.

Gradient Text with Photoshop from Depiction.net.

Underwater Scene with Gradients from Heathrowe.com.

Warm Gradient Sunsets with Gradient Maps from Photoshop Essentials.

Using Gradients to Make Light and Shadow – and a Coffee Cup! from PSDTUTS.

Illustrator Tutorials:

Create Realistic Illustrations Using Illustrator’s Gradient Mesh from Veerle’s Blog.

Colorful Gradient Effects in Illustrator from Veerle’s Blog.

Transparent Gradients in Illustrator from CreativeTechs.

Adobe Illustrator – Gradient Mesh Tool, Gradients and Blends from Kevin Hulsey.

Transparent Gradient in Illustrator from Creative Bits.

Create Abstract Backgorunds in Illustrator from Vectips.

Illustrator 101: One Gradient Across Multiple Paths from BittBox.

Gradient Mesh – The Adobe Illustrator Video Podcast.

Gradient Meshes Introduction from Biorust.

How to Create Gradient Text in Illustrator from Wow Web Design.

GIMP Tutorials:

GIMP Gradient Tutorial from TankedUp Imaging.

GIMP Gradient Tutorial at YouTube.

General Tutorials:

Gradient Text Effect from Web Designer Wall.

Super-Easy Blendy Backgrounds from A List Apart.

Pure CSS Text Gradients from CSS Tricks.

Span-Free Gradient Text Effect from Sam Rayner.

Cross-Browser Gradient Backgrounds Without Images from Slayer Office.

Web 2.0 Design Kit from Photoshop Lab.

Gradients – The Web 2.0 How-to Design Guide from Web Design from Scratch.

Gradient Tiles with Shadow from Projectseven.

CSS Gradient Background from DMXzone.

Background Gradients and CSS from TankedUp Imaging.

CSS Web 2.0 Glossy Text from Just Talk About Web.

Creating Gradient Fills with ActionScript from Lukamaras.com.

The Push vs. Pull Gradient from Blogoscoped.

Gradient Generators:

Gradient Image Maker from Dynamic Drive.

Gradient Text Generator.

CSS Gradients Demo.

The Amazing Gradient Generator.

Online Gradient Image Maker.

RoundedCornr – Create a rounded corner with a gradient.

Form Style Generator – Includes a gradient generator.

Gradient Generator.

secretGeeks Gradient Maker.

Gradient Resources:

600+ Photoshop Gradients to Download from Best Design Options

Adobe Photoshop CS4 Gradient Pack from Estetica Design Forum

CSS Text Gradient from CSS Globe.

CSS Gradient Shadow from Dynamic Drive.

900 Gradients For GIMP from Deviant Art

Tabs Generator – Create Gradient Tabs.

Dynamic Gradient Background.

1000+ Gradient Pack from Deviant Art

Color Blender.

Ultimate Web 2.0 Gradients – Free Downloads from Deziner Folio.

Ultimate Web 2.0 Gradients – Volume 2 from Deziner Folio.

Ultimate Web 2.0 Gradients – Volume 3 from Deziner Folio.

Gimp 2.2 Gradients Muted from Deviant Art

130 Web 2.0 Gradient Swatches for Illustrator from Deziner Folio.

Ultimate Web 2.0 Layer Styles – Free Download from Deziner Folio.

Some Gradients to Save Some Time from GoSquared.

Free Photoshop Gradients Download from Euphorish.

Gradient Progress Bar from Slayer Office.

Lose the Images: How to Get Rounded Corners, Gradients, Drop Shadows and More Using CSS from DesignVitality.

The Gradient Green Navigation Bar from Listamatic.

Plasma Gradient Gradation PSD from Deviant Art

130 Ultimate Web 2.0 Gradients for Gimp from Gimp-Tutorials.net.

GIMP Gradients from Gimp.org.

36 Color Gradient Sets For Photoshop from 1stwebdesigner

Inspiration:

Yukio Miyamoto – Master of Adobe Illustrator Gradient Mesh Tool.

Color Inspiration: Blends, Gradients, Steps, Oh My! from COLOURlovers.

AND DO NOT FORGET

25 Great Examples of Using Gradient Effects in Web Designs by Listelog

5000+ Color Gradients Set For Photoshop by Listelog

30 Light and Sleek Web Designs for Inspiration by Listelog

Bookmark It

15 Must-Have Bookmarklets For Web Designers And Developers

uralozden — Tue, 20 Oct 2009 18:19:07 +0000

Here is a list of 15 very handy web designer / developer bookmarklets which includes:

learning the colors used
inserting a ruler on a webpage
reloading CSS without reloading the whole site & more..

To use them, bookmark the “Get It” links. If no “Get It” link is provided, than they can be bookmarked from the author’s websites or:

Click here to download all the bookmarklets mentioned as a Firefox bookmark folder (can be added from bookmarks>organize bookmarks>import&backup>import HTML menu at Firefox).

Note: If you’re not using it already, Firefox web developer extension is strongly adviced for developing faster besides using these bookmarklets (few of the bookmarklets mentioned are already in the extension).

WTFramework – Learn JavaScript Framework Used

When you wonder which JavaScript framework is used on a website, rather than checking the source, simply click to this bookmarklet & it will display the framework(s) used.

XRAY – See Details Of Any Web Element

It lets you see the box model in action for any element, all the details of it.

Just click the XRAY button to instantly get the answers of:

where is the top and left of this element?
how big is each margin? how big is the padding?
how wide and high is the content box?

MRI

A free cross browser tool that lets you test selectors with any web page. Selectors, particularly complex ones can be difficult to get exactly right – MRI lets you experiment with them on any web page.

Design – Grid-Rule-Unit-Crosshair

Design provides a menu with 4 options:

Grid: overlays a configurable grid.
Rule: a ruler which can snap to block level elements.
Unit: for measuring the differences between 2 given points.
Crosshair: draws a crosshair cursor on the page to assist in layout alignment

Slayer Office – Favelet Suite

Several tools in one bookmarklet. All are very handy like “learning which colors are used on a website”, “document trr chart” & more..

Aardvark – Display Elements & More

Aardvark enables you to view the details of the element & to do various things, such as:

delete the selected element from the page
isolate the element
move the selection rectangle outward to the containing element & more.

Tip: The bookmarklet is at the right side of the website.

ReCSS – Reloads The CSS

A so simple but helpful bookmarklet.

When editing a CSS file, to see the result, all the page is generally refreshed. ReCSS only updates the CSS & the results are seen quicker.

It specially helps if you are developing an Ajax application where some content appears after sometime, you simply don’t have to wait.

Edit Any Website – Get It

Want to see how a text will look on a webpage? Or, how would it be if that image wasn’t there?

This bookmarklet makes any website editable, positions of the elements & text can be changed.

W3C Markup Validator – Get It

Check the markup validations of any web document: HTML, XHTML.. See the results & if there are any errors, find the recommendations.

W3C CSS Validator – Get It

Check CSS and (X)HTML documents with style sheets. See any possible error & get the recommendations.

Resize Browsers

When testing a design in various resolutions, these bookmarklets resizes your browser to the mentioned popular sizes.

So, rather than updating the resolution of the computer, this method is way faster.

BuiltWith – See The Ingredients Of A Website – Get It

This bookmarklet gets you to the BuiltWith website & displays various informations about a website like:

web server it is hosted
analytics apps. used
scripting language
widgets installed
blog software
advertising platform & more.

Super Screenshot – Instant Screenshots – Get It

When you need to get a screenshot of a webpage, but don’t want to use an image editing or screenshot software, this bookmarklet helps alot.

It, almost instantly, presents you the full page screenshot & also you can set the size & format form the page displayed.

BrowserShots – Test Webpages In Different Browsers – Get It

This bookmarklet directly sends the URL to be tested on different browsers to the BrowserShots website & you only select the browsers /OSs.

Google Translate – Get It

Ok, this is not directly related to web design & development but it helped me so much while developing & there’ll probably be no better post to share it.

Every designer/developer searches:

inspiration
an answer to a problem
resources…

And a serious part of these contents are not written in a language we know. So, this bookmarklet translates a website into English (you can update it to work in your language) & increases the possibilities to find inspiration, answers & more..

Bookmark It

A to Z : 89 Incredible Fonts For Your Next Design (unique share)

Mao-tun — Thu, 15 Oct 2009 20:11:09 +0000

(Post by Mag-Net) There are many good sites available for free font downloads. The three that I visit the most are dafont, fontcubes and urbanfonts. A lot of these sites overlap fonts, but they are all worth a look. I definitely frequent dafont the most.

I’ve put together a list of my favorites, that I feel every designer should put in their toolbox.If i had missed out any fonts that you think are cool, please share through the comment section. Without talking much, let’s see the list.

( A )

A Bite – designed by Billy Argel.

Download

Anja Eliane – Anja Eliane is a bold rounded box. Best result in medium-big size.

Download

Asenine – A nice san serif option. Makes for a clean elegant feel.

[ank]* font

advent

Abrosia

( B )

Bleeding Cowboys – I just think this font is flat-out cool. Plus you gotta love the name! An awesome and versatile grunge font.

Download

Birth of a Hero -Another grunge font, although somehow it gives a retro feel. I’ve seen it used as part of an album cover, that looked cool!

Download

Birds of a Feather – Awesome bird silhouettes, make great design elements.

Download

Butterflies – Back-to-back dingbats, I can’t help myself.

( C )

Christopher Hand -Another hand written font. This one is a lot of fun and can be used that way.

Download

Chica Monospace – A font with an optimal legibility and an elegant style:

Champagne & Limousine

( D )

Diavlo – Some fonts just look cool! Diavlo makes for a nice option to have; looks good in a techy setting.

Download

Danube – A courious font for modern logo design.

download

Dear Joe Four -I love the look of grunge and script mixed. This font is my favorite example of the two styles merged.

Download

Dirty and Classic – Just like the name says!

Download

Delicious -One of the best fonts to be created in a long time. Quite possible the best and most useful font on this list.

Download

Destroy

Distorted and Scratchy

( E )

( F )

Flower Ornaments -I couldn’t make a list of the best fonts for designers and not include some dingbat fonts. These are beautifully crafted decorative elements that can really help a design.

Download

Fertigo - Is another font fromexljbris. Honestly I could have put everyone one of his fonts on this list; this designer is awesome, and he keeps his fonts free!

Download

FFF Tusj

Download

Fontin Sans -Gorgeous san serif alternative

Download

Faith Collapsing

FT Twisted Ontogenesis

( G )

Gentium – I had to put one serif font on the list. This is a beautiful option that does well in ad copy.

Grandesign Neue Serif

Gauntlet

Geo Sans Light

( H )

Hanford Script -Script fonts often come in handy, here’s another for your arsenal.

( I )

( J )

Jane Austen -A really nice handwritting type script. Awesome as a signature or faint in the background.

Download

Journal – A very nice handwriting font that looks great on paper elements. I used this effect on my navigation for my portfolio site,Houle Designs.

Download

Jey – Another grungey script font. Cool signature option.

Download

Joe Hand 2

Justus

( K )

Kyra Lynn – Kyra Lynn is another “dirty” font for grunge logos:

Download

Karabine

Kontrapunkt

( L )

Light Out

( M )

Mal De Ojo -A cool grunge font with some dingbats mixed in.

( N )

Nicotine - A bold font for big logos:

( O )

( P )

Punk’s not dead - Punk’s not dead is “dirty” font to design grunge logos:

( Q )

Qlassik - Awesome simple font with great spacing and feel. Has interesting curves and intricacies just check out the ‘Q’ and the ‘k’ below.

( R )

( S )

Scriptina – A gorgeous script font that can be used to create a vintage look. Some of the loops run together and the spacing can be funky, but overall I love the look!

Download

Saginaw – Another beautiful script font. Stylish, with a hand written feel.

Download

Santos Dumont -Another example of an awesome Billy Argel font.

Download

Seeing Stars -One last dingbat font for good measure. Seeing Stars comes in handy often.

Sunday Morning Garage Sale

( T )

Trashco – A unique grunge font with fun decorative elements built into the font.

( U )

Unit Rounded Bold (download) A rounded font to design Facebook-like logos.

( V )

VTC Joelenhand -Well crafted hand written font.

Download

Vinyl George

VTKS ROCK GARAGE BAND

Vtks good luck for you

Vollkorn

Vintage

Vegur

( W )

Windsong -In some ways this font is similar to scriptina, but I think it’s a little more elegant and versatile.

Download

WC Rhesus B BTA -Awesome set of splatter and spills for grunge elements. This is the font that I used to design the MyInkBlog splatter logo. Definitely a nice font to have in your toolbox, I still haven’t figured out the name however.

Download

Walkway

( Y )

Yanone Kaffeesatz – Stunning headline font, not great for long paragraphs.

( Z )

( 0-9 )

20th Century Woodcut

28 Days Later

And do not forget

23+ Impressive Tools for Faster Javascript/Ajax Development

Mao-tun — Sun, 04 Oct 2009 16:21:13 +0000

Javascript applications are still one of the most complex issues when it comes to web-development. Many tools and applications could make your developing life pretty fast and simple. Today we wanted to share with you a wide range of tools and applications that could really help you build, test and debug Javascript and Ajax applications. Let us know your experience with the tools listed here or others that are not.

Notification Tools

1-Roar – Notifications (v1.0) Roar is a notification widget that streamlines incoming messages, such as updates or errors, without distracting the user from their browser experience or breaking their work-flow by displaying obtrusive alerts.

2-Damn It DamnIT is a free service that emails you when a user encounters a JavaScript error in your webpages.

3-Growl 2.0 with Mootools Growl is a notification system for Mac OS X, it allows applications that support Growl to send you notifications.

APIs

4-Google AJAX Language API With the AJAX Language API, you can translate and detect the language of blocks of text within a webpage using only Javascript. The language API is designed to be simple and easy to use to translate and detect languages on the fly when offline translations are not available.

5-Got API An easy to use interface that helps you reach the methods and functions of many JavaScript frameworks by getting the data from trusted sources and websites.

6-WaveMaker Visual Ajax Studio WaveMaker’s Studio and Framework provides a powerful solution for rapidly developing web-based applications. Drag & drop assembly of widgets and service, code-free integration of web-services, databases and Ajax UI, and one-touch deployment to standard Tomcat servers all work seamlessly together to let you build complete web apps in hours!

FrameWorks

7- SproutCoreSproutCore is a framework for building applications in JavaScript with remarkably little amounts of code. It can help you build full “thick” client applications in the web browser that can create and modify data, often completely independent of your web server, communicating with your server via Ajax only when they need to save or load data.

8-JavaScriptMVCJavaScriptMVC is a framework that brings methods to the madness of JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

Amazing Tools

9-Jaxer Jaxer is an Ajax server. HTML, JavaScript, and CSS are native to Jaxer, as are XMLHttpRequests, JSON, DOM scripting, etc. And as a server it offers access to databases, files, and networking, as well as logging, process management, scalability, security, integration APIs, and extensibility.

10-The Regulator The Regulator is an advanced, free regular expressions testing and learning tool that allows you to build and verify a regular expression against any text input, file or web, and displays matching, splitting or replacement results within an easy to understand, hierarchical tree.

11-SnippelySnippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location.

12-NitobiBugIt’s a browser-based JavaScript object logger and inspection tool – similar to Firebug. NitobiBug runs across different browsers (IE6+, Safari, Opera, Firefox) to provide a consistent and powerful tool for developing rich Ajax applications. You can check a demo here.

13- Google Mashup EditorThe Google Mashup Editor provides simple tools and features that allow you to create mashups in minutes with the following features:

A set of tags that compiles into AJAX UI components.
Syntax highlighting
Autocomplete of gm tags by pressing the tab button
Quick access to documentation for any tag by pressing F2
File upload and management
Error checking and notification

14- Beautify JavascriptThis tool was intended to explore ugly javascripts, e.g compacted in one line, or just make scripts look more readable.

15- ThemeRollerThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects.

16- JSDocJSDoc is a tool that parses inline documentation in JavaScript source files, and produces an documentation of the JavaScript code.

17- Clean AJAX Clean is an open source engine for AJAX, that provides a high level interface to work with the AJAX technology. It was created to solve real problems found on AJAX applications, and is used in many projects. Clean will help you to adopt AJAX saving your time and your code, reducing your learning curve and the code reengineering.

18- Sajax Sajax is an open source tool to make programming websites using the Ajax framework as easy as possible. Sajax makes it easy to call PHP, Perl or Python functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.

19- JavaScript Code Improver With JavaScript Code Improver you are just one click away from making any JavaScript clear, easily comprehensible and ready for printing thus saving the time you spend on editing, debugging and modifying it.

Browser Addons and Toolbars

20- Greasemonkey Greasemonkey is a Firefox extension that allows you to customize the way web pages look and function. You can use it to make a web site more readable or more usable. You can fix rendering bugs that the site owner can’t be bothered to fix themselves.

21- Web Developer extension for Firefox This tool is really excellent for quick and easy webdevelopment. It Adds a menu and a toolbar with various web developer tools.

22-Internet Explorer Developer Toolbar The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.

23-DebugBar An Internet Explorer plug-in that brings you new powerful features :

DOM Inspector: View DOM Tree and modify tags attributes and css attributes on the fly to test your page
HTTP Inspector: View HTTP/S request to check cookies, GET and POST parameters, view server info
Javascript Inspector and Javascript Console: View javascript functions for easier debugging, see Javascript and AJAX code
HTML Validator: Validate HTML code to correct and optimize your code and html size of your page
And many more features: See page cookies, get pixel color on a page, make a page screenshot.

24-Firebug Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. It can be downloaded from here.

1st share date : Jun 25th, 2009 by Noupe.com

Bookmark It

40 Free Web Template Resources

emincan — Sun, 04 Oct 2009 16:21:13 +0000

Check out these 40 excellent websites that offer W3 standard-compliant website templates and flash template pages for free download without any registration or sign-up!

Simavera Website Templates

Flash and web site templates. Great collection with some attractive and modern designs to choose from.

Open Designs

XHTML and CSS based free web design templates. Over 1100 open source designs available for download and growing by the day!

Tristar Web Design

Just 9 templates here but if your looking for free fast loading quality XHTML & CSS templates, this site is a must!

Solucija

Free XHTML/CSS website templates available to use without any limitations. They can be used on a non commercial site as well as on a commercial one. Keeping a small credit link in the footer is not obligatory. All templates are hand coded and lightweight (under 60KB) which ensures fast loading.

Styleshout

Large collection of quality free website templates for download. All templates are valid xthml(strict) and valid CSS, and distributed under a Creative Commons Attribution 2.5 license

Dream Template

334 free templates but users must at all times have the pre-installed DreamTemplate linking button/text on the front page of their web site. This policy does NOT apply to registered/paid members.

Metamorphozis Design

A large collection of attractive designs released under a Creative Commons Attribution 2.5 license by the metamorphosis designers.

Iron Myers

Simplify your site designs with 168 of the most useful Grid and CSS Layouts. They are perfect for website templates, Blog themes, CMS or as a starting point for your web projects. Layouts offer full Grade-A browser support, That is, the layouts will look and behave the same in all internet browsers.

Six Shooter Media

A list of 11 extremely fast loading quality templates fully xhtml 1.1 and css compliant.

Nice and Free CSS Templates

Just copy and paste any of the 12 layouts, all templates are XHTML 1.0 and CSS2/ tableless.

CSSTemps

About 60 free valid XHTML/CSS templates. All templates are protected by the license inside the template.

Free CSS Templates

All of these templates are released for FREE under the Creative Commons Attribution 2.5 license for any type of personal or commercial use provided you follow the license. Link back required.

Clan Templates

Free templates for on-line gaming clans for games with multiplayer options. Clan Templates provides free gaming layouts and graphics to gamers and designers alike.

Free Website Templates

Claims to be the best free website templates on the internet and you don’t need to link back, but you should state that you used a template originally made by Free Website Templates.

Template World

Absolutely top quality, unique and creative web site XHTML/CSS templates designed by Template World. Templates have been tested and proven compatible with all major browser environments and operating systems. Released under Creative Commons Attribution 2.5 license you are free to modify but you must link back to Template World.

Layout Gala

A collection of 40 CSS layouts based on the same markup and ready for download! If you want, you can download the entire collection, 40 HTML pages in a single zip file.

Open Web Design

Download and upload free web designs, over 3000 demo’s to browse through!

Free CSS

All of the 1000 templates or so that are featured within Free CSS are distributed under some form of GNU/GPL License or under a Creative Commons License.

Open Source Web Design

A collection of 2000+ web designs submitted by the community that anyone can download free of charge!

CSS 4 Free

Free CSS based website templates gallery for you to preview, rate, comment on, and download. Most of the templates are licensed under Creative Commons 2.5 or GPL.

Open Source Web Templates

Free Open Source XHTML/CSS templates designed with true web 2.0 standard and 100% W3C validated.

Premium Website Templates

Tableless web templates built using XHTML and CSS with some also available as Blogger template or Wordpress theme. All released under a Creative Commons Attribution 2.5 license

Template Navigator

Free templates catalogue that links only to high quality and free templates that can be 100% downloaded.

Templates Box

A large inventory of free website and flash templates available. Link back is required, downloads include the .PSD files and fonts.

Open Source Templates

Studio 7 designs all free CSS/XHTML website templates are free to use under the Creative Commons Attribution 2.5 license

Free Layouts

Offers several hundred free W3 standard-compliant website templates and flash template pages for download. The site has some older templates in the collection that may not validate, and as such, you should make sure your code validates before using the template.

Dotcom Webdesign

Premier source with 527 free website templates and layouts created specifically for CMSimple.

Themebot

Portal helping users to find themes/templates/styles/skins for various content management systems, blog and forum software. Free high quality open source website templates using XHTML and CSS.

Interspire

Dozens of website templates, website layouts, newsletter templates and logo templates, that you can download free of charge.

Free CSS Templates

One of the biggest, never before seen collection of free CSS Templates on the web! All these CSS templates are released under the Creative Commons Attribution 2.5 license. At present, there are 219 free CSS templates downloadable in .Zip format.

All Free Templates

Nice collection of free web and flash templates for personal and business use. Some templates include the .PSD files.

Template Workz

Templates are free to download and use for your personal and business projects. Website templates are available in Photoshop (PSD) and HTML formats, all the fonts are also included with the PSD file. Link back only required if you use the downloaded graphics.

Snakeye Dreamweaver Web Templates

20 free Dreamweaver web site templates and web page templates for download. May be used for any web site, provided the tagline at the base of the template remains within the template design.

TemplateYes

About 100 cool web, flash and CSS templates 100% free. Link back required.

Mashable

A collection of 150+ great free templates from around the web including 40+ one column layouts, 80+ two column layouts and 30+ three column layouts.

Free Templates Online

Gallery of 150 professional looking websites free of charge! Link back required.

Web Design Company

Unique and professional Web site templates, Flash templates, HTML templates including the full set of sub-pages free of cost. Submit name and email prior to download and link back required.

Andreas Viklund

All templates are made with valid XHTML (strict) and CSS, and they are supposed to be small, easy to work with and of high code quality. Templates are free to use for any purpose without any limitations, obligations or conditions.

1st share date : May 27th, 2008 by gofreeserve.info

Bookmark It

50 Useful Tools and Generators for Easy CSS Development

Mao-tun — Sun, 04 Oct 2009 08:27:57 +0000

The tools have been sorteds into the following categories: Grid and Layout, CSS Optimisers, CSS Menus Tools, CSS Buttons, CSS Rounded Corners, CSS Frames, CSS Sprites, CSS Tables, CSS Typography and CSS Forms.

Grid and Layout Tools and Generators

The 1KB CSS Grid

This is a fresh take on the CSS grid. It can be used to streamline page templates for content management systems, its mission is to be lightweight.

Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

Grid Designer 2

Design By Grid PNG Grid Generator

Complete the form, and a PNG image for the grid will be generated, that can be easily used as a background in your PSD or HTML/CSS.

nP: Grid Generator

Use this generator to design a layout structure, specifying column, margin and gutter sizes, all referencing a core unit (in pixels). The resulting css is then ready for use in your next html layout.

YAML Builder

GRIDINATOR

With the gridinator you can generate grids for the 960.gs, Golden Grid, 1KB Grid and you can also generate a basic generic grid.

Grid System Generator

With the Grid System Generator you can generate grids for the 960.gs, Golden Grid, 1KB Grid and you can also generate a basic generic grid.

YUI: CSS Grid Builder

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.

CSS Grid Calculator

Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets.

Layout generators – www.pagecolumn.com

Generating 1-5 column grid layouts with CSS 2.0 techniques using %, px, or em.

Dynamic 4 Column Layout Generator

CSS Layout Generator – CSS Portal

This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.

templatr

templatr is a Template Generator, with which you can create an individual design for your Blog online. No knowledge of HTML or CSS is required.

CSS Source Ordered 1-3 Columned Page Maker

CSS Creator

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

CSS Optimiser and Styles Generators

Online CSS Optimiser/Optimizer

This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go.

Free CSS Template Code Generator

This HTML – CSS template generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.

CSS Builder – Generate Styles on the Fly

This generators intention is to easily generate styles for CSS selectors on the fly. Simply fill in the data form, click build, and copy the code into your stylesheets.

Firdamatic: the Design Tool for the Uninspired Webloggers

Firdamati is an online tableless layout generator that allows you to create and customise layouts easily by completing a simple form, making creating skins for your Firdamatic-based layout a breeze.

Wordpress Theme Generator

This online generator creates your own custom unique WordPress Theme. Without any need for HTML, JS, PHP, or CSS knowledge.
Change the colors, settings, layout, preview live, click “save” and download your unique Wordpress theme zip-file. Extract, upload, set, and you are done!

CSS Formatter and Optimiser/Optimizer

XHTML/CSS Markup Generator

Markup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It’s main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.

CSS Menu Tools and Generators

13 Styles – CSS Menu Generator

CSS Menu Builder

Choose from 30+ horizontal menus, over 700 vertical menus combinations or a breadcrumb menus that consist of more than 200+ combinations, in total the site offers more than 1000 menu combinations not including the endless color combinations.

Pure CSS Menu.com

CSS Menu Generator

My CSS Menu Generator – Horizontal, Vertical, Drop Down, DHTML CSS Menu

MyCSSMenu provides the average webmaster with tools to create custom, cross browser compatible css menu. The generator makes it easy to create custom web navigation: Horizontal, Vertical, Drop-down menu without having to know all the complicated HTML and CSS.

CSS Menu Generator – Webmaster Toolkit

The CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links.

CSS Menu Generator – CSS Portal

List-O-Matic

The famous and cool List-O-Matic lets you choose the content, layout and presentation of your list-based navigation menus.

CSS Button Tools and Generators

CSS Button and Field Tool

Navigation Tab Menu Generator

CSS Rounded Corners

RoundedCornr: Rounded Corner and Gradient Generator

This generates a basic box with rounded corners. It will create four image files and the necessary HTML and CSS code for you to put rounded corners around your content.

Spiffy Corners – Purely CSS Rounded Corners

Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.

Spiffy Box – Simple Rounded Corner CSS Boxes

Cornershop – Rounded Graphics for CSS Box Corners

CSS Frame Generators

CSS Frame Generator

CSS Table Tools and Generators

CSS Table Generator 0.1

HTML and CSS Table Border Style Wizard

HTML Table Style Generator

CSS Sprite Generators

CSS Sprite Generator

CSSSprites.com

CSS Text and Font Tools and Generators

CSS Type Set

Typetester – Compare fonts for the screen

CSSTXT – Create a style to your text

Css – Text Generator – Insert your style

CSS Forms Tools and Generators

Quick Form Builder

Form Style Web 2.0 Generator

1st share date : July 15th, 2009 by speckyboy.com

Bookmark It

50 Beautiful Free WordPress Themes

Mao-tun — Sat, 03 Oct 2009 19:16:11 +0000

There are many talented designers out there that choose to provide WordPress themes for free. Most of the time, the only small favor they ask you is that you attribute the design to them and link back to their site (a very reasonable request).

In this collection, you’ll find 50 excellent, high-quality, free WordPress themes. These themes range from being elaborate and colorful to being clean and simple so that you may find one that suits your design tastes.

Note: Be sure to check out the license of the theme for restrictions in usage (if any) and it’s always good (and very much appreciated) to attribute the designer even if they don’t explicitly ask you to.

35 (New) WordPress Plugins for an Effective Blogging Experience

Mao-tun — Sat, 03 Oct 2009 04:25:56 +0000

Today i wanted to highlight some of the latest WordPress Plugins that you might find very interesting. Some of these Plugins are for managing posts, some are comment related and some are just to enhance the way admin can manage his blog. In any case, you will hopefully find some useful for your WordPress blog.

Comment Related Plugins

1) Comment Info Tip Plugin- This WordPress plugin provides you and your commenter’s a bit of information on their posting stats. . When you mouseover a commenter’s name you will see a tip appear displaying some information about that given commenter.

Live Demo View it Here | Download

2) BT Active Discussions- This is a recent comments plugin that displays customizable number of blog posts with recently updated comment. The output is very similar to phpBB’s View Active Topics and vBulletin’s Today’s Posts functions.

Download from here

3) Absolute Comments: Comment Manager with Instant Reply- Gives you the ability to reply to comments from within the same page as where you manage them. What you want is a real “Manage Comments” page.

Demonstration View it here | Download

4) Delink Comment Author- This plugin gives you the ability to remove the link a commenter left as their URL without removing the entire comment. A link to do this is added to your new comment e-mail notifications and to the comments list in your admin area.

Download from here

Post Related Plugins

5) Random Featured Post- The Featured Post plugin allows you to display a random post from a designated category. Ideally this should draw readers landing on your homepage to some of your best posts.

Download from here

6) Smart YouTube- Smart Youtube is a Wordpress Youtube Plugin that allows you to easily insert Youtube videos in your post, comments and in RSS feed. It is small, fast and does not depend on any external scripts.

Download from here

Admin Plugins

7) Admin Management Xtended- A For those who are using WordPress as a CMS, it’s important to be able to manage contents easily and quickly. This plugin adds some icons to the Manage posts/pages view with AJAX-driven CMS-known functions like toggling post/page visibility, changing publication date and title without having to open the edit screens or reload the page, plus changing page order with drag’n’drop.

Live Demo View it here | Download from here

8 ) Level2Categories- Allows you to create a relationship between User Levels and Categories, so only users with a defined level will be able to post on a chosen category. Its useful if you want to reserve a category only for Editors or Administrators (or whoever you choose) to be able to post on.

Download from here

9) 404 Notifier- This plugin logs 404 hits on your WordPress powered site and will notify you of them via e-mail or in an RSS feed.

Download from here

10) The Admin CSS Designer Tool: a COLOURlover WordPress Plugin- This amazing plugin pulls colorful palettes from COLOURlovers, and lets you re-arrange, tweak and modify colors, then save them real time. No dirty hand CSS editing.

Demonstration View it here | Download

Security Plugins

11) AskApache Password Protect- If you are worried about your WordPress blog getting hacked, this will definately ease your mind. It adds multiple layers of security to your blog by requiring a username and password to access anything in the /wp-admin/ folder.

Download from here

Developer’s Plugins

12) Custom Function Widgets- Allows you to create sidebar widgets without ever touching the theme’s files and use these widgets in any theme you like. This plugin offers you up to 20 widgets you can then add to your theme’s sidebars.

Download from here

13) WP-CodeBox- WP-CodeBox provides clean syntax highlighting and AJAX advanced features for embedding source code within pages or posts.

Download from here

14) My FTP - My FTP is a file management Plugin for WordPress that enables a blog administrator to (much like an FTP client) navigate folders and files on the server where their WordPress installation is hosted. The administrator can then edit, delete or upload files on the fly.

Download from here

15) WP pngfix- This plugin uses CSS technique to fix the png image transparency issue and jQuery to apply this script to all of png images shown in the page.

Download from here

Twitter Plugins

16) Twitter Blaster- Twitter Blaster is a plugin that will allow your visitors to post to your Twitter account.

Download from here

17) Twitter Tools- Twitter Tools is a plugin that creates a complete integration between your WordPress blog and your Twitter account. Pull your tweets into your blog and create new tweets on blog posts and from within WordPress.

Download from here

Feed Related Plugins

18) MultiFeedSnap- Allow multiple RSS feeds on a single page.

Download from here

19) Feed Wrangler- Feed Wrangler is a simple plugin that allows one to create custom feeds for their WordPress blog.

Download from here

Enhancing and Tweaking Plugins

20) WordPress Tweaks Plugin- WordPress Tweaks is a plugin that adds a “Tweaks” page to your WordPress options. Each individual tweak can be enabled/disabled at will using a checkbox. Tweaks include: Remove “nofollow” from comment author links, Open external post links in new windows, When displaying post excerpts on archive and search pages, display a “Read more »” and more.

Download from here

21) WordPress Better Plugin Page- Better Plugin Page brings simple yet valuable enhancement to your Plugins page by making things fast when you want to find a particular plugin to de/activate or edit it, or when you want to quickly find the ones that are outdated and need an update.

Demo: View it here | Download

22) Linked Image- This plugin takes the first image in your post and links it to the post itself.

Download from here

23) Category Order- The Category Order plugin allows you to easily reorder your categories the way you want via drag and drop. It doesn’t require a special widget or anything, just install and reorder.

Download from here

User Related Plugins

24) FirstTimer- This plugin checks a cookie on your visitor’s PC and identifies if the visitor comes for the first time. If yes, it displays some text and image, usually encouraging the visitor to subscribe or read some introductory posts.

Download from here

25) Donations Cloud- The donations cloud is something like a tag cloud, only that it displays – donations. The more a person donates, the larger the link to his/her website will be.

Download from here

Spam Plugins

26) Devowelizer- The Devowelizer plugin for WordPress replaces the vowels in most “bad language” within your own content and within comments left by visitors.

Download from here

Sidebar Plugins

27) pb-embedFlash- pb-embedFlash is a filter for WordPress to display any flash content in valid XHTML 1.0 Strict code offering the possibility to specify attributes and parameters individually.

Download from here

Social Bookmarking Plugins

28) WP_DeliciousPost- WP_DeliciousPost is a free WordPress plug-in that auto submits your post and pages to Delicious as you publish them.

Download from here

29) Add to Any Subscribe Button- Lets readers subscribe to your blog using any feed reader, such as Google Reader, My Yahoo!, Netvibes, Pageflakes, and all the rest. The Subscribe button comes with a drop-down menu that appears on rollover.

Download from here

Worth Checking Plugins

30) TW-asides- tw-asides is an asides widget for WordPress. It lets you publish short posts that appear in your sidebar rather than in the main content column.

Download from here

31) Google Maps for Wordpress- The Google Maps for WordPress plugin allows you to easily insert Google maps into your blog. Can be configured to offer directions to or from the location, show or hide the zoom/pan controls, show/hide map type, activate zoom using mouse wheel, and more.

Download from here

32) Gengo- Gengo is a full featured plugin that provides multi-language blogging for WordPress 2.5+. It allows for an unlimited number of translations and summaries for any post and provides template tags to display language information.

Download from here

33) WordPress Mobile Edition- A PDA friendly interface for your blog. You can see it in action by visiting this site in a mobile browser.

Download from here

34) Skribit- Skribit is a user-generated content suggestion application for blogs. Effortlessly assemble what your readers really want to hear.

Sign Up here

35) WP-LightForm- WP-LightForm is an AJAX / PHP contact form with spam protection, form validation and custom form elements.

Live Demo View it Here | Download

Bookmark It

20 Beautiful HDR Photographs of the Marvels and Mysteries of Iceland

Mao-tun — Sat, 03 Oct 2009 04:25:56 +0000

The only place in the world were you can witness such marvels and mysteries of nature as a huge iceberg and endless glaciers, towering volcanoes and powerful geysers, raging rivers, magnificent waterfalls, jagged fjyords and experience the barren Highlands. Yes, Iceland is a photographers dream.
Iceland is the home of Ásmundur E. Þorkelsson, a painter and photographer who lives on the small south coast island of Vestmannaeyjar (the Westmen Isles). His images may look unreal to “orthodox” photographers, but that’s exactly what he wants, the avoidance of kitsch. All the images below are his, and they speak for themselves.

“From an early age I enjoyed paging through books about art and admired the paintings of many painters, ranging from the renaissance masters to contemporaries as well as the few painters working in my home town of Vestmannaeyjar, Iceland. Nowadays I find inspiration for my photography in the works of painters like Edvard Munch, Odd Nerdrum, Lucian Freud and J.M.V. Turner, as well as in many of the classic and contemporary photographers.“

Ásmundur E. Þorkelsson

A Rift (Álfagjá (Elves rift))

“I didn’t notice any elves on my way through. Just as well, according to Icelandic folklore you are most likely to notice them if you disturb their peace.”

Chimneys

“This is a part of the electrical power plant on the Reykjanes peninsula just before sunset. I really liked how the setting sun gave the stainless steel chimneys a copper like shine.”

December Sun((Thingvellir National Park)

“This is river Öxará and the image was taken in early December when the sun just manages to lift itself above the horizon.”

High Noon

“Snow, warm water and sun. Just to clarify. This is not a sunset, it’s taken just before noon at 12:18 (24h format). “

Hólmaberg

“I sat down one autumn day on the edge of Hólmaberg to make an image about the strong waves breaking on the rocks down below. Just to give you some idea on the proportions in this frame I would guess that the lighthouse is a at least 10m high.”

Ice and Fire ((The Blue Lagoon SPA)

“The apparent fire is just illuminated steam rising from the outdoor spa.”

Kaldakvísl

“The name means “Cold river”. How appropriate. It’s in the Mosfellsdalur valley, the most common route between Reykjavik and Thingvellir. This is taken at the break of dawn in early December.”

Lifering and Three Whaleboats

“The entire Icelandic whaling fleet in Reykjavik harbour where it has been for the last two decades, collecting rust. At the time of shooting it was expected that this fleet would not be moved for the foreseeable future. But just a month later the Minister for fisheries announced a quota of 9 fin whales. Many had hoped that these magnificent vessels could serve some other purpose like whale watching.

Needs Fixin’ (Hvassahraun)

“The place is Hvassahraun, just west of Reykjavík. I’ve driven past this house twice a day for the past 8 years and I saw right away that it might make a good subject but didn’t get around to making an image of it until recently. I guess I’m a textbook case of procrastination syndrome.”

Remains of the Day (Nauthólsvík in Reykjavík)

Remains of Winter (Straumsvík)

“On my way home from work one day in March I made a brief stop at this place in Straumsvík, a stone throw away from the aluminium smelter which greets all foreign visitors on their way to Reykjavík.”

River of Dreams (Elliðaárdalur Valley)

“This is river Elliðaá in the Elliðaárdalur valley. It’s a beautiful park located in the geographical center of Reykjavík. The river has wild salmon and fishing there costs a small fortune. But it’s free to walk around and take photos.”

Steaming Pond (Öskjuhlíð)

“I had this image in my mind for a few months before actually finding the right place and atmosphere, which was in Öskjuhlíð. When I finally arrived I discovered that neither wide angle nor normal lens was enough for the desired effect. So trespassing was the only option.”

Summer Night (Húsafell)

Summer Night in Reykjavík (Elliðaárdalur Valley)

“I took this image in the Elliðaárdalur Valley. Maybe this color palette can be attributed to the fact that I was sick at the time of processing. The palette reminds me of the cover art of the Led Zeppelin album Houses of the Holy.”

Sunset at the Beach

“This is the geothermal beach in Reykjavík. Swimming in the cold sea is a hot trend now and most day’s you could find a few people taking a brief swim in the freezing north Atlantic ocean.”

The Perilous Bridge (Svartsengi)

“The place is Svartsengi, home to a geothermal powerplant and the Blue lagoon. I used my lunch break the other day to take a short walk around the place with my camera.”

Misty Mountain (Mt. Thorbjorn)

Shattered Dreams

Sigurhæðir

“Sigurhæðir might be translated to “Victory heights”. This house was built by Matthías Jochumsson in 1903. Matthías was a priest and a poet and the author of the poem “Lofsöngur” a.k.a. “Ó guð vors lands”, Iceland’s national anthem.”

Contact the Photographer: Ásmundur E. Þorkelsson

Ásmundur on Flickr
asmundur.shutterchance.com – Photoblog
High Dynamic Range Images
Ásmundur E. Þorkelsson on The Icelandic Wonder

Bookmark It

21+ Fresh Ajax CSS Tables

Mao-tun — Fri, 02 Oct 2009 18:24:36 +0000

Not many web designers have fun when it comes to styling tabular data. We have taken a close look at today’s best functioning and styled tables to showcase over 15 modern css and Ajax tables teaching you some useful techniques for displaying information in a tabular mode using sorting or filtering functions.

1) Tablecloth – Css Globe has decided to present Tablecloth. Which is a lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements.

2) Create a table like Orbitz’s airline flights- The Css Guy taught us how to create a table that would give an indication of relationships among the information provided for example – clicking on a cell should highlight the associated cell in the top row and left most column.

3) A CSS styled table- Veerle Duoh has demonstrated a beautiful usage of tables, for tabular data while implementing them with accessibility in mind and how to make them appealing for the eye using CSS.

4) Sortable Table Sort the columns in a table and filter elements in the table.

5) Row Locking with CSS and JavaScript

- Again The Css Guy refered to this technique as ‘row locking’, since the effect stays in place until the user re-clicks (or unlocks) the row.

He also added another example to Lock rows with radios .

6) Vertical scrolling tablesIf you have a lot of table data but not much room to display it, then this might be the answer. A css only styled table with fixed column headings and footer and scrolling content./p>

7) Replicating a Tree table-The aim is to replicate a graphic table tree using HTML./p>

8 ) Paginate, sort and search a table with Ajax and Rails-This example provide a dynamic interface which doesn’t need to reload the entire page when the table changes.

9) Collapsible tables with DOM and CSS-This script add the arrow images in the footer allowing the table to be collapsed and expanded.

10) TableSorter plug-in for jQuery-Its main features include Multi-column sorting, Support for rowspan and colspan on TH elements and many other features

11) Stripe your tables the OO way-The ‘stripe’ method runs through each row in the specified table and applies the ‘alt’ class, then adds onmouseover and onmouseout functions.

12) MOOTOOLS javascript Table Row & Column highlighting-This shows an mootools javascript example that highlights the table row and column of the cell you are hovering over.

13) CSS Table Gallery-This is a showcase of 93 styled tables.

14) jQuery Table FilterThis example sorts/filters multiple columns

15) Sortable/Resizable/Editable TableKit TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.

16) Make all your tables sortable

17) Zebra TablesAlistapart has provided us an excellent example of using JavaScript and the DOM to apply background-color styles to table cells.

18 ) Standardista Table Sorting is a JavaScript module that lets you sort an HTML data table by any column.

19) GridView3 Example

20) Mootable Because they are made from standard tables, they degrade nicely.

21) Drag & Drop Sortable Lists with JavaScript and CSS

Bookmark It