Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 21
  1. #1
    WDF Staff RickM's Avatar
    Join Date
    Jun 2010
    Posts
    593
    Member #
    2
    Liked
    16 times
    The web is evolving, and new technologies are fast taking over those former, trivial methods we've used to design websites. From flash video being replaced by browser-based video players, to CSS being able to replace images, there is a huge shakeup approaching for web design with the approach of new HTML and CSS standards.

    One of the great new features of CSS3, is its ability to have rounded borders, which if used correctly will look much better than using images! Whilst not all web browsers currently support rounded corners, all of the newer, popular browsers do. Today I'm going to show you how to create CSS based rounded content boxes on your website!<!--more-->So, why use CSS to make rounded corners, instead of the traditional image method? Well, there's a number of reasons:

    • Lower overheads due to no images being loaded
    • Very easy to change colors or use a CSS style switcher to instantly change the colors of those rounded boxes
    • Supported in CSS3, so is a web-standard that will be supported by modern browsers
    • Allows your rounded boxes to be flexible. They can be enlarged (width and height) without causing the corners to become distorted or misshaped.

    Supported Browsers

    CSS3 rounded corners are supported in most modern browsers. A few browsers adopted their own method of doing rounded corners before it became a standard, so the examples below will contain CSS code that is compatible with these individual browsers. Overall, its possible to do CSS based rounded corners in the following browsers:

    • Firefox (3+)
    • Safari (3+)
    • Google Chrome (all)
    • KHTML Browsers (e.g Konqueror)
    • Opera (10.5+)

    As you can see, pretty much all major web browsers (other than IE) fully support CSS rounded corners. I must stress that this list is NOT complete, and browsers based on the same engines as those above should also support modern CSS3 techniques.

    The Code

    Currently, CSS3 rounded corners are not finalized in the CSS3 specification. Because of this, a few browser engines such as Mozilla's Gecko engine (powers Firefox and Camino) and Apple's Webkit engine (Powers Safari and Chrome) use custom CSS, as shown below:

    • Webkit (Safari & Chrome)
    • -webkit-border-radius (all sides)
    • -webkit-border-top-right-radius
    • -webkit-border-top-left-radius
    • -webkit-border-bottom-right-radius
    • -webkit-border-botom-left-radius


    • FireFox
    • -moz-border-radius (all sides)
    • -moz-border-radius-topright
    • -moz-border-radius-topleft
    • -moz-border-radius-bottomright
    • -moz-border-radius-bottomleft


    • CSS Standard (other browsers)
    • border-radius (all sides)
    • border-top-right-radius
    • border-top-left-radius
    • border-bottom-right-radius
    • border-bottom-left-radius


    As you can see, there are unfortunately a few extra lines of code to get this working in most browsers. Whilst there is no doubt that all browsers will eventually use the 'border-radius' method, for now its all a bit up in the air! In addition to those listed above, some minor engines such as KHTML also use their own ways of doing rounded corners.

    So, lets put this to some real-world use!

    Examples

    Our first example, is a basic rounded content box:

    Code:
    #rounded_box {
        padding: 2px;
        background: #7AA4CE;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    You can preview the final outcome HERE.

    Our second example uses selective rounded corners to create an alternative effect:
    Code:
    #rounded_box {
        padding: 2px;
        background: #7AA4CE;
        border-radius-top-left: 5px;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;
        border-radius-bottom-right: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
    }
    You can preview the final outcome HERE.

    Finally, a completely different approach to using this great feature:

    Code:
    #rounded_box {
        padding: 2px;
        background: #7AA4CE;
        border-radius-top-left: 20px;
        -moz-border-radius-topleft: 20px;
        -webkit-border-top-left-radius: 20px;
        border-radius-bottom-right: 20px;
        -moz-border-radius-bottomright: 20px;
        -webkit-border-bottom-right-radius: 20px;
    
        border-radius-top-right: 5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-top-right-radius: 5px;
        border-radius-bottom-left: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
    }
    You can preview the final outcome HERE.

    There are many, many ways this can be used, and the above examples show how you could use them for typical message boxes. A real world example is our current design here at WebDesignForums.net - Those rounded navigation boxes at the top of the page - they use CSS3!

    What do you think of Imageless CSS rounded corners? Do you think they will become a major part of design along with other new CSS3 techniques? Let us know below!

  2.  

  3. #2
    Junior Member
    Join Date
    Jul 2010
    Posts
    3
    Member #
    22649
    Thanks, for the information, but I need this to work in IE please...

    Thanks
    Soori

  4. #3
    WDF Staff RickM's Avatar
    Join Date
    Jun 2010
    Posts
    593
    Member #
    2
    Liked
    16 times
    Not something I can make it do I'm afraid. IE just simply wont support it.

    Personally I only use rounded corners to add a bit extra to the design. Take the buttons on the top of WDF. It doesn't matter that the rounded corners wont work in IE as its a minor design tweak...its not critical to the success of the website.

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Curvy Corners is a solution that works for all browsers, though it's a JavaScript hack / not as elegant as CSS3:

    CurvyCorners - Beautiful rounded corners for your HTML boxes

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    You know what I was just thinking?? Would be AWESOME if someone modded the CurvyCorners plugin to be a "fix" for browsers that don't support CSS3. Right? :-)

  7. #6
    WDF Staff RickM's Avatar
    Join Date
    Jun 2010
    Posts
    593
    Member #
    2
    Liked
    16 times
    Good find there

    Did a quick search and found a pretty useful jQuery alternative too: JQuery Corner Demo

    (I'm a jQuery guy )

    It would be good it it was implemented into ie7-js - Project Hosting on Google Code as that is used all over the place.

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Off topic, I love seeing these JS UI toos coming out... back in the day I was all about javascript. Here's a demo website I built in 2003 entirely from scratch, using Javascript for visual elements (logo, clock, gradients, beveled edges):

    http://transio.com/0-gfx/0-gfx.htm

  9. #8
    WDF Staff RickM's Avatar
    Join Date
    Jun 2010
    Posts
    593
    Member #
    2
    Liked
    16 times
    Thats pretty cool that its all js!

    I'm not a fan of certain UI kits. jqueryUI is a bloated mess unfortunately. Some of them are great. I really like the look of Sencha (formally ExtJS) - they have a nice library of UI effects....shame its premium though!

  10. #9
    Banned
    Join Date
    Jul 2010
    Posts
    1
    Member #
    22514
    It seems don't work on IE! - - !

  11. #10
    Junior Member
    Join Date
    Jul 2010
    Posts
    3
    Member #
    22808
    Wonderfull Thanks a lot.


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

image less web design

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com