Thursday, December 8, 2016

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!

Monday, July 11, 2016

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);

});

Tuesday, May 21, 2013

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!!



Thursday, November 22, 2012

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.

Sunday, November 18, 2012

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;
}


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
}



~ 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
}



: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;
  }


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;
}​



Wednesday, October 24, 2012

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

Thursday, October 4, 2012

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-size50px 50px;
background-color#c16height:500px;
background-image-webkit-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
                  transparent 75%transparent);
background-image-moz-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
                  transparent 75%transparent);
background-image-ms-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
                  transparent 75%transparent);
background-image-o-linear-gradient(-45degrgba(255255255.225%transparent 25%,
                  transparent 50%rgba(255255255.250%rgba(255255255.275%,
}




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

div{
    background-color#c16height:500px;
background-color#eee;
background-size60px 60px;
background-position030px 30px;
background-image-webkit-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -webkit-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-image-moz-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -moz-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-image-ms-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -ms-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-image-o-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  -o-linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
background-imagelinear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black),
                  linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black);
-pie-backgroundlinear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black60px,
                 linear-gradient(45degblack 25%transparent 25%transparent 75%black 75%black30px 30px 60px,
                 #eee;
behaviorurl(/PIE.htc);
}




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

div{
background-color#c16height:500px;
background-size50px 50px;
background-color#0ae;
background-image-webkit-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-image-moz-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-image-ms-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-image-o-linear-gradient(rgba(255255255.250%transparent 50%transparent);
background-imagelinear-gradient(rgba(255255255.250%transparent 50%transparent);
-pie-backgroundlinear-gradient(rgba(255255255.250%transparent 50%transparent50px #0ae;
behaviorurl(/PIE.htc);
}




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