10 Fonts to design original logos

Are you a designer looking for nice fonts to design high quality logos? Take a look at these 10 free fonts you might use to design impressive logos for your customers.

This collection includes Unit Rounded Bold, Helvetica Neue, Qlassik, Punk's not dead, Chica Monospace, Kyra Lynn, Nicotine, Light Out, Anja Eliane and Danube.


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




2. Helvetica Neue
Helvetica Neue is absolutely the font I prefer in this collection. Clean and professional:




3. Qlassik (download)
Another font I like very much:




4. Punk's not dead (download)
Punk's not dead is "dirty" font to design grunge logos:





5. Chica Monospace (download)
A font with an optimal legibility and an elegant style:




6. Kyra Lynn (download)
Kyra Lynn is another "dirty" font for grunge logos:





7. Nicotine (download)
A bold font for big logos:





8. Light Out (download)





9. Anja Eliane (download)
Anja Eliane is a bold rounded box. Best result in medium-big size.





10. Danube (download)
A courious font for modern logo design.

 

Read More

5 Photoshop and Illustrator brushes set for web designer

This collection includes over 60 brushes: pencil lines, grunge Polaroid photos, diagonal lines for webpages background, safety pins and shape tags.


1. Lineart Brush (Download)
This brush for Illustrator will make your strokes look like they were drawn with a pencil. Thin were the stroke begins, wider in the middle, and back to thin were the stroke ends.

Each size comes in two variations - one with the stroke getting wider to the left and one with the stroke getting wider to the right. If you need other sizes just copy one of the sizes and modify it.


2. Polaroid Brushes (Download)
A nice collection of Polaroid brushes, for Photoshop useful to be used in grunge or vintage website style:

3. Diagonal Lines (Download)
This set of 17 diagonal lines brushes useful to design quickly background pattern for your websites.

4. Safety Pin (Download)
This is a set with six nice pin brushes for Photoshop.

5. Shape Tags (Download)
This is another brushes set of 23 shape tag very useful to design original tags in your websites.

If you have an interesting brushes set and you want to share it please add a comment!

Read More

Beautiful and free social websites icon set for bloggers

I want to suggest you this beautiful and free icon set of the most popular social websites "in a bottle" for bloggers (for personal and not for commercial use) designed from the guys of Templates.com.

Take a look at Templates.com

Free Icon set for bloggers consists of 10 icons: StumbleUpon.com, Ma.gnolia.com, Technorati.com, del.icio.us, DesignFloat.com, Digg.com, RSS, Twitter.com, Facebook.com, Reddit.com. Each icon is produced in the following sizes: 80х80, 64х64, 32х32.

If you are courious about icon desing, you can learn more about the creation process of this Icon Set here.

Take a look at this link to download this icon set.

Templates.com

Read More

Elegant glass style navigation bar using CSS and toggle animated effect

Navigation bar is an important element of website design: this is an example which uses a dynamic submenu to display sublinks of the main tabs. 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 tab in the main menu, the submenu display several links related to the "topic" of the tab. On the right of the navigation bar, clicking on Hide submenu link, the submenu disappears/appears with a nice toggle animation.

Download the full code of this tutorial, ready to be customized and used in your web projects.

Download source code


1. HTML code
First of all, take a look at HTML code I used to design our navigation bar: all tabs are contained into a layer with id="navigation" and I used a list to design them. The structure is:

...and the code is:

<div id="navigation">
<a href="#" class="right_link" id="op1">Hide submenu</a>
<ul id="mymenu">

<li id="s1"><a href="#">Home</a></li>
<li id="s2"><a href="#">Tutorials</a></li>
<li id="s3"><a href="#">Showcases</a></li>
<li id="s4"><a href="#">Freebies</a></li>

</ul>
</div>

The submenu contains, for each tab, several links within some unordered lists:

<div id="sublinks">
<ul id="s1_m">

<li><a href="#">Upcoming</a></li>
<li><a href="#">Popular</a></li>
<li><a href="#">Best of...</a></li>

</ul>

<ul id="s2_m">

<li><a href="#">Ajax</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Photoshop</a></li>

</ul>

<ul id="s3_m">

<li><a href="#">CSS Websites</a></li>
<li><a href="#">Flash Websites</a></li>
<li><a href="#">Images</a></li>

</ul>

<ul id="s4_m">

<li><a href="#">Fonts</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Icons</a></li>

</ul>
</div>

Each list is related to a tab in the main menu (for example, ID tab= S1 -> ID list=S1_m). If you want to add other elements to the submenu you have just to add a new <ul> element with a progressive ID such as:

<ul id="s4_m">

<li><a href="#">...your links within li tag... </a></li>
...
</ul>

</div>

How you can see it's not complicated. If you are interested on CSS code download the source code of this tutorial. Now we are ready to take a look at the JavaScript code to enable animated effect.


3. Mootools + unobtrusive JavaScript code
At this point, we can try to implement all animation effects for this navigation bar using unobtrusive JavaScript technique, to separe JavaScript code form the content of the page. How I said, I used MooTools to implement toggle effect, so we have to add a link to MooTools framework copying the following code within the <head> tag of the web page:

<script type="text/javascript" src="mootools.svn.js"></script>

... and copy the following code below the previous code:

<script type="text/javascript">
window.addEvent('load', function(){

// Hide all submenu link
$('sublinks').getElements('ul').setStyle('display', 'none');

// Show by default the first submenu related to the tab "Home"
$('s1_m').setStyle('display', 'block');

$$('#mymenu li').each(function(el){
el.getElement('a').addEvent('mouseover', function(subLinkId){

var layer = subLinkId+"_m";

// Display current submenu
$('sublinks').getElements('ul').setStyle('display', 'none');
$(layer).setStyle('display', 'block');
}.pass( el.id)

);
});

// --------------------------------------- //
// SHOW and HIDE Submenu with MooTools Toggle animation

// Get the layer to animate
var mySlide = new Fx.Slide('sublinks');

// Prepare onClick event for the link with ID="op1"
$('op1').addEvent('click', function(e){

// Get text contained into the link :"Hide submenu"
var textLink = $('op1').innerHTML;

// When an user click on this link update text: "Hide submenu" or "Display submenu"
if(textLink=='Hide submenu'){
$('op1').innerHTML = 'Display submenu';
} else {
$('op1').innerHTML = 'Hide submenu';
}

// Event Toggle for the Submenu
e = new Event(e);
mySlide.toggle();
e.stop();
});

});

</script>

The code is very simple. I used all we already saw in my previous post about MooTools, but if you are a newbie I suggest you to take a look at this post and this post.

For suggests or questions please add a comment! Thanks!

Download source code

Read More

Design a stunning Alert Box using MooTools

Do you want to change the default style of JavaScript Alert Box? Do you want to add a nice animation with MooTools? Take a look at this post!

About the Author

Eduardo Sada
Programmer and Web Designer
Coders.me

The Script

This tutorial explains how to design a stunning Alert Box which changes and improves the classic look of JavaScript Alert Boxes.

The result is something like these you can see in the previous picture. Alert box appears on the page, above all other page elements with a nice animation. Try it!

Download source code Take a look here for a live preview


1. How to install this script
Downloading the package you have all do you need to use this nice script. First of all, add a link to MooTools Framework and to sexyalertbox.js within the <head> tag of the page in this way:

<script src="mootools.js" type="text/javascript"></script>
<script src="sexyalertbox.v1.js" type="text/javascript"></script>

...then add this link to the CSS file:

<link rel="stylesheet" href="sexyalertbox.css" type="text/css" media="all" />

...and if you want to change the default look of Alert Box you can customize the CSS file how you prefer.

2. HTML Code
Add this line of code within the <body> tag:

<script type="text/javascript">
window.addEvent('domready', function() {

Sexy = new SexyAlertBox();

});
</script>

...and for example create a link which display an alert box with a simple message "Nice!":

<a href="#" onclick="Sexy.alert('Nice!'); return false;">Show a JavaScript alert with a new look!</a>

In this way when an user click on this link an alert box will appear above all other elements of the page. It's all! For other info, please take a look at the documentation you can find at this link.

Related Post
MooTools - Basic Tips for Web Designer
MooTools - Get elements ID using unobtrusive code

Read More

Creative way to present yourself in a 40 second long video

Are you looking for a creative way to present yourself? This video is an useful inspiration.

Yesterday I was looking for something interesting and original to make a short video clip to promote my blog in occasion of two millions visits I almost caught up after my first 8 months on-line (at this moment my statcounter counter display 1,707,589 visits). So I find on YouTube this stunning video of Sebastian Baptista, entitled EGO:

Sebastian used kinetic typography effects and the final result is awesome. Take a look at the video here:

Do you have an original video presentation? Add a comment with your link!

Read More

MooTools Basic Tips (lesson 2): get elements ID using unobtrusive code

After my previous post about MooTools Basic Tips for web designer I received a lot of excited messages from my readers, lovers of this beautiful framework, for this session of lessons dedicated to MooTools. Thanks a lot guys! I really appreciate your support! So... a question which a lot of peopole asked to me was how it's possible to get the ID of an element (for example the ID of an element into a list) and associate to this element some event (change background, display an alert message...). In this post I want to illustrate how to get the ID of DOM elements using MooTools and unobtrusive elegant code.


1. An "Obtrusive" way to implement it
Before to explain how to do it with MooTools, I think it's better take a look at the following HTML code:

<ul id="myList">

<li id="li_1">
<a href="#" onClick="javascript:getId('1')">Get this ID</a>
</li>
<li id="li_2">
<a href="#" onClick="javascript:getId(2)">Get this ID</a>
</li>
<li id="li_3">
<a href="#" onClick="javascript:getId(3)">Get this ID</a>
</li>

</ul>

This is a simple list with some list elements with id "li_1", "li_2", "li_3". Each list element contains within a link which calls, with an event onClik, a Javascript function getId(). This function takes in input the number related to the list element ID, within which the link is contained, displaying a simple alert window with the ID of the element you've chosed. The result is something like this:

Javascript code is something like the following:

<script type="text/javascript">
function getId(el){

var listElement = el;
alert("The ID of the list element you've chosen is: li_"+listElement);

}
</script>

...it's simple and clear if you have basic javascript notions. But why this code is obtrusive?. Because, withing HTML code, it contains a call to the JavaScript function getId():

<a href="#" onClick="javascript:getId('1')">Get this ID</a>

It's not wrong. But it's better to separate HTML code from JavaScript code. How you can do it? Read more...


2. The unobtrusive way to implement it using MooTools
Ok, now we are ready to see how we can implement the same script using unobtrusive code with MooTools. First, take a look at the HTML code:

<ul id="myList">

<li id="li_1"><a href="#">Get this ID</a></li>
<li id="li_2"><a href="#">Get this ID</a></li>
<li id="li_3"><a href="#">Get this ID</a></li>

</ul>

What's changed from the step 1? I removed onClick event within each link:

<li id="li_1"><a href="#" onClick="javascript:getId('1')" >Get this ID</a></li>

Than, how changes JavaScript code to get the ID of the element? First, remember to add a link to MooTools framework in the <head> tag of the page:

Copy and paste the following code within the <head> tag:

<script type="text/javascript" src="mootools.svn.js"></script>

... and now copy, below the previous code, the following:

<script type="text/javascript">

window.addEvent('load', function(){
$('myList').getElements('li').each(function(el){
el.getElement('a').addEvent('click', function(listID){
alert("The ID of the list element you've chosen is: "+listID);
}.pass(el.id)
);
});
});

</script>

How you can see, I used getElements() method to get all <li> tags within <ul> list with ID "myList ". Every times you click on <a> element contained into a <li> tag, the function display an alert window with the ID of the element you've chosed, passing the ID using .pass(el.id) method. It's all and it's very simple!

Take a look at the source code:

Download source code

Add a comment for other info or request!


Related Content
MooTools Basic Tips for Web Designer (Lesson 1)

Read More