Porfolio

My Drawings

 

Multiple Columns

-moz-column-count: 3;
-moz-column-gap: 5px;
-webkit-column-count: 3;
-webkit-column-gap: 5px;
column-count: 3;
column-gap: 5px;

column-count and column-width are the two most basic ways to define the properties of a multi-column element.

#multicolumnElement {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

column-gap

#multicolumnElement {
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
}

column-rule

#multicolumnElement {
    -webkit-column-rule: 1em solid #000;
    -moz-column-rule: 1em solid #000;
    column-rule: 1em solid #000;
}

column-break

 h2 {
    -webkit-column-break-before:always;
    -moz-column-break-before:always;
    column-break-before:always;
}

Spanning columns

h2 {
    -webkit-column-span:all;
    -moz-column-span:all;
    column-span:all;
}

h3{
    -webkit-column-span:2;
    -moz-column-span:2;
    column-span:2;
}

Filling columns

#multicolumnElement {
    -webkit-column-fill:auto;
    -moz-column-fill:auto;
    column-fill:auto;
}

border radius

-webkit-border-radius: 5px;  /* chrome */

-moz-border-radius: 5px;  /* Moziila*/

border-radius: 5px;  /* Opera and IE 10*/

this is css3.

In box apply the corner reduce the size.

please see below code. and apply your web site.

Copy the code in Notpad and save as this name radius.html and see the magic.

The border-radius property allows you to add rounded corners to elements.

Transition delays

You will notice the final parameter is a delay - this let's you trigger things after an event has occurred. Below is a small demo showing this functionality.




in  html flies >>>>>

   

   

   

   

   

        

   

   

   

Hover on me

       

//////////  css style //////

#delay_demo {
    position:relative;       
    width:500px;
    height:400px;
    margin:0 auto 10px;
    border:1px #aaa solid;
    padding:10px;
}
#dd_main {
    width:100px;
    height:100px;
    position:absolute;
    top:160px;
    left:210px;
    background-color:red;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;       
    -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;   
}
#delay_demo .center {
    width:500px;
    position:absolute;
    bottom:20px;
}
#dd1, #dd2, #dd3, #dd4, #dd5, #dd6, #dd7, #dd8 {
    width:20px;
    height:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;   
    position:absolute;
    top:200px;
    left:250px;   
    background-color:blue;
    -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;   
    /* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in on iOS */
    -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);   
}

    #dd1 {
        -webkit-transition-delay: 0.1s;
    }
    #dd2 {
        -webkit-transition-delay: 0.2s;
    }
    #dd3 {
        -webkit-transition-delay: 0.3s;
    }
    #dd4 {
        -webkit-transition-delay: 0.4s;
    }
    #dd5 {
        -webkit-transition-delay: 0.5s;
    }
    #dd6 {
        -webkit-transition-delay: 0.6s;
    }
    #dd7 {
        -webkit-transition-delay: 0.7s;
    }
    #dd8 {
        -webkit-transition-delay: 0.8s;
    }
#delay_demo:hover #dd_main {
    opacity:0;
}
#delay_demo:hover #dd1, #delay_demo.hover_effect #dd1 {
    -webkit-transform: translate(-250px,-200px);
        -moz-transform: translate(-250px,-200px);
        -o-transform: translate(-250px,-200px);
        -ms-transform: translate(-250px,-200px);
        transform: translate(-250px,-200px);}
#delay_demo:hover #dd2, #delay_demo.hover_effect #dd2 {
    -webkit-transform: translate(0,-200px);
        -moz-transform: translate(0,-200px);
        -o-transform: translate(0,-200px);
        -ms-transform: translate(0,-200px);
        transform: translate(0,-200px);   
}
#delay_demo:hover #dd3, #delay_demo.hover_effect #dd3 {
    -webkit-transform: translate(250px,-200px);
        -moz-transform: translate(250px,-200px);
        -o-transform: translate(250px,-200px);
        -ms-transform: translate(250px,-200px);
        transform: translate(250px,-200px);}
#delay_demo:hover #dd4, #delay_demo.hover_effect #dd4 {
    -webkit-transform: translate(250px, 0);
        -moz-transform: translate(250px, 0);
        -o-transform: translate(250px, 0);
        -ms-transform: translate(250px, 0);
        transform: translate(250px, 0);   
}
#delay_demo:hover #dd5, #delay_demo.hover_effect #dd5 {
    -webkit-transform: translate(250px,200px);
        -moz-transform: translate(250px,200px);
        -o-transform: translate(250px,200px);
        -ms-transform: translate(250px,200px);
        transform: translate(250px,200px);   
}
#delay_demo:hover #dd6, #delay_demo.hover_effect #dd6 {
    -webkit-transform: translate(0,200px);
        -moz-transform: translate(0,200px);
        -o-transform: translate(0,200px);
        -ms-transform: translate(0,200px);
        transform: translate(0,200px);   
}
#delay_demo:hover #dd7, #delay_demo.hover_effect #dd7 {
    -webkit-transform: translate(-250px,200px);
        -moz-transform: translate(-250px,200px);
        -o-transform: translate(-250px,200px);
        -ms-transform: translate(-250px,200px);
        transform: translate(-250px,200px);   
}
#delay_demo:hover #dd8, #delay_demo.hover_effect #dd8 {
    -webkit-transform: translate(-250px,0);
        -moz-transform: translate(-250px,0);
        -o-transform: translate(-250px,0);
        -ms-transform: translate(-250px,0);
        transform: translate(-250px,0);   
}