Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Use of prefix in css3

    • 0
    • 2
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 90
    Comment on it

    Hello Readers,

    As we all knows that The CSS3 property allows you to add depth to your website's design without the need for images or extra container elements but when we use these property.

    For Css3 it is vital that it works on all browser i.e it should be cross browser scripting, Therefore it becomes very important that we use proper Css3 Property, prefixes and avoid minor mistakes such as syntax & incomplete property.

    Prefix for Cross browser
    Firefox Supports use of -moz prefix
    Google Chrome, Opera, Apple Safari Supports use of -webkit prefix
    IE9 Supports us of -ms-

    Below is the example how to use proper syntax & property.

    Here is the HTML

    <div class="round">
        Use of Prefix
    </div>
    


    Here is the CSS

    *{
                padding: 0px;
                margin: 0px;
            }
    
            .round{
                width:200px;
                padding:10px 15px;
                color:#fff;
                font-size:18px;
                margin: 10px auto;
                text-align: center;
                border-radius: 5px;
                -webkit-border-shadow: 5px;
                -moz-border-shadow:    5px;
                box-shadow: 1px 1px 6px 0 rgba(10, 10, 10, 1);
                -webkit-box-shadow: 1px 1px 6px 0 rgba(10, 10, 10, 1);
                -moz-box-shadow:    1px 1px 6px 0 rgba(10, 10, 10, 1);
                background: #1e5799; /* Old browsers */
                background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
                background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
            }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: