Contents tagged with html5

  • Using JQuery tabs in an HTML 5 page

    In this post I will show you how to create a simple tabbed interface using JQuery,HTML 5 and CSS.

    Make sure you have downloaded the latest version of JQuery (minified version) from http://jquery.com/download.

    Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.

    In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

    Another excellent resource is HTML 5 Doctor.

    Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

    In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. 

    Let me move on to the actual example.

    This is the sample HTML 5 page

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Liverpool Legends</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
         <script type="text/javascript" src="tabs.js"></script>
        
      </head>
      <body>
        <header>
            <h1>Liverpool Legends</h1>
        </header>
     
        <section id="tabs">
            <ul>
                <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#first-tab">Defenders</a></li>
                <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#second-tab">Midfielders</a></li>
                <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#third-tab">Strikers</a></li>
            </ul>
       <div id="first-tab">
         <h3>Liverpool Defenders</h3>
         <p> The best defenders that played for Liverpool are Jamie Carragher, Sami Hyypia , Ron Yeats and Alan Hansen.</p>
       </div>
       <div id="second-tab">
         <h3>Liverpool Midfielders</h3>
         <p> The best midfielders that played for Liverpool are Kenny Dalglish, John Barnes,Ian Callaghan,Steven Gerrard and Jan Molby.
     
           </p>
       </div>
       <div id="third-tab">
         <h3>Liverpool Strikers</h3>
         <p>The best strikers that played for Liverpool are Ian Rush,Roger Hunt,Robbie Fowler and Fernando Torres.<br/>
          </p>
       </div>

     </div>

    </section>
       
       
        <footer>
       
        <p>All Rights Reserved</p>
     
        </footer>
      
      </body>
     
    </html> 

    This is very simple HTML markup. 

    I have styled this markup using CSS.

    The contents of the style.css file follow


    * {
        margin: 0;
        padding: 0;
    }

    header

    {

    font-family:Tahoma;
    font-size:1.3em;
    color:#505050;
    text-align:center;
    }


    #tabs {
        font-size: 0.9em;
        margin: 20px 0;
    }
    #tabs ul {
        float: left;
        background: #777;
        width: 260px;
        padding-top: 24px;

    }
    #tabs li {
        margin-left: 8px;
        list-style: none;
    }
    * html #tabs li {
        display: inline;
    }
    #tabs li, #tabs li a {
        float: left;
    }
    #tabs ul li.active {
        border-top:2px red solid;
        background: #15ADFF;
    }
    #tabs ul li.active a {
        color: #333333;
    }
    #tabs div {
        background: #15ADFF;
        clear: both;
        padding: 15px;
        min-height: 200px;
    }
    #tabs div h3 {
        margin-bottom: 12px;
    }
    #tabs div p {
        line-height: 26px;
    }
    #tabs ul li a {
        text-decoration: none;
        padding: 8px;
        color:#0b2f20;
        font-weight: bold;
    }

    footer
    {
    background-color:#999;
    width:100%;
    text-align:center;
    font-size:1.1em;
    color:#002233;
    }

    There are some CSS rules that style the various elements in the HTML 5 file. These are straight-forward rules.

    The JQuery code lives inside the tabs.js file

    $(document).ready(function(){
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');
     
    $('#tabs ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
    });
    });
     

    I am using some of the most commonly used JQuery functions like hide , show, addclass , removeClass

    I hide and show the tabs when the tab becomes the active tab.

    When I view my page I get the following result

     

    Hope it helps!!!!!

    Read more...

  • Scrolling an HTML 5 page using JQuery

    In this post I will show you how to use JQuery to scroll through an HTML 5 page.I had to help a friend of mine to implement this functionality and I thought it would be a good idea to write a post.

    I will not use any JQuery scrollbar plugin,I will just use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download.

    Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.

    In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

    Another excellent resource is HTML 5 Doctor.

    Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

    In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. 

    Let me move on to the actual example.

    This is the sample HTML 5 page

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Liverpool Legends</title>
       
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
       
        <link rel="stylesheet" type="text/css" href="style.css">
       
        <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
         <script type="text/javascript" src="scroll.js">
         </script>
         
      </head>
      <body>
        <header>
            <h1>Liverpool Legends</h1>

        </header>
       
        <div id="main">
       
        <table>
            <caption>Liverpool Players</caption>

            <thead>
                <tr>
                    <th>Name</th>
                    <th>Photo</th>
                    <th>Position</th>
                    <th>Age</th>
                    <th>Scroll</th>
                </tr>
            </thead>
            <tfoot class="footnote">
                <tr>
                    <td colspan="4">We will add more photos soon</td>

                </tr>
            </tfoot>
        <tbody>
            <tr class="maintop">
            <td>Alan Hansen</td>
                <td>
                <figure>
                <img src="images\Alan-hansen-large.jpg" alt="Alan Hansen">
                <figcaption>The best Liverpool Defender <a href="http://en.wikipedia.org/wiki/Alan_Hansen">Alan Hansen</a></figcaption>
                </figure>
                </td>
                <td>Defender</td>
                <td>57</td>
                <td class="top">Middle</td>
            </tr>
            <tr>
            <td>Graeme Souness</td>
                <td>
                <figure>
                <img src="images\graeme-souness-large.jpg" alt="Graeme Souness">
                <figcaption>Souness was the captain of the successful Liverpool team of the early 1980s <a href="http://en.wikipedia.org/wiki/Graeme_Souness">Graeme Souness</a></figcaption>
                </figure>
                </td>
                <td>MidFielder</td>
                <td>59</td>
            </tr>
            <tr>
            <td>Ian Rush</td>
                <td>
                <figure>
                <img src="images\ian-rush-large.jpg" alt="Ian Rush">
                <figcaption>The deadliest Liverpool Striker <a href="http://it.wikipedia.org/wiki/Ian_Rush">Ian Rush</a></figcaption>
                </figure>
                </td>
                <td>Striker</td>
                <td>51</td>
            </tr>
            <tr class="mainmiddle">
            <td>John Barnes</td>
                <td>
                <figure>
                <img src="images\john-barnes-large.jpg" alt="John Barnes">
                <figcaption>The best Liverpool Defender <a href="http://en.wikipedia.org/wiki/John_Barnes_(footballer)">John Barnes</a></figcaption>
                </figure>
                </td>
                <td>MidFielder</td>
                <td>49</td>
                <td class="middle">Bottom</td>
            </tr>
           
            <tr>
            <td>Kenny Dalglish</td>
                <td>
                <figure>
                <img src="images\kenny-dalglish-large.jpg" alt="Kenny Dalglish">
                <figcaption>King Kenny <a href="http://en.wikipedia.org/wiki/Kenny_Dalglish">Kenny Dalglish</a></figcaption>
                </figure>
                </td>
                <td>Midfielder</td>
                <td>61</td>
            </tr>
            <tr>
                <td>Michael Owen</td>
                <td>
                <figure>
                <img src="images\michael-owen-large.jpg" alt="Michael Owen">
                <figcaption>Michael was Liverpool's top goal scorer from 1997–2004 <a href="http://www.michaelowen.com/">Michael Owen</a></figcaption>
                </figure>
                </td>
                <td>Striker</td>
                <td>33</td>
            </tr>
            <tr>
                <td>Robbie Fowler</td>
                <td>
                <figure>
                <img src="images\robbie-fowler-large.jpg" alt="Robbie Fowler">
                <figcaption>Fowler scored 183 goals in total for Liverpool <a href="http://en.wikipedia.org/wiki/Robbie_Fowler">Robbie Fowler</a></figcaption>
                </figure>
                </td>
                <td>Striker</td>
                <td>38</td>
            </tr>
            <tr class="mainbottom">
                <td>Steven Gerrard</td>
                <td>
                <figure>
                <img src="images\steven-gerrard-large.jpg" alt="Steven Gerrard">
                <figcaption>Liverpool's captain <a href="http://en.wikipedia.org/wiki/Steven_Gerrard">Steven Gerrard</a></figcaption>
                </figure>
                </td>
                <td>Midfielder</td>
                <td>32</td>
                <td class="bottom">Top</td>
            </tr>


        </tbody>
    </table>
         
        </div>
       
       
        <footer>
       
        <p>All Rights Reserved</p>
     
        </footer>
      
      </body>
     
    </html> 

    The markup is very easy to follow and understand. You do not have to type all the code,simply copy and paste it.For those that you are not familiar with HTML 5, please take a closer look at the new tags/elements introduced with HTML 5.

    When I view the HTML 5 page with Firefox I see the following result.

     

    I have also an external stylesheet (style.css).

    body{
    background-color:#efefef;
    }

    h1{

    font-size:2.3em;

    }

    table {

    border-collapse: collapse;
    font-family: Futura, Arial, sans-serif;

    }
    caption {

    font-size: 1.2em;
    margin: 1em auto;


    }
    th, td {

    padding: .65em;

    }

    th, thead {

    background: #000;
    color: #fff;
    border: 1px solid #000;

    }
    tr:nth-child(odd)
    {
    background: #ccc;
    }
    tr:nth-child(even)
    {
    background: #404040;
    }



    td
    {
    border-right: 1px solid #777;
    }
    table
    {
     border: 1px solid #777;
     }

    .top, .middle, .bottom
    {
        cursor: pointer;
        font-size: 22px;
        font-weight: bold;
        text-align: center;

    }

    .footnote
    {
    text-align:center;
    font-family:Tahoma;
    color:#EB7515;

    }

    a{color:#22577a;text-decoration:none;}    
    a:hover {color:#125949; text-decoration:none;} 

    footer
    {
    background-color:#505050;
    width:1150px;
    }

    These are just simple CSS Rules that style the various HTML 5 tags,classes.

     

    The jQuery code that makes it all possible resides inside the scroll.js file.Make sure you type everything correctly.


    $(document).ready(function() {


                    $('.top').click(function(){


                        $('html, body').animate({


                            scrollTop: $(".mainmiddle").offset().top


                        },4000 );


                     });


                    $('.middle').click(function(){

                        $('html, body').animate({

                            scrollTop: $(".mainbottom").offset().top

                        },4000);

                     });


                        $('.bottom').click(function(){

                        $('html, body').animate({

                            scrollTop: $(".maintop").offset().top

                        },4000);

                     });

    });
     

    Let me explain what I am doing here.When I click on the Middle word (  $('.top').click(function(){ ) this relates to the top class that is clicked.

    Then we declare the elements that we want to participate in the scrolling. In this case is html,body ( $('html, body').animate).These elements will be part of the vertical scrolling.

    In the next line of code we simply move (navigate) to the element (class mainmiddle that is attached to a tr element.)

          scrollTop: $(".mainmiddle").offset().top 

    Make sure you type all the code correctly and try it for yourself. I have tested this solution will all 4-5 major browsers.

    Hope it helps!!!

    Read more...

  • Disabling the right-click sub menu using JQuery

    Recently I needed to disable the right-click contextual menu in an HTML page for a very simple HTML application I was creating for a friend.

    This is going to be a short post where I will demonstrate how to disable the right-click contextual menu.

    I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download

    Please find here all my posts regarding JQuery.

    In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. 

    I am going to create a very simple HTML 5 page with some text and an image.

    The HTML markup for the page follows. 

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>HTML 5, CSS3 and JQuery</title>
       
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <link rel="stylesheet" type="text/css" href="style.css">
         <script type="text/javascript" src="jquery-1.8.2.min.js">
            </script>
    <script type="text/javascript">

     (function ($) { $(document).bind('contextmenu', function () { return false;
    }); })(jQuery);

    </script>
        
      </head>
      <body>
     
        <div id="header">
          <h1>Learn cutting edge technologies</h1>
          <h2>HTML 5, JQuery, CSS3</h2>
        </div>
      
       <figure>
      <img src="html5.png" alt="HTML 5">
    </figure>
       
        <div id="main">
       
          <h2>HTML 5</h2>
           
         
              <article>
              <p>
                HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
              </p>
              </article>
          </div>   
       
      
      </body>
     
    </html>

    This is the JQuery code, I use



     (function ($) { $(document).bind('contextmenu', function () { return false;
    }); })(jQuery);



    I simply disable/cancel the contextmenu event.When I load the simple page on the browser and I right-click the context menu does not appear.

    Hope it helps!!!

    Read more...

  • Using CSS3 media queries in HTML 5 pages

    This is going to be the seventh post in a series of posts regarding HTML 5. You can find the other posts here , here , here, here , here and here.

    In this post I will provide a hands-on example on how to use CSS 3 Media Queries in HTML 5 pages. This is a very important feature since nowadays lots of users view websites through their mobile devices.

    Web designers were able to define media-specific style sheets for quite a while, but have been limited to the type of output. The output could only be Screen, Print .The way we used to do things before CSS 3 was to have separate CSS files and the browser decided which style sheet to use.

    Please have a look at the snippet below - HTML 4 media queries

    <link rel="stylesheet" type="text/css" media="screen" href="styles.css">

    <link rel="stylesheet" type="text/css" media="print" href="print-styles.css">

    Τhe browser determines which style to use.

    With CSS 3 we can have all media queries in one stylesheet. Media queries can determine the resolution of the device, the orientation of the device, the width and height of the device and the width and height of the browser window.We can also include CSS 3 media queries in separate stylesheets.

    In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

    Another excellent resource is HTML 5 Doctor.

    Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

    In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

    Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for CSS 3 Media Queries from the latest versions of modern browsers.

    Please have a look at the picture below. We see that all the latest versions of modern browsers support this feature.

    We can see that even IE 9 supports this feature.

     

    Let's move on with the actual demo. 

    This is going to be a rather simple demo.I create a simple HTML 5 page. The markup follows and it is very easy to use and understand.This is a page with a 2 column layout.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>HTML 5, CSS3 and JQuery</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <link rel="stylesheet" type="text/css" href="style.css">
        
      </head>
      <body>
        <div id="header">
          <h1>Learn cutting edge technologies</h1>
          <p>HTML 5, JQuery, CSS3</p>
        </div>
        <div id="main">
          <div id="mainnews">
            <div>
              <h2>HTML 5</h2>
            </div>
            <div>
              <p>
                HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
              </p>
              <div class="quote">
                <h4>Do More with Less</h4>
                <p>
                 jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

                </p> 
              </div>
              <p>
                The HTML5 test(html5test.com) score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers.         
                The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.</p>
            </div>
          </div>   
       
          <div id="CSS">
            <div>
              <h2>CSS 3 Intro</h2>
            </div>
            <div>
              <p>
              Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
              </p>
            </div>
          </div>
         
          <div id="CSSmore">
            <div>
              <h2>CSS 3 Purpose</h2>
            </div>
            <div>
              <p>
                CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
              </p>
            </div>
          </div>
         
         
        </div>
        <div id="footer">
       
        <p>Feel free to google more about the subject</p>
     
        </div>
      
      </body>
     
    </html> 

     

    The CSS code (style.css) follows

     body{
            line-height: 30px;
            width: 1024px;
            background-color:#eee;
          }
          
          p{
        
        font-size:17px;
        font-family:"Comic Sans MS"
          }
          p,h2,h3,h4{
            margin: 0 0 20px 0;
          }
          
          #main, #header, #footer{
            width: 100%;
            margin: 0px auto;
            display:block;
          }
          
          #header{
            text-align: center; 
            border-bottom: 1px solid #000; 
            margin-bottom: 30px;
          }
          
          #footer{
            text-align: center; 
            border-top: 1px solid #000; 
            margin-bottom: 30px;
          }
          
          .quote{ 
           width: 200px;
           margin-left: 10px;
           padding: 5px;
           float: right;
           border: 2px solid #000;
           background-color:#F9ACAE;
          }
          
          .quote :last-child{
            margin-bottom: 0;
          }
          
          #main{
            column-count:2;
            column-gap:20px;
            column-rule: 1px solid #000;
            -moz-column-count: 2;
            -webkit-column-count: 2;
            -moz-column-gap: 20px;
            -webkit-column-gap: 20px;
            -moz-column-rule: 1px solid #000;
            -webkit-column-rule: 1px solid #000;
          }

    Now I view the page in the browser.Now I am going to write a media query and add some more rules in the .css file in order to change the layout of the page when the page is viewed by mobile devices.

    @media only screen and (max-width: 480px) {
              body{
                width: 480px;
              }
              #main{
                -moz-column-count: 1;
                -webkit-column-count: 1;
              }
            }

     

    I am specifying that this media query applies only to screen and a max width of 480 px. If this condition is true, then I add new rules for the body element.

    I change the number of columns to one. This rule will not be applied unless the maximum width is 480px or less. 

    As I decrease the size-width of the browser window I see no change in the column's layout.

    Have a look at the picture below.


    When I resize the window and the width of the browser so the width is less than 480px, the media query and its respective rules take effect.

    We can scroll vertically to view the content which is a more optimised viewing experience for mobile devices.

    Have a look at the picture below

    Hope it helps!!!!

    Read more...

  • Using rounded corners in modern websites with CSS3

    This is going to be the sixth post in a series of posts regarding HTML 5. You can find the other posts here , here, here , here and here.

    In this post I will provide a hands-on example on how to use rounded corners (rounded corners in CSS3) in your website. I think this is the feature that is most required in the new modern websites.

    Most websites look great with their lovely round panels and rounded corner tab style menus.

    We could achieve that effect earlier but we should resort to complex CSS rules and images. I will show you how to accomplish this great feature with the power of CSS 3.We will not use Javascript.

    Javascript is required for IE 7, IE 8 and the notorious IE 6. The best solution for implementing corners using CSS and Javascript without using images is Nifty corners cube.

    There are detailed information how to achieve this in the link I provided. This solution is tested in earlier vesrions of IE (IE 6,IE 7,IE 8) and Opera,Firefox,Safari.

    In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

    Another excellent resource is HTML 5 Doctor.

    Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

    In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

    Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for web fonts from the latest versions of modern browsers.

    Please have a look at the picture below. We see that all the latest versions of modern browsers support this feature.

    We can see that even IE 9 supports this feature.

     

    Let's move on with the actual demo.

    This is going to be a rather simple demo.I create a simple HTML 5 page. The markup follows and it is very easy to use and understand

     <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>HTML 5, CSS3 and JQuery</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <link rel="stylesheet" type="text/css" href="style.css">
         
      </head>
      <body>
     
        <div id="header">
          <h1>Learn cutting edge technologies</h1>
        </div>
        
        <div id="main">
        
          <h2>HTML 5</h2>
            
          
              <p id="panel1">
                HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
              </p>
          </div>    
        
       
      </body>
     
    </html>

    Then I need to write the various CSS rules that style this markup. I will name it style.css

     

     body{
            line-height: 38px;
            width: 1024px;
            background-color:#eee;
            text-align:center;
          }

    #panel1 { margin:auto; text-align:left; background-color:#77cdef;
    width:400px; height:250px; padding:15px;
    font-size:16px;
    font-family:tahoma;
    color:#fff;
    border-radius: 20px;

    }

    Have a look below to see what my page looks like in IE 10.

     

    This is possible through the border-radious property. The colored panel has all four corners rounded with the same radius.

    We can add a border to the rounded corner panel by adding this property declaration in the #panel1border:4px #000 solid;

    We can have even better visual effects if we specify a radius for each corner.

    This is the updated version of the style.css.

     body{
            line-height: 38px;
            width: 1024px;
            background-color:#eee;
            text-align:center;
          }

    #panel1 { margin:auto; text-align:left; background-color:#77cdef;border:4px #000 solid;
    width:400px; height:250px; padding:15px;
    font-size:16px;
    font-family:tahoma;
    color:#fff;


    border-top-left-radius: 20px;
    border-top-right-radius: 70px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 70px;


    }

    This is how my page looks in Firefox 15.0.1

     

     In this final example I will show you how to style with CSS 3 (rounded corners) a horizontal navigation menu.

     This is the new version of the HTML markup

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>HTML 5, CSS3 and JQuery</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <link rel="stylesheet" type="text/css" href="style.css">
        
      </head>
      <body>
     
        <div id="header">
          <h1>Learn cutting edge technologies</h1>
        </div>
       
        <div id="nav">
    <ul>
    <li><a class="mymenu" id="activelink" href="">Main</a></li>
    <li><a class="mymenu" href="">HTML 5</a></li>
    <li><a class="mymenu" href="">CSS 3</a></li>
    <li><a class="mymenu" href="">JQuery</a></li>

    </ul>
    </div>
       
        <div id="main">
       
          <h2>HTML 5</h2>
           
         
              <p id="panel1">
                HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
              </p>
          </div>   
       
      
      </body>
     
    </html>

    This is the updated version of style.css

     body{
            line-height: 38px;
            width: 1024px;
            background-color:#eee;
            text-align:center;
          }

    #panel1 { margin:auto; text-align:left; background-color:#77cdef;border:4px #000 solid;
    width:400px; height:250px; padding:15px;
    font-size:16px;
    font-family:tahoma;
    color:#fff;

    border-top-left-radius: 20px;
    border-top-right-radius: 70px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 70px;

    }


    #nav ul {
    width:900px;
    position:relative;
    top:24px;
    }

    ul li {
    text-decoration:none;
    display:inline;
    }

    ul li a.mymenu {
    font-family:Tahoma;
    color:black;
    font-size:14px;
    font-weight:bold;
    background-color:#77cdef;
    color:#fff;
    border-top-left-radius:18px; border-top-right-radius:18px; border:1px solid black;
    padding:15px; padding-bottom:10px;margin :2px; text-decoration:none; border-bottom:none;
    }

    .mymenu:hover { background-color:#e3781a; color:black;
    }
     

    The CSS rules are the classic rules that are extensively used for styling menus.The border-radius property is still responsible for the rounded corners in the menu.

    This is how my page looks in Chrome version 21.

     

     

    Hope it helps!!!

    Read more...