Thursday, July 26, 2012

How to create a cool and usable CSS3 search box

Source: http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box


In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5placeholder attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr’s feature detection.

STRUCTURE

The form element is used as the wrapper, while the two inputs are used as search field and search button respectively.

The HTML code


You may notice the placeholder attribute, but just ignore it for now, as we will talk later about it.
The reason why there are so many id’s (instead of CSS3 advanced selectors asinput[type="text"] or input[type="submit"]) is because I wanted this to degrade gracefully for older browsers.

THE CSS

Form wrapper

#searchbox
{
 background: #eaf8fc;
 background-image: -moz-linear-gradient(#fff, #d4e8ec);
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
 
 -moz-border-radius: 35px;
 border-radius: 35px;
 
 border-width: 1px;
 border-style: solid;
 border-color: #c4d9df #a4c3ca #83afb7;            
 width: 500px;
 height: 35px;
 padding: 10px;
 margin: 100px auto 50px;
 overflow: hidden; /* Clear floats */
}
Below you can see the current result:

Inputs

Quick tip:
When adding float: left to an element, there’s no need to add also display: block. The last one it’s implied.
#search, #submit
{
 float: left;
}

#search
{
 padding: 5px 9px;
 height: 23px;
 width: 380px;
 border: 1px solid #a4c3ca;
 font: normal 13px 'trebuchet MS', arial, helvetica;
 background: #f1f1f1;
 
 -moz-border-radius: 50px 3px 3px 50px;
  border-radius: 50px 3px 3px 50px;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
}

/* ----------------------- */

#submit
{  
 background: #6cbb6b;
 background-image: -moz-linear-gradient(#95d788, #6cbb6b);
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
 
 -moz-border-radius: 3px 50px 50px 3px;
 border-radius: 3px 50px 50px 3px;
 
 border-width: 1px;
 border-style: solid;
 border-color: #7eba7c #578e57 #447d43;
 
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;     

 height: 35px;
 margin: 0 0 0 10px;
        padding: 0;
 width: 90px;
 cursor: pointer;
 font: bold 14px Arial, Helvetica;
 color: #23441e;
 
 text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover
{  
 background: #95d788;
 background-image: -moz-linear-gradient(#6cbb6b, #95d788);
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
} 

#submit:active
{  
 background: #95d788;
 outline: none;
   
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
}

#submit::-moz-focus-inner
{
       border: 0;  /* Small centering fix for Firefox */
}  

HTML5 PLACEHOLDER ATTRIBUTE

This new HTML5 attribute shows a text in a field as long as the field is empty and not focused, then hides the text. You surely have seen this technique before with JavaScript!
Browser support:
  • Firefox 3.7+
  • Safari 4.0+
  • Chrome 4.0+
  • Opera 11+
  • IE10+
Opera 11 supports it, but you cannot style it (yet). As for the others above, here’s how you can style it:
#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}  

#search:-ms-placeholder {
   color: #9c9c9c;
   font-style: italic;
}   

Fallback support

For web browsers that are not supporting the this new HTML5 attribute, I made a fallback.
I used Modernizr to detect native support for the HTML5 placeholder attribute. Even if this could have been done by writing a short function, I love Modernizr as it also enables you to use more semantic elements from the HTML5 specs.
#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
} 
$(document).ready(function() {           
 if (!Modernizr.input.placeholder)
 {  
  var placeholderText = $('#search').attr('placeholder');
  
  $('#search').attr('value',placeholderText);
  $('#search').addClass('placeholder');
  
  $('#search').focus(function() {    
   if( ($('#search').val() == placeholderText) )
   {
    $('#search').attr('value','');
    $('#search').removeClass('placeholder');
   }
  });
  
  $('#search').blur(function() {    
   if ( ($('#search').val() == placeholderText) || (($('#search').val() == '')) )                      
   { 
    $('#search').addClass('placeholder');       
    $('#search').attr('value',placeholderText);
   }
  });
 }                
});

CHROME’S INSET BOX-SHADOW BUG

There is a bug on Chrome when both border-radius and inset box-shadow are used. Anyway, there is good news about that. Paul Irish announced last month that Chrome’s inset box-shadow bug is fixed.

Later update

The demo was updated, thanks for pointing this out Atul.
So, if you’re using Chrome beta 10.0.648.119 or a greater version, this should work just perfect!

CONCLUSION

This example it’s mostly about progressive enhancement.
Regarding the CSS, as you will notice, this example will degrade gracefully for other old browsers. Now, regarding the HTML5 placeholder attribute, if native support is missing, then the Javascript code will do it for you.

Reverse search of Stock quotes

Hello All,

We've seen a lot of stock market applications which would try to put together a great amount of information relevant to us for which you will feed in a list of stocks you are interested in or you've invested in. As we all know, we don't know a lot of public companies in this world which are comparably making good profits than the stocks you already know. There may be a huge amount of hype given for certain quotes, but some may go unnoticed. There might be some stocks which are kind of underdogs but are earning a lot(at least comparatively). 

Say, you have an interest of investing about $500 with about $12 per share in some profitable company. So you have a question in front of you i.e. what are all stocks that have a current value around $12. This has invoked an idea of building a tool which will fetch you all stocks for a given range of your interest.

You provide us with your lower cap and upper cap for current ask value and we fetch you the relevant stocks ordered by their current value. You wanna check more details about a quote listed, it's just a click away - click on the stock name - you see the details in the box beside!

This is just the beginning and lot more usable functionality coming soon. Watch this space for more updates. Thank you all for trying this tool.

Friday, July 13, 2012

Sports n Pics - Timeline of Sports in pictures

The following article is about Sports n Pics: http://mycollect.in/snp



The morning after euro2012 final happened, I woke up and was curious to see how did people around the world reacted before, during and after the match. I am sure there will be mixed reactions, exciting moments, celebrations for some and sadness for some. I can get all these in the form of news articles or boston.bigpicture or something like that. 

But I wanted to see the real feelings of people, their preparation for the match, their arrangements and cool merchandise bought, funny hats, happiness in their faces, love towards their favorite team, heartfelt situations during the match followed by elated moments. Finally celebrations in winning team and  other team's feelings for their defeat. Every moment mentioned above is felt by all football fans, I wanted to see them in personal. 




Best way I found is Instagram! People post every activity as mentioned above, which is a huge resource for fulfilling my request. But there was no way I can see them as a sequence in a nice UI where I need not do many clicks or run through several pages. 

With this pain point, I decided to develop an application which would solve this purpose. You can select your favorite league and filter the teams, select a team to see a timeline of pictures being listed and will keep on coming as you scroll down - that's it - select a team with single click and watch a huge set of pictures from all around the world depicting different feelings and moments of every one's life for a given sports event or a team. 

Link for my application is http://mycollect.in/snp

Now this application hosts all teams of MLB, NFL, NHL, MLS, NBA. So this would be a treat for fans of baseball, football, hockey, soccer and basketball!

Show your love by sharing and liking it. 

This is still in beta and adding many more features to make a perfect applications for a sports fan.

Please let me know your feedback.