Saturday, 29 March 2014

7 Free gorgeous hand-drawn icon sets for you

Hand drawn like icons are very gorgeous and they look sporty if you have something enthusiastic and lively niche of your website. Here are my picks, which I would definitely want you to use.

Hand drawn icons from Freepic

Hand drawn social media icons

hand drawn social media icons

49 hand-drawing icons set

Brainy Icons - educational and science icon pack

Brainy - free educational and sciece icon pack

Hand drawn vector icons

Hand drawn vector icons

Free set of 28 hand drawn icons

28 free hand drawn icons

Icons by

Hand drawn icons by dryicons

Please take care of copyrights of these works while you make use of them. Almost all of them are free, and that's why I've listed them, but still, obey and enjoy.


Wednesday, 19 March 2014

Decent images on deviantART for your website

A UI designer like me, is always looking for something which not only defines their niche, but expresses it thoughtfully. And you know, images do this for you much effectively.

 deviantART is a powerhouse for every designer. You get variety of purposeful, wholeheartedly crafted artworks from tons of artists. Many of them are free to use too! I'm listing out some decent artworks, you may consider adding into your project.

1. Blur

UI Hints: Decent images on deviantART for your website 

2. Carbon Grill

UI Design hints: Decent images on deviantART for your website

3.MonkeyMagicos Dark Wood

UI Design hints: Decent images on deviantART for your website  

4. Perforated Chromatec

UI Design hints: Decent images on deviantART for your website


5. PXL

UI Design hints: Decent images on deviantART for your website


 I'll be updating this frequently...

Wednesday, 12 March 2014

Awesome Text Flip Effect using jQuery

This idea popped up in my brains, when I saw a digital ad board in Deccan side chowk in Pune. The ad displayed on it was sporting some cool text, which would animatedly flip its each character to a new character, forming a new cool text.

So that thing in my mind, I have tried to imitate  that in some sense on my client's homepage. But little bit differently.
Check out this fiddle to see it live.
It is amazingly easy using jQuery. Simply styled wiith CSS.

How to do a text flip?

Create a <p> element inside a <div> with following code.

    <div class="textflip">

In .textflip we have a paragraph element, where we are going to append a line or a string which will be flipped. The following script is self explanatory, which gets single character out of a string, and replaces with a single character of another string.

   Create two strings manually, with same lenghts.
   var str = "0110 1101 1111 0100111";
   var str2 ="Live life king size...";

       Loop through each character. 

       Append that character as a <span> to
       <p> in our '.textflip' which is a container.

    for(var i=0; i<str.length; i++)
      $('.textflip p').append('<span>'+str[i]+'</span>');
    var halt = 75; // Animation speed
    var j=0;

    //Count the number of spans i.e chars in string
    var count = $('.textflip p').children('span').length;

    anim(); // Call animation function

     Animation function

    function anim()
       var n=j;
       $('.textflip p > span').eq(n).animate({
            opacity:0 //By putting opacity zero, vanish the character.
            //This is what to do when character is vanished
            //Bring in the char from second string, display it by opacity:1
            $('.textflip p > span').eq(n).text(str2[n]).css('opacity',1);
                         anim(); //Animate jth char until j is not an end char.
               j++;  //next character please!

       }// end of anim() 

Here, anim() is a recursive function which will run unless all characters are not flipped (replaced, actually).

Drawback here is, string length is known. What to do if length is variable? Will you help me to frame the logic for 'dynamic text flip'?

Also Read