Powered by eUKhost®

Announcement

Collapse
No announcement yet.

Rounded Corners Without Images

Collapse
This is a sticky topic.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Rounded Corners Without Images

    Here is a nice little 'Nifty' tool that I would like to share with you. It's called Nifty and using only CSS and Javascript it can create you rounded corner boxes without the use of images. For more have a look here: http://webdesign.html.it/articoli/le...fty-corners/1/

    CSS 3 rounded corners:

    I'd just like to add that considering more of the modern browsers are supporting CSS 3 rounded corners, you may want to elect to use CSS 3 rounded corners. The border-radius CSS property is supported in al the major web browsers: Internet Explorer 9 and above, Firefox 3 and above, Chrome 4 and above, Safari 3.1 and above (and iOS Safari 3.2 and above), Opera 10.5 and above, Opera mobile 11.0 and above, Android browser 2.1 and above, BlackBerry browser 7.0 and above, Chrome for Android 18 and above and Firefox for Android 15 and above.

    Some of the older versions of Firefox, Safari and iOS Safari required the use of proprietary CSS properties such as -webkit-border-radius. As well as using the as-yet draft border-radius property, also make use of the proprietary rounded corner properties for older versions of Firefox, Chrome, Safari, iOS Safari and Android browser. This includes -moz-border-radius and -webkit-border-radius.

    Code:
    /* A few examples */
    
    border-radius: 10px; /* All sides */
    border-top-left-radius: 10px; /* One side */
    -moz-border-radius: 10px; /* All sides */
    -webkit-border-radius: 10px; /* All sides */
    Hope this helps.

    (Info about CSS 3 corners relayed on page 3 of this thread).
    Last edited by eUK.Ben; 19-11-2012, 12:37. Reason: Adding information about rounded corners in CSS 3

  • #2
    Thanks for that link flesso - its really helpful .
    David Smith
    Managing Director
    DPS Computing Limited

    - Massive update! (September 2011) - It's now not neglected!!
    - New Site (10/2009)

    Comment


    • #3
      Seems very easy to use for absolute positioning, I guess the effect should be very interesting, I would like to see few examples. Thanks flesso for the link.

      Comment


      • #4
        Following appears to be an update to Nifty Corners:
        http://www.html.it/articoli/niftycube/index.html

        James

        Comment


        • #5
          Originally posted by KellyJ View Post
          Following appears to be an update to Nifty Corners:
          http://www.html.it/articoli/niftycube/index.html

          James
          I like that one. Seems to make the boxes for you.

          Comment


          • #6
            But why? That seems more complicated to me than just using css!

            Act honestly, and answer boldly

            Abundance is from activity
            Starting the work is two thirds of it

            Comment


            • #7
              daledavies , I presume you mean using CSS + JavaScript is more more complicated than just using css, and that seems reasonable. I believe however, what Nifty Corners Cube is offering is a standard piece of JS, so that the customised CSS is then simplified.

              Others use CSS with GIFs, even some have CSS only solutions. Following is a good summary list of many or most of the current alternative techniques:

              http://www.smileycat.com/miaow/archives/000044.php

              I have to admit, I haven't used any round corner technique yet, though hopefully in my next web design.

              James

              Comment


              • #8
                Yuck, javascript.

                Comment


                • #9
                  To elaborate on what Thomas just said; I would hope no one would ever use these sorts of JavaScript/CSS experiments on a live site.

                  While these things are great fun and can often lead to excellent new techniques this is not such a case.

                  Forcing the client to process a script to create a corner that could really quite simply be served from the server in the form of an image is crazy, not to mention the fact that these scripts produce rather horrendous and wholly inaccessible HTML.

                  As Kelly pointed out there are many other techniques out there that don't force you to sacrifice your semantic HTML or put extra load on your client, none of them are perfect but I'm afraid until we see the dawn of CSS3 (and multiple backgrounds on single elements) we're stuck with 'em.
                  Last edited by developmentxl; 25-01-2008, 12:42.

                  Comment


                  • #10
                    I must say that it is great!!! I like it. I will try to apply to my website hosting. Only one question. Is it friendly with search engines?
                    Thanks
                    Got expired domain names with Google page rank and Alexa info from Aboutdomains.net - Cheap domain names for Smart Domainers

                    Comment


                    • #11
                      Originally posted by WelshTom View Post
                      Yuck, javascript.
                      Lol... although I may agree to an extent with you and developmentxl I seriously do not find the problem with JavaScript, most people don't really block JS via their browsers but really, there are a few disadvantages of using JavaScript.

                      I like to use JS on my pages to automate a few things so it's alright to me, don't see much wrong with it but I would understand where others are coming from about JS...
                      Find us on Twitter and Facebook

                      Need to contact us?
                      Customer Support: Client Area - 0800 862 0380 (option 2)
                      Customer Relations: [email protected] - 0800 862 0380 (option 3)
                      Sales: [email protected] - 0800 862 0380 (option 1)




                      The opinions or views expressed above are not necessarily the opinions or views of eUKhost Ltd.

                      Comment


                      • #12
                        I have used the CurvyCorners library in the past. It seems to work pretty well, although you may need to adjust the sizes because of padding.

                        I would post the URL but I don't have enough posts.

                        www[dot]curvycorners.net
                        What is the difference between Windows 95 and Windows 98?

                        Three years.

                        Comment


                        • #13
                          Personally I have no problem with javascript on live web pages - as long as the site renders OK and functions properly with java script turned off. i.e get your site looking great using just CSS and the occasional table and then add java script where it can make for a better user experience.

                          But I don't really understand the obsession with rounded corners. Square corners look just fine to me and rounded corders represent just too much effort for too little reward. Unlesss of course you have a paying client who just *has* to have rounded corners.

                          Comment


                          • #14
                            Rounded corners were part of the Web 2.0 revolution, which seems to have died down somewhat lately.
                            What is the difference between Windows 95 and Windows 98?

                            Three years.

                            Comment


                            • #15
                              Thanks for that link flesso - its really helpful

                              Comment

                              ban-img
                              Working...
                              X