iphone4

Wednesday, March 5, 2008

Sliding top panel using mootools

Adding Mootools effect to your pages you can make your site more attractive. Take a look at the Slide effect.

This tutorial explains how to realize a simple sliding top panel (top/down) using mootools, some line of css code and JavaScript. The result is something like this:

Click on the tab "Show Panel" to slide top/down the panel with a nice animation.

Download this tutorial

Step 1: HTML Code
HTML code is very simple: we have a DIV with ID "top-panel" which is the and a another layer with ID sub-panel which contains a link to slide up/dow our panel:

<div id="top-panel">

</div>
<div id="sub-panel">
<a href="#" id="toggle"><span>Show Panel</span<</a>
</div>

...remember to add mootools framework in the page <head> tag:

Step 2: Css code
This is only a proposal about the look of your panel, but you can customize it how you prefer:

#top-panel{
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}

Step 3: JavaScript Function
Add this simple JavaScript in the <head> tag of the page:

It's all! Download this tutorial and try it.

Download this tutorial

IconGalore.com: quality icons at affordable price

IconGalore.com is a fantastic site where you can find an awesome collection of icon sets (XP and Vista style) with over 5000 unique icons and 900000 files ready to download.

Icons design quality is on top of the category and the price is very low if compared to other similars services at this level of design.

Icon Sets
If you are a freelance or a design company and you are looking for a nice icon set to make more attractive your project, IconGalore is the definitive place where you can find easily what you are looking for. All icon sets available are divided in categories such as Database Icons, Accounting Software Icons, Email Application Icons, Web Icons, E-commerce Icons and other ones. For each icon there are six formats, active, inactive, over states, five different sizes and 150 files included.

Icons are offered in seven different size (16 x 16 px, 24 x 24 px, 32 x 32 px, 48 x 48 px, 64 x 64 px, 128 x 128 px, 256 x 256 px) and in different formats (gif, icon, png).

Customization service
If you don't find what you need, you can require a customization service to design a icon set which look exactly with your project, saving you lots of your time and money and being sure for a great result in term of quality. To require the customization service, you have only to fill up the online customization form with a detailed description about icons you want, the program/application in which you will you be using, format and size. A Live chat support is available to help you in this process in any moment.

All icons made for you are royalty free which means you can use them in any or all of your projects/applications without addition payment. You can pay with PayPal.com and 2Checkout.com in a simple and very secure way.

Free Download
A free download area with a nice XP style icon set is available here.

http://www.icongalore.com

Related post
Get a site review for your blog

Lovable font-family for your site

When I design a website or more in general a graphic composition there are two things which bother me: the color palette and the font-family.

After some trials I find a color palette which satisfy me pretty simply but when I have to choose the font...

The winner is...
In general my choice is always limited to "Arial" or "Verdana" but sincerly I am used to using Arial font-family with size 12px or 13px for text body and 18px with font-weight set to strong for text header. If you like how this font looks on sites like delicious, digg, flickr, "Arial" is your perfect font :)

Verdana
I like how "Verdana" looks... but only for to size smaller then 12px. I think the perfect size for this font is 11px with a line-height set to 16px-18px. I don't suggest it for the text body: it's small and can result difficult to read with this size for some users.

You can see a good use of Verdana font on A List Apart and the result is very elegant.

Lucida
Recently, how you can also see on this blog, I am addicted form this combination of fonts: "Lucida" with size 12px for text body...

font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;

... and "Georgia" with a big size (32px, 36px...) for text header:

font-family: Georgia, "Times New Roman", Times, serif;

And you, which font-family do you prefer? :))

Tuesday, March 4, 2008

Liquid expandable section with rounded corners using CSS

A simple tutorial to apply sliding doors technique to expandable HTML sections with rounded corners.

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 reuse it in your project changing the colors and the size of section header and of the section body or more in general all you want.

Live preview

Download this tutorial

Step 1: HTML code
The section I want to design has a header and a body. Our final result is something like this:

To design the header we can use a <h2> tag and for the body a DIV layer with class attribute set to"section":

<h2><span><a href="#" onclick="expandSection('section1')">My Section</a></span></h2>
<div id="section1" class="section">
<span>
... add some text, images, links...
</span>
</div>

The link call a JavaScript function expandSection() which expande / contract the section body. If you have more than one section in your page you can modify each section body ID with a progressive number (section1, section2, section3...) to identify the element to expand / contract when you click on the section header of the same section.

To add rounded corners which fit automatically with the section width you can use this simple tricks I already used in this previous post:

You have simply add a <span> tag inside the <h2> element or more in general inside a container element (div, p, h1...). Then you have to apply a rounded image to the CSS background attribute of the container element (top-left corner) and another image to the CSS background attribute of the inner <span> element (top-right corner).

Step 2: CSS code
CSS code is very simple and you can modify it to adapt this tutorial to your requirements:

// Reset h2 default style
h2{ margin:0px;
padding:0px;
border:0px; }

h2{ color:#FFFFFF;
font-size:13px;
display:block;
background:url(img/h2_bg.gif) top left no-repeat #9A9A9A; }

h2 span{
padding:5px 10px;
background:url(img/h2_span_bg.gif) top right no-repeat;
display:block;
}

h2 a:link, h2 a:visited{
color:#FFFFFF;
text-decoration:none;
display:block; }

div.section {
background:url(img/section_bg_left.png) bottom left no-repeat #EEEEEE;
font-size:12px; }

div.section span{
background:url(img/section_bg_right.png) bottom right no-repeat;
padding:10px;
display:block; }

Background attribute for h2, h2 span, section, section span contains an image which is the rounded corner (respective top-left, top-right, bottom-left, bottom-right) for our section.

Step 3: JavaScript function to expand/contract the section body
This is the code for the function expandSection() we have already seen at this post. This function get as parameter in input the ID of the HTML element you want to expand/contract (in our case section1).

...the ID of the element is passed to te function from the following link in the Step 1 (in this case "section1"):

It's all! Download this tutorial and try it!

Download this tutorial

Monday, March 3, 2008

Nice Ajax effect for message box using Mootools

How to implement a simple chain effect in MooTools to implement sequential events.

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.

He want a sequence of events like this:

1. Submit a form
2. Display a message box with the message "Saving..."
3. When the Ajax request is complete display "Saved!" into the box and after some second it disappear with a fade-out effect.

How I said, you can image this list of "actions" like a "sequence" of effects. A simple way to implement a chain of effects like this is using mootools and this tutorial explains how to implement it with some lines of JavaScript code.

Live Preview

Download this tutorial (include mootools)

Step 1: HTML Code
HTML code is very simple. I added only the essential elements, the message box (with ID "box") and an input element with a button (with ID "save_button"), but you can customze it with a more complex structure:

Step 2: CSS Code
You can coose a style for your message box changing how you want these attributes:

#box {
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}

Remember to set the initial display attribute to "none". In this way the message box will appear only when an user submit the form:

Step 3: Javascript Code
Copy this code in the <head> tag of the page:

f you never used Mootools, but you are familiar with JavaScript, this line of code:

var box = $('box');

... let me say "it's equal" to:

var box = document.getElementById('box');

This line of code enable a delay of 1000 ms (1 second) before to apply fade-out effect:

this.start.delay(1000, this, {'opacity' : 0});

It's all!

Download this tutorial (include mootools)

Related Content
CSS Message Box collection

Sunday, March 2, 2008

Simple images slider to create Flickr-like slideshows

If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework.

Since long time I was looking for a simple way to implement a Flickr-like slideshow ("image carousel") and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.

So, to help my readers ;) I implemented a slideshow ready to use and this step-by-step tutorial explains how to customize it and use it in your web projects. Not fear! It's really simple!

Last update: March 10, 2008 - IE6 issue fixed

Download this tutorial

Step 1: HTML code
The HTML code for this tutorial is very simple. You have to include in the <head> tag of the page you want to display your slideshow these files:

..and this CSS file to stylize your slideshow:

Now you can add the following code into the <body> tag:

<li>...some content here.. </li>
<li>...some content here.. </li>
....

</ul>
</div>
<div class="buttons">
<div class="previous_button"></div>
<div class="next_button"></div>
<br />
</div>

You have to put the content you want to display on your slideshow (for example an image) into a <li> element of the <ul> list:

If you use a server side language (PHP, Coldfusion, ASP...) you can populate dinamically the list. For example if you are a PHP developer you could use some code like this:

<?php
// Include connection to your database
include('dbconnection.php');
$getImages_sql = 'SELECT * FROM IMAGES';
$getImages mysql_query($getImages_sql);?>
<ul>
<?php while ($row = mysql_fetch_array($getImages {?>

<?php } ?>
</ul>

... and add this these lines of code before to close the <body> tag:

Step 2: CSS code to stylize your slideshow
You can modify the look of your simply modifying the related style sheet. For example to change the slideshow width (to display in this way more or less images on your slideshow) you can change the width attribute of the following CSS elements:

#horizontal_carousel {
width: 250px;
height: 100px;
padding:10px;
background:#f6f6f6;
border:solid 1px #e9e9e9;
}
#horizontal_carousel .container {
width: 260px;
overflow: hidden;
}

...or if you want to change the look of horizontal previous / next buttons you can change the following code:

#horizontal_carousel .previous_button {
float: left;
width: 23px;
height: 7px;
background: url(img/but_prev.png) no-repeat;
z-index: 100;
cursor: pointer;
}

#horizontal_carousel .next_button {
float: left;
width: 23px;
height: 7px;
background: url(img/but_next.png) no-repeat;
z-index: 100;
cursor: pointer;
}

Internet Explorer 6 Issue Solved
Some readers signaled me an issue with Internet Explorer 6. An anonymous friend suggested the solution to fix it:

#horizontal_carousel .container {
position:relative;
width: 555px;
overflow: hidden;
}

Thanks!

Download this tutorial

Best resources on-line for color schemes generators

Color schemes generators are a good resource which helps web designers to find inspiration to create harmonious palette and design nice color schemes layout for web project or in general for graphic design.

This is a list with my preferred free on-line applications:

Adobe Kuler
Adobe Kuler is my preferred color scheme generator on line. It has a nice flash interface and offers a lot of option to create, manage and share your color schemes on-line with other members of the communty.

Adobe Kuler

Copaso
COPASO is an advanced color palette tool that helps you create the perfect color schemes and themes. With a scratch pad to save colors you're working with, a photo tool to extract colors and an advanced color picker and color theory wheel to give you tons of color inspiration. Using COPASO you can save your palettes to a private folder or download them to your local computer.

Copaso

ColorSchemer gallery
ColorSchemer is a software for PC and Mac to help designer to discover, design and manage color schemes. The ColorSchemer Gallery is an online community where ColorSchemer users can share and manage color schemes created with ColorSchemer.

ColorSchemer gallery

Color scheme from images on Flickr
This is a courious web application to get color schemes directly from images on Flickr.

visit this site

Colr.org Get color scheme from website
With colr.org you can find nice color schemes from your preferred websites simply typing the website URL in the searching form.

You can also generate color scheme from flickr images and save it and share it with other on-line users.

Colr.org

[ws] Color Scheme Generator
This is another color scheme generator with limited options but very simple to use.

ColorScheme Generator