Recent Posts
Woork
Return To Blog Listing
A blog about technology, programming, engineering and my personal interests.
Recent Posts Tagged With 'html'
Elegant glass style navigation bar using CSS and toggle animated effect
This tutorial illustrates how to design an elegant glass style navigation bar with a nice toggle animation effect, using CSS and MooTools. The result is something like this:Moving your mouse over a ta...
25 Awesome tutorials for web designers
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 post :) Take a look!1. Most used CSS TricksA nice compilatio...
Tips to design your site for mobile devices
Some day ago my friend Lucas asked to me some suggest to design a mobile version of his blog. So, in this post I want to illustrate some simple tips about how to develop a mobile version of your site ...
Useful tips to enrich your HTML Forms
In the past months I already dedicated several post about forms design and usability. In this post I want to share some simple tips useful to enrich your forms with various elements such as suggest me...
Nice login and signup panel Newsvine like using CSS
Yesterday a reader of my blog, Benjamin, asked to me a suggest for an idea to design a simple login/register section for his site. So I suggested him to take inspiration form the panel used on Newsvin...
FORM elements design using CSS and list (ul and dl)
After my last post (Clean and pure CSS FORM design) I receive a lot of messages with some suggests, opinions and critics about the method illustrated in these post to design a FORM using pure CSS code...
Nice animated menu using CSS and Mootools
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. This is the basic version with a basic design, but yo...
Two CSS vertical menu with show/hide effects
CSS menu and "Web 2.0" transition effects are topics very popular on my site and in general I receive a lot of code requests about these arguments. So I wrote this simple tutorial with two vertical m...
Nice comments counter style for your blog post
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. This is the result:You can download the source code ...
Using CSS and Mootools to simulate Flash horizontal navigation effect
Some year ago I was a big Macromedia/Adobe Flash fan. Let me say... at that time, if you used Flash for your websites you was really cool and ok... I admit it, I liked the simplicity to place everythi...
CSS Message Box collection
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, del...
Clean Tab Bar Digg-like using CSS
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). ...
Write a well structured CSS file without becoming crazy
This is a descriptive post about how to write a well structured CSS file. I already spoken about code readability in CSS files, but after several most specific requests about this argument (mainly abo...
How to design a sexy header for your site using CSS
Yesterday I received a lot of positive messages about the new template of my site. Expecially for the new header (in particular the green bar on top of the page). Some of my readers asked to me to ded...
Some Blogger Tips you probably don't know
Blogger or WordPress? A blogspot.com subdomain or a .com domain? These are some recurrent questions which people do when they want to start a "professional" blog. My personal opinion is Blogger is the...
Liquid expandable section with mootools toggle effect
My friend Tom asked to me how to add the same mootools toggle effect (present on this post about Sliding top panel using mootools) to my previous post about liquid expandable section with rounded corn...
Liquid expandable section with rounded corners using CSS
This tutorial explains how to design a nice liquid expandable section with rounded corners (top-left, top-right, bottom-left, bottom-right) using some lines of CSS, HTML and JavaScript code.You can re...
Nice Ajax effect for message box using Mootools
My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed...
Elegant navigation bar using CSS
This tutorial explains how to design an elegant navigation bar (gettyone inspired) for your site using CSS. The result is like this: Live preview Download this tutorialStep 1: Navigation bar HTML Co...
Are you a CSS fanatic?
After my latest post about how to design a beautiful form using CSS, I received a lot of messages from some readers who accuse me to be a "CSS fanatic" :). They asked to me why I spend my time coding ...
Beautiful CSS Form
This tutorial explains how to design a beautiful form (Facebook inspired) using a clean CSS design with only <label> and <input> tags to simulate an HTML <table> structure. You can ...
Sort table rows using Ajax
Some days ago I was looking for a good and simple way to sort data into a table with a simple click on table headers and I found this interesting framework: Stuart Langridge's sorttable.js. This tutor...
Gettyone-like search options menu with Scriptaculous
My friend Thomas asked to me how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to ...
Effect appear (fade-in) using Scriptaculous
My friend Ivan asked to me how to implement the same Digg-like fade-in effect which you can see when you click on the Login link on the Digg topbar. This is very simple using Scriptaculous and toggle ...
Tabbed search bar using CSS and Javascript
This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set "active" the selected tab and changes the value of an hidden <input> element to s...
Socialiconize your site
This post explains how to use my CSS file and some lines of HTML code (unordered list with list elements) to add social-icons on your site with a link to your profile. See my social network section on...
Flickr like horizontal menu
This tutorial explains how to implement an horizontal menu Flickr-like using CSS and Javascript to show/hide sub-menu: Download this tutorialStep 1: introductionI used a simple javascript function sh...
Toggle effect using Scriptaculous
This tutorial explains how to implement a simple Toggle effect use Scriptaculous framework. I prepared a simple tutorial you can download to see it in action: Download this tutorialTo use scriptaculou...
Add Design Float button on Blogger template
Design Float is a great resource - digg-like - to share stories about Web Design, CSS, Identity and Branding, Digital art and Illustration. This tutorial explains how to add a Float it! button on each...
Simplicity is better: some suggestions for a clean blog layout
In the past week I received many good comments about the design of my blog and some visitors asked to me suggestions about how to improve their site layout. I want to share with you some tips I think ...