woork / Floated
This is a list of my preferred Handwritten fonts I often use in my design projects. I included a link to download each font apart and some suggest about how you can use them.
(Click to Enlarge)
This is a collection of the best tutorials for web designers I found this month browsing some websites I like. It also includes some of my popular post :) Take a look!
This tutorial is another version of my News Ticker with Mootools I published yesterday. I want to reply to all that wrote me asking for information about how to implement a news ticker with horizontal scroller. Don't panic, it's very simple to imple
(Click to Enlarge)
This tutorial explains how to implement a News Ticker (Newsvine LIVE panel - like), with news vertical scrolling, using mootools. It's very simple and quick to implement in your web projects.
(Click to Enlarge)
This post illustrates some simple tips to develp a mobile version of your site: choosing an URL address, using a redirect script for mobile devices and designing a mobile-friendly layout using CSS and HTML.
(Click to Enlarge)
In this post I want to share some simple tips useful to enrich your forms with various elements such as suggest messages, autosuggest feature instead of tag, simple check during data input and how to show hidden fields selecting a radio element opt
(Click to Enlarge)
Since I started my blog I used this style (pencil + handwritten), to design all images I added to my post. Now, I can say it has been a good choice because it's a little particular which my readers love and, in some way, gives a little bit of person
(Click to Enlarge)
This tutorial explains how to design a simple Newsvine-like panel which includes both options (register and log-in) and appears/disappears cliking on a link in the navigation bar.
(Click to Enlarge)
This tutorial explains how to design a navigation bar with tabs using CSS and sliding doors effect. I also used a single background image for the status of each tab (link, hover, active) changing only the position property for the CSS background att
(Click to Enlarge)
This tutorial illustrates how to design a nice CSS menu with a list of feed reader icons.
(Click to Enlarge)
This tutorial illustrates how to design a FORM using list to simulate a "table" structure where to place your form elements (input, radio, checkbox, button...)
(Click to Enlarge)
This tutorial illustrates a simple way to design pure CSS form without using html tables
(Click to Enlarge)
This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and an icon set you like it.
(Click to Enlarge)
This tutorial illustrates how to design a nice pastel color menu with a dynamic submenu which appears when you select a link in the main menu, using CSS and some lines of javascript code.
(Click to Enlarge)
This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.
(Click to Enlarge)
This tutorial illustrates how to implement a nice animated menu using Mootools and some lines of CSS and HTML code ready to reuse in your project.
(Click to Enlarge)
This post is a compilation of five Scriptaculous tutorials ready to use in your projects (with source code to download) inspired to some Web 2.0 sites. It includes: images slider Flickr-like, opacity change, drag and drop to reorder a list, fade-in
(Click to Enlarge)
This post illustrates some tips which can help you to write a better CSS code using a Top-Down approach.
(Click to Enlarge)
This is a tutorial with two CSS vertical menu examples with show/hide menu effects. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.
This post illustrates how to design a nice comments counter for your blog post and obtain an elegant post header using just some lines of CSS code.
(Click to Enlarge)
This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.
Message boxes are useful elements to display status messages after or during a specific user request. Some days ago I wrote this post about how to implement a nice Ajax chains of effects (fade in, delay, fade out) for a common message box using moot
(Click to Enlarge)
This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover).
This tutorial explains how to design a perfect pagination style using HTML and CSS for search results or more in general to split a long list of records in more pages.
(Click to Enlarge)
Some tips to design a simple, clear typographic header for your site.
