Design with PC

I’m in middle of rolling out a fresh & clean header across all my websites (i.e. personal website, design blog, plugin pages). Here’s how it looks:

Personal Website: IAmPrashant.com

UI & Design Blog and Plugin Pages: DesignWithPC.com

All that this new header displays is a profile pic, a title, and a short description. The idea was to be clean, minimal, and HTML5-ish! The profile image uses CSS3 border-radius to make it round, CSS3 animations and transitions (on IAmPrashant.com), and the title uses CSS3 font-face ‘PT Sans Narrow’.

• Each <li> consists of <label>,<span>, and <div>
• <label> floating left with white background for the name,
• <span> floating right also with white background for the price/info
• <div> absolutely positioned with negative index and a dotted border

HTML:

<li>
     <div class=”dotted-bg”></div>    
     <label>Beer Basted Boar Ribs</label><span>4g 2s 11c</span>
</li>
<li>
     <div class=”dotted-bg”></div>    
     <label>Carrion Gizzard Surprise</label><span>2g 6s 11c</span>
</li>

CSS:

li{
   list-style:none;    
   overflow:hidden;
   padding:5px 0;
   position:relative;
}
li label{
   float:left;
   background:#fff;
   padding-right:10px;
}
li span{
   float:right;
   background:#fff;
   padding-left:10px;
}
.dotted-bg{
   border-top:dotted 2px #ccc;
   position:absolute;   
   top:15px;
   left:0;
   width:100%;
   z-index:-1;
}

This is easily possible with the CSS3  property “background-size: cover”. Let’s look at an example on how to use this. We’ll use the following image for our example:

When using this image as background for the body:

CSS:
body
{
    background:url(“http://dl.dropbox.com/u/40036711/Images/BeerSpill.jpg”) fixed no-repeat centercenter transparent;
    -moz-background-size: cover;
    background-size: cover;    
}

Working example: http://jsfiddle.net/callmepc/zm3pq/5/embedded/result/

When using an element other than body (like div):

CSS:
#fullPageBG
{
    background:url(“http://dl.dropbox.com/u/40036711/Images/BeerSpill.jpg”) fixed no-repeat center centertransparent;
    -moz-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
    position:absolute;
}

Here’s the jsFiddle: http://jsfiddle.net/callmepc/DbVVy/3/embedded/result/

Enjoy the beer!

One way to handle a wide range of columns is to merge the related columns into one. This can come handy when you don’t necessarily require to have your data listed in excel (tabular) format. 
In a recent project I merged all address related columns into one, and avoided any cluttering. This way I was at ease to add in even more functionality with each row than possible with the original grid format. Here are some screenshots:

Before:

After:

If you look at the image you’ll see you still have fields available to be able to sort or add any filtering. You can obviously get away from that if you don’t need sorting on all fields.

Was monkeying around with CSS3 transform and transition properties this morning, ended up with this!

We all know the CSS’s @font-face property to specify online fonts to display text on your web pages. Sadly it is little complicated for first time users and somewhat expensive (if using TypeKit). But there’s a free and easy solution for that:

Google Web Fonts:
Hundreds of free, open-source fonts optimized for web.

Google Font Previewer (Chrome Extension):

Lets you choose a font from the Google Font directory and preview them on the current page. I will highly recommend to use the ‘previewer’ on your website when selecting what font looks best.

Google Web Fonts + Previewer = Easy and Free!

How to use Google fonts with Previewer:

1. Install Google Font Previewer Chrome extension
2. Open your webpage (or any website!) and specify the css selectors (eg. h1,h2,h3) you want to apply the new font to.
3. Try different fonts with these selectors on your page, using radio buttons.

   

4. Once you have decided what font you like, copy and paste the html from the previewer to your webpage. For example, if you choose to use ‘Carter One’, it will be something like this:
   

   <link href="http://fonts.googleapis.com/css?family=Carter One&subset=latin"
   rel="stylesheet" type="text/css">
   
   <style>
   h1,h2,h3 {
    font-family: 'Carter One', sans-serif;
   }
   </style>
   

This is a quick post on how you can use CSS3 properties like gradients, border radius, and shadows to add awesomeness to your input fields! 

CSS:

input[type="text"]{
    
    padding: 5px;   
    border: 1px solid #DDDDDD;
    
    /*Applying CSS3 gradient*/
    background: -moz-linear-gradient(center top , #FFFFFF,  #EEEEEE 1px, #FFFFFF 20px);    
    background: -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(5%, #EEEEEE) to(#FFFFFF));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB', endColorstr='#FFFFFF');
    
    /*Applying CSS 3radius*/   
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    /*Applying CSS3 box shadow*/
    -moz-box-shadow: 0 0 2px #DDDDDD;
    -webkit-box-shadow: 0 0 2px #DDDDDD;
    box-shadow: 0 0 2px #DDDDDD;

}
input[type="text"]:hover
{
    border:1px solid #cccccc;
}
input[type="text"]:focus
{
    box-shadow:0 0 2px #FFFE00;
}

Here’s the live demo on jsFiddle. This post only demonstrate styles with the input type ‘text’ but you can always style your textareas, selects etc. the same way.

Update: This hovercard is now available as a plugin too!

So you’ve seen and loved Twitter’s and Facebook’s hovercard, now its time to make one for your website! A hovercard is a way to show related information in card format when you hover over some username, text or a link. 

Lets build:

So you have a user and his bio that you want to display using hovercard. To add a further slickness to our design, instead of showing a new card we’ll just make the name fade into a detailed card (in place). The only trick with this approach is positioning:

• Preview card - (position:relative):
  
  • Name - (position: relative, z-index: higher than details)
  • Details - (position: absolute)

Details are initially hidden and displayed (or loaded via ajax) on hover. The absolute positioned details will now fade in to a card with enough top padding i.e. 2em to overlay the name (with higher z-index) in card itself. You may either use jQuery to add fadein effect or straight forward CSS to toggle display.

HTML:

<span id="preview-card">
    <label class="name">Prashant Chaudhary</label>
    <span class="details">
        <img src="http://30.media.tumblr.com/avatar_d3eadb3e29f8_128.png" alt="PC"/>        
        Web developer. Loves UI/UX.<br/>
        Indianapolis IN<br/>
        <a href="#">http://callmepc.com</a>
    </span>
</span>

CSS:

#preview-card
{
    position:relative;            
}
.name
{    
    font-weight:bold;    
    position:relative;    
    z-index:100; /*greater than details, to still appear in card*/
}
.details
{            
    background:#fff ;    
    border:solid 1px #ddd;      
    position:absolute ;
    width:300px;
    left:-10px;
    top:-10px;
    z-index:50; /*less than name*/
    padding:2em 10px 10px; /*leave enough padding on top for the name*/   
    display:none;
}
.details img
{
    width:70px;    
    float:right;
    margin-top:-1em;
}

Hover on the name in this jsFiddle to view a live demo.

Some ways you can use hovercard to delight your users:

1. Show Person bio, book author and price, etc.
2. Offer a link preview before navigating.
3. Edit in place options.
4. Load related information with Ajax.
5. Use it for ‘word-meanings’ and what not!

This is one of the very basic need with web development and again there are tons of plugins out there to server the purpose. But this trick is simple enough and you won’t need to consume any plugin. 

Click here for live demo (on jsFiddle)

How:  

1. Wrap all your keywords on the website with a span of class “.tip”, and write your tip-content to some attribute like ‘data-tip’

   <p>This is a sample paragraph to demonstrate the simplest tooltip with jQuery.
   You can <span class="tip" data-tip="Hey! I am that tip!">hover over this text</span> to see a tip.</p>
   

2. Using jQuery, write a hover function to $(“.tip”), which will append and remove the ‘.tip-content’ accordingly. The content will be read from ‘data-tip’ attribute of the ‘.tip’
   

   $(".tip").hover(
       function() {
       var content = $(this).attr("data-tip");
       $(this).append("<span class='tip-content'>" + 
                      "<span class='tip-pointer'></span>" + 
                      content + 
                      "</span>");
       }, 
       function() {
       $(this).find(".tip-content").remove();
   });
   

3. Add required CSS classes for .tip, .tip-content, and .tip-pointer. 
   

   .tip
   {
       position:relative;
       border-bottom:dashed 1px #222;    
       background:#ffffbb;    
   }
   .tip-content
   {
       position:absolute;
       top:2em;
       left:-10%;
       background:#222;
       background:rgba(0,0,0,0.8);
       color:#fff;
       padding:5px;
       z-index:10;    
       border-radius:4px;    
       min-width:100px;
       max-width:400px;
   }
   .tip-pointer
   {
       border-left:solid 10px transparent;
       border-right:solid 10px transparent;
       border-bottom:solid 10px #333;
       width:0;
       height:0;
       position:absolute;
       top:-0.5em;
       left:25%;
   }
   

You can style these classes your way but make sure you have correct positioning i.e. ‘.tip’ should be relatively positioned and their child elements ‘.tip-content’ and ‘.tip-pointer’ should be absolutely positioned.

CSS:

.triangle-up
{
    border:solid 20px transparent;    
    border-bottom:solid 20px #000;
    width:0;
    height:0;
}

HTML:

<span class="triangle-up"></span>

Actual Result: (Try inspect element on the following triangle!)

I tried to put together a little image to show how its done: