On Twitter now

Hey guys,

Just wanted to inform you that you can now find me on Twitter

Hope you see you there.

Have a great day!

Custom select dropdown menu style

After trying several ways I ended up with this solution to style the HTML select list. This involves little tweaking of html and addition of few lines of jquery which is absolutely fine to use when we get the expected result :) 

Here is the method which I have been following to make the list items looks more classy.

Get started with the html first. Here I am wrapping the select list with an outer div which makes safe place for both select list as well as a span tag which is used to manipulate the design.

Here I am placing the list items on top of span tag which gives the exact look and feel of select list.

You can design it according to your requirement. I have used a simple corner arrow here. 


HTML

<div class="wrapper">
  <div class="select_box">
     <span class="cus_selt">Select a value*</span>
     <select>
        <option>Select</option>
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
        <option>option5</option>
        <option>option6</option>
        <option>option7</option>
      </select>
   </div>
 </div>

CSS

.wrapper{width:250px;margin:10px auto;}
.select_box{
  margin:0;
  width:100%;
 font-family:arial;
 position:relative; 
 background-color:#eee; 
}
.select_box > span:after{content:'';width:0; 
  height:0; 
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid #FD025F;
  position:absolute;
  bottom:-1px;
  z-index:2;
  right:-6px;
transform:rotate(-45deg);
}
.select_box > span{padding:20px;display:block;}
select {
float:left;
height: 56px;
margin: -58px 0 0;
opacity: 0;
width: 100%;
filter: alpha(opacity=0);

}

Jquery

$( ".select_box" ).change(function() {
  var option = $(this).find('option:selected').val();
  $('.select_box > span').text(option);

});

Simple Pop-Up Design with CSS

Here I will be showing how to get the pop up design done with pure CSS. I am converting below image into html pop up

You can do it in two ways, one is using the two divs and another one is with adding top curve through CSS.

When you have some links to be linked to the head text you need to follow the 2 divs method because in CSS content method you cant add a tag to the head text.

Method 1 (2 Divs Method)

Take one parent div and a child div. Parent should have position:relative and child position:absolute

HTML

<div class="pop">

    <span><a href="http://userinterfacehome.blogspot.in/">Pop Head </a></span>

</div>

CSS

.pop{

    background:#333;

    display:inline-block;

    width:250px;

    height:120px;

    border-radius:8px;

    position:relative;

    margin-top:25px

}

span{

    position:absolute; 

    left:0; 

    top:-20px;

    color:white;

    display:inline-block;

    border-radius:8px 8px 0 0;

    background:#333; 

    padding:6px;

    width:100px

}

a{

    text-decoration:none;

    color:white

}

Check the DEMO HERE

 

Method 2 (CSS Content Method)

In this method I am using CSS pseudo-class to get the heading design done by CSS dynamically.

HTML

<div class="pop"></div>

CSS

.pop {
    background:#333;
    width:250px;
    height:120px;
    border-radius:8px;
    display: inline-block;
}
.pop::before {
    content:"Pop up head";
    display: block;
    width: 90px;
    background:#333;
    border-radius:8px;
    padding: 3px;
    margin-top: -14px;
    text-align: center;
    color: white;
}

Check the DEMO HERE

That is it!!

Pure CSS Dropdown Menu

This is about creating drop down menu without any script. This can also be created by using pure CSS.

Basically there are two ul list are used to create the drop down menu. First ul list contains the parent menu and the second ul contains the child menu links.

Here is the code

HTML

<ul id="menu">
  <li><a href="">Home</a></li>
  <li><a href="">About Us</a>
    <ul>
    <li><a href="">About 1</a></li>
    <li><a href="">About link 2</a></li>
    <li><a href="">About 3</a></li>
    </ul>
  </li>
  <li><a href="">Products</a>
    <ul>
    <li><a href="">Product 1</a></li>
    <li><a href="">Product 2</a></li>
    <li><a href="">Product 3</a></li>
    <li><a href="">Product 4</a></li>
    </ul>
  </li>
  <li><a href="">Contact</a>
    <ul>
    <li><a href="">Contact 1</a></li>
    <li><a href="">Contact 2</a></li>
    <li><a href="">Contact 3</a></li>
    </ul>
  </li>
</ul>​

CSS

ul {   
    font-family: Arial, Verdana;   
    font-size: 14px;   
    margin: 0;   
    padding: 0;   
    list-style: none; 
}
ul li { 
       display: block;  
       position: relative;  
       float: left; 
}
li ul {
      display: none; 
}
ul li a {   
    width:80px; 
    display: block;   
    text-decoration: none;   
    color: #ffffff;   
    border-top: 1px solid #ffffff;   
    padding: 5px 15px 5px 15px;   
    background: #2C5463;   
    margin-left: 1px;   
    white-space: nowrap; 
}
ul li a:hover { 
      background: #617F8A;
 } 
li:hover ul {   
       display: block; /*This opens the hidden ul list*/  
       position: absolute; 
} 
li:hover li {   
       float: none;   
       font-size: 11px;
 } 
li:hover a { 
       background: #617F8A; 
} 
li:hover li a:hover {
       background: #95A9B1; 
}​

Check the demo here.

Browser compatibility : This works in IE7+ and all the modern browsers.

CSS Selectors

Here is the list of useful CSS selectors.

> Sign:

> Symbol target elements which are direct children of a parent element.

HTML

<div id="container">

   <p>First</p>

    <div>

        <p>Child Paragraph</p>

    </div>

   <p>Second</p>

   <p>Third</p>

</div>​

CSS

div#container > p {

  border: 1px solid black;

}

DEMO: http://tinkerbin.com/H1RHLL6O

It will target all P elements which are direct children of parent div, not children of child div.

+ Sign:

This sign is adjacent sibling combinator.

The elements in the selector have the same parent, and the second one must come immediately after the first.

For example let’s say you want to add text-color for all p tags which comes inside the child div but not inside the main parent div.

HTML

<div id="container">

   <p>First</p>

    <div>

        <p>Child Paragraph</p>

    </div>

   <p>Second</p>

   <p>Third</p>

</div>​

CSS

div + p {

   color: red; font-weight:bold

}

DEMO: http://tinkerbin.com/IHp6xFVX

~ Sign:

This is general sibling combinator and similar to Adjacent sibling combinator. The difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.

HTML

<div id="container">

   <p>First</p>

    <div>

        <p>Child Paragraph</p>

    </div>

   <p>Second</p>

   <p>Third</p>

</div>​

CSS

div ~ p{

background-color:blue; color:white

}

DEMO: http://tinkerbin.com/OTn0tM6V

:NTH-CHILD

The :nth-child() pseudo-class can be used to target one or more specific children of parent element.

For example if you want to give different style only for the particular li item then you can do it with nth-child

HTML

<ul>

  <li>Link 1</li>

  <li>Link 2</li>

  <li>Link 3</li>

  <li>Link 4</li>

  <li>Link 5</li>

</ul>

CSS

ul li:nth-child(3) {

    color: red;

  }

DEMO: http://tinkerbin.com/AMmRI4gA

Likewise below are the other methods of the nth-child() pseudo-class.

:NTH –CHILD()

:nth-child(odd) and :nth-child(even)

This method adds styles to alternative elements.

HTML

<ul>

    <li>test</li>

    <li>test</li>

    <li>test</li>

    <li>test</li>

    <li>test</li>

</ul>​

CSS

li:nth-child(odd){

    background-color:green; color:white

}

li:nth-child(even){

    background-color:yellow;

}​

DEMO: http://jsfiddle.net/XUNg3/9/

CSS arrow breadcrumb

I am going to show how to get the attached arrow breadcrumb as shown in the below image.

This breadcrumb contains no images so that it is easy to expand the menu based on the length of the word and it minimizes the loading time of the images.

Here we start, 

HTML

<ul id="breadcrumbs-one">
        <li><a href="">Test Link 1</a></li>
        <li><a href="">Test Link 2</a></li>
        <li><a href="">Test Link 3</a></li>
        <li><a href="">Test Link 4</a></li>
        <li><a href="" class="current">Test Link 5</a></li>
 </ul>   

CSS 
    
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }    
    #breadcrumbs-one{
      background: #000;
      border-width: 1px;
      border-style: solid;
      border-color: #f5f5f5 #e5e5e5 #ccc;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
      -webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
      box-shadow: 0 0 2px rgba(0,0,0,.2);
      /* Clear floats */
      overflow: hidden;
      width: 100%;
    }    
    #breadcrumbs-one li{
      float: left;
    }    
    #breadcrumbs-one a{
      padding: .7em 1em .7em 2em;
      float: left;
      text-decoration: none;
      color: #fff;
      position: relative;
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
      background-color: #ddd;
      background-image: -webkit-gradient(linear, left top, right bottom, from(#f5f5f5), to(#ddd));
      background-image: -webkit-linear-gradient(left, #f5f5f5, #ddd);
      background-image: -moz-linear-gradient(left, #f5f5f5, #ddd);
      background-image: -ms-linear-gradient(left, #f5f5f5, #ddd);
      background-image: -o-linear-gradient(left, #f5f5f5, #ddd);
      background-image: linear-gradient(to right, #f5f5f5, #ddd);  
    }    
    #breadcrumbs-one li:first-child a{
      padding-left: 1em;
      -moz-border-radius: 5px 0 0 5px;
      -webkit-border-radius: 5px 0 0 5px;
      border-radius: 5px 0 0 5px;
    }    
    #breadcrumbs-one a:hover{
      background: #000;
    }    
    #breadcrumbs-one a::after,
    #breadcrumbs-one a::before{
      content: "";
      position: absolute;
      top: 50%;
      margin-top: -1.5em;   
      border-top: 1.5em solid transparent;
      border-bottom: 1.5em solid transparent;
      border-left: 1em solid;
      right: -1em;
    }    
    #breadcrumbs-one a::after{ 
      z-index: 2;
      border-left-color: #ddd;  
    }    
    #breadcrumbs-one a::before{
      border-left-color: #ccc;  
      right: -1.1em;
      z-index: 1; 
    }    
    #breadcrumbs-one a:hover::after{
      border-left-color: #000;
    }    
    #breadcrumbs-one .current,
    #breadcrumbs-one .current:hover{
      font-weight: bold;
      background: none;
    }    
    #breadcrumbs-one .current::after,
    #breadcrumbs-one .current::before{
      content: normal;  
    }​

This gives the result as shown in the sample image above.

VIEW RESULT

CSS3 BG Patterns

Its time to say bye to bg images as html body background. CSS3 has super cool properties to create different types of creative bg patterns, absolutely image free.

We can achieve this by using CSS3 properties like gradient, transparent etc..

Here are few samples

1.   http://jsfiddle.net/XfsR6/

div{
background-size: 50px 50px;
background-color: #c16; height:500px;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
}​

2.    http://jsfiddle.net/ryy6c/1/

div{
    background-color: #c16; height:500px;
background-color: #eee;
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                  linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
-pie-background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px,
                 linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 30px 30px / 60px,
                 #eee;
behavior: url(/PIE.htc);
}​

3. http://jsfiddle.net/XfsR6/1/

div{
background-color: #c16; height:500px;
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-pie-background: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae;
behavior: url(/PIE.htc);
}​

P.S - Dont forget to use CSS PIE method as mentioned in my previous post.