yensdesign – Tutorials, Web Design and Coding

Daily free tutorials about web design, coding, jquery and more

Archive for the ‘Web Design’ Category

Stationery: Free Icon Set

Sunday, January 11th, 2009

Hi guys! While we are writting next tutorials about web development, we are recommending you new freebies for your projects.

This time is the Stationery Icon Set:

In this case we are presenting you the Stationery Icon Set composed of 22 totally free icons created by deziner.
It contains book, brush, crayon, clip, color pencils, document, eraser, pad, palette, post-it note, scale and scissors.

You can download the Stationary Icon Set here and remember that it contains the Fireworks source file too!

Bright!: A free set of 148 hand-crafted icons

Thursday, January 8th, 2009

Hi guys this time in Freebies we are presenting you a new pack of smooth and beautiful icons composed of 148 hand-crafted icons for personal and commercial purposes for free: Bright!

In Words of their creators: would like to present one of our most lovely set of icons as a free gift, the Bright! Icon Set. This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software. This is a meaningful giveaway from us to community, so you can use Bright! for free for your personal and commercial projects.

Remember that you can download the pack here or by clicking the image above.

We hope you can use it to improve a little more your web applications ;)

Founded via: Webappers.

Improving Search Boxes with jQuery

Wednesday, January 7th, 2009

Hi there guys! We continue writting tutorials to try to improve our website’s interface. Search boxes are in the air and in our days they become a very important part of our websites, so it will be interesting if we can do them a little better.

This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

As always I show you a preview image linking the final result:

You can try the living example before continue reading the tutorial.

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

Let’s learn guys!


How to create a plugin for jQuery

Tuesday, December 23rd, 2008

As you may notice we love jQuery over here because in addition to being one of the best javascript libraries on the web It can be extended so easily, from the basic to the advanced features.

In this case We will learn the basic theory about plugins in jQuery and how to create them with 2 real examples: a simple alert plugin & other plugin that will highlight all inputs in a page when them get the focus.

So get ready to learn guys!


1006 Quality Icons for your websites

Monday, December 22nd, 2008

The Last entry in freebies section has featured a set of 128 free icons with a great detail in 48×48 pixels and PNG format, but this time We present you more quantity: 1006 icons but still having the same quality:

These icons are available only in 16×16 pixels, you can download the 1006 quality icons pack by clicking the above image or by clicking here.

These icons can be used free for any personal or commercial projects and are licensed under a Creative Commons Attribution 3.0 license. If you want to remove the attribution, you must purchase license.

Via pinvoke.

Boost up your designing skills with 650-568 web designing course and learn how to create amazing web icon designs using 642-873 guide and 642-446 design tutorials.

Cheat Sheets Pack for Webmasters

Monday, December 22nd, 2008

If you are very forgetful as I am and sometimes when you are “in the flow” and you cann’t remember a javascript function, a CSS property you know, it can be very helpful take your cheat sheet and remember it with a simple glance. You can read your desired cheat sheet in your screen or maybe just print it as a lot of people used to do, with the time you will find it faster and faster because you know the specific area where you must look to find that CSS property that you forgot (remember that visual memory it’s very powerful!).

You can download the Full Cheat sheets pack for Webmasters or download one by one the cheat sheets:

I hope it be useful for those forgetful heads :P


Fast Tip: Breaking events propagation in Javascript

Friday, December 19th, 2008

An important feature of Javascript you must know is the events propagation. This what makes is trigger all events to the parents when a child event is captured (like a bubble). So, if you click in a div element, the click will active the onclick event in the div parent, and in the grandparent… and so until the body element.

This can often be helpful, but many others can be a big trouble. Of course you can disable this feature with the code below:

[code language="Javascript"]
	window.event.cancelBubble = true;

else if(e.stopPropagation) e.stopPropagation();

You can view a little example so that you can see it in action after the break.

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.


Useful jQuery Cheatsheet

Wednesday, December 17th, 2008

Finally I found a great, useful & free resource for our jQuery projects via Color Charge, a jQuery Cheatsheet available in printable A4 format:

jQuery Cheatsheet

It will be very useful for those who are very forgetful :D

Creating an OS Web Interface in jQuery (Part I)

Tuesday, December 16th, 2008

Finally here you have the First Part of this series of tutorials to recreate an OS Web Interface with our lovely jQuery javascript library.

As you could see in the preview of this tutorial we will focus to create the drag & drop interaction, the double click on icons and a basic taskbar with a start disabled button and a real clock of the system.

As always, here you have a preview of the final result:

It will be very interesting how we can achieve all our goals without using thir party plugins etc.

You can try the living example before continue reading the tutorial.

Tested in: Firefox, Internet Explorer 6 (bad display of PNG icons, IE bug) & 7, Opera, Safari & Chrome.

So let’s go guys!


Fast Tip: How to cancel right click context menu in jQuery

Friday, December 12th, 2008

Hi there guys! While I was working in the next tutorial I have been encountered with a problem: How can I block / cancel the context menu when I do right click on the screen?

There are a lot of examples and scripts in javascript, but one more time jQuery makes it easy! Here you have the code:

[code language="javascript"]
		return false;

This code works in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

One more thing guys… the next tutorial will be released on next Monday as a part of serie of tutorials that will be very very BIG, interesting and useful :)

See you soon!