yensdesign – Tutorials, Web Design and Coding

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

Archive for the ‘Web Design’ Category

Glossy eCommerce Icons: 32 Free Icons

Friday, January 23rd, 2009

Ey guys! First of all thank you so much one more time for your response to our tutorials, yesterday we have passed our daily unique visitors record! yayyy! :D

This time we are showing you 32 glossy icons from starfishwebconsulting for your eCommerce web applications:

Presenting 32 free glossy icons to use or remix in your eCommerce projects complete with master SVG file under GNU license.

You can download it by clicking on the above image or by clicking over here.

See you soon guys! Don’t forget to visit our forums to solve your doubts and share resources and remember you can follow us on twitter to know what are we doing in each moment ;)

Mastering CSS background-position

Thursday, January 22nd, 2009

Hi there guys! As you may know, we have published a lot of tutorials to learn how to improve the interaction of our web applications mainly using javascript and jQuery. We have created our layouts for these tutorials using xHTML and CSS and this time the CSS part will be the important thing and not a simple spectator.

We will learn how to use the CSS property background-position to create different kind of buttons, interfaces and more by using only one image as background. It will reduce the loading time and supress the user’s waiting on mouse over effects.

As always, you can try the living example over here.

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

It will be an interesting (and funny) tutorial, come on guys!

(more…)

The Ultimate Free Fonts Pack

Thursday, January 22nd, 2009

Hi there guys! Continuing the freebies section, we are recommending you a new set of free fonts with high quality to use in your designs.

We are showing you a new set of 10 high quality free fonts to use in your web designs. Most of recommended fonts got more than 2-3 styles and are available in TTF and OTF format.

Remember guys: Don’t overestimate the importance of typography in design!

(more…)

Cleanfolio: New Theme on Themeforest Released!

Wednesday, January 21st, 2009

What’s up guys! Last hours I have spent my spare time in creating anoter simple and clean theme for submit it to Themeforest, as you may know the marketplace of envato, where users can submit and buy (x)HTML, WordPress, Joomla themes and more.

This time I tried to create a very clean template for personal websites such portfolios with one thing in mind: tell to to world who I am. I am happy with the final result, considering the time invested in the theme.

I called it Cleanfolio, judge for yourselves :)

I have reused some interesting things in javascript from the Dark Elegance theme like validation form and a fade in / out effect to the transition between sections.

Comments about the theme please!!

Playing and Controlling MP3 songs and FLV videos with javascript

Tuesday, January 20th, 2009

Hi there guys! If you remember we have published a tutorial about How to create a music player interface in jQuery some weeks ago. Some of you have sent me e-mails, posted comments in the tutorial and in our forums asking about how to implement “the music” to the music player interface. And now I am here to show you the basics to acomplish it.

We are going to learn how to Load, Play and Control our MP3 songs and FLV videos to share them with our visitors in our websites by using javascript (some jQuery) and the flash player JW Player.

As always, you can try the living example over here.

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

Come on with me guys!

(more…)

Tools Icon Set: 8 Free Icons

Saturday, January 17th, 2009

Hi there guys! Via Smashingmagazine I have found a new set of totally free icons for our websites:

This set of 8 high quality icons was designed by David Mottram, containing all icons in .PNG format in resolutions 64×64px, 128×128px and 256×256px.

As I said, the set is available for download for free and can be used for any kind of purposes. It means that you can use it for personal and commercial projects, but cann’t be reselled, sublincensed, and so on…

Happy freebie guys, and thank you so much for helping us to grow so fast!

As always, remember you can follow us on twitter and solve your doubts in our forums!

jQuery 1.3: New release and happy birthday!

Thursday, January 15th, 2009

Last January 14th 2009 was the birthday of our lovely jQuery javascript library, Happy Birthday! Since January 14th 2006 jQuery team were improving more and more the library and yesterday they have released a new version: jQuery 1.3. And as you may suppose it comes with new great features:

  • Sizzle: A sizzlin’ hot CSS selector engine.
  • Live Events: Event delegation with a jQuery twist.
  • jQuery Event Overhaul: Completely rewired to simplify event handling.
  • HTML Injection Rewrite: Lightning-fast HTML appending.
  • Offset Rewrite: Super-quick position calculation.

So guys, let’s jump into new features, taking a look to some tests performance to see what’s going on with this 1.3 jQuery version and his performance.

(more…)

WebAppers: Free Web Application Icons Set

Wednesday, January 14th, 2009

Hi guys! Here we have a new free icons set composed of 20 icons specially designed for Web applications:

As you can see icons have a 3D effect and glossy style.

Icons come in 3 sizes; 48×48 px, 32×32 px, and 24×24 px. All of them are in PNG format with transparent background. Web Application Icons Set is completely Free for both personal and commercial projects in any way you like.

These icons were made by WebAppers.

Our JK0-016 web designing course will take your creative skills up to next level. Learn how to create unique web icons using 642-456 design tutorial and 642-384 guide.

How to Validate Forms in both sides using PHP and jQuery

Tuesday, January 13th, 2009

Hi guys and welcome to a new tutorial of yensdesign.com! Some of you ask us about the possibility of create a tutorial about how to validate forms in server side (using PHP). So i wrote a tutorial about it, adding some interesting features with jQuery:

We are going to learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.

As always, here you have a preview of what we are going to do:

You can try the living example before continue reading the tutorial. Remember that if you want to try the server side, you need to disable javascript in your web browser!

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

Let’s learn guys!

(more…)

Dark Elegance: New Theme on Themeforest Released!

Monday, January 12th, 2009

Hi there guys! Last hours I have spent my spare time in creating a simple and elegant theme for submit it to Themeforest, a new marketplace where users can submit and buy (x)HTML, WordPress, Joomla themes and more.

I tried to create a clean template for personal websites such portfolios, combining darks colors and light grays with smooth gradients. I am really happy with the final result, considering the time invested in the theme.

I called it Dark Elegance, judge for yourselves :)

Checkout Boobles theme!

I have used some interesting things in javascript like validation form and a fade in / out effect to the transition between category projects.

Talking about validation form… I will try to post something about how to validate basic forms in javascript / jQuery.

Comments about the theme please!!