Announcement

Collapse
No announcement yet.

Rounded Corners Without Images

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

  • #31
    Originally posted by abstract View Post
    Oh thanks alot...It is really interesting. I am going to try this too...
    I have been working on some other similar stuff too, I will post it soon too.
    Try this. Rounded corners without images & javacript.

    HTML Code:
    <style type="text/css">
    .rndbxg b.trg, .rndbxg b.brg { display: block }
    .rndbxg b.trg *, .rndbxg b.brg * { display: block; height: 1px; overflow-y: hidden; font-size: 0 !important; border-width: 0 1px; border-style: none solid}
    .rndbxg b.trg b, .rndbxg b.brg b { margin: 0 4px }
    .rndbxg b.trg i, .rndbxg b.brg i { margin: 0 2px }
    .rndbxg b.trg u, .rndbxg b.brg u { margin: 0 1px !important }
    .rndbxg .rndbxCg { border-width: 0 1px; border-style: none solid; padding: 0; overflow: hidden }
    .rndbxg b.trg u, .rndbxg b.brg u { height: 2px }
    .rndbxg b.trg i, .rndbxg b.brg i { border-width: 0 2px }
    .rndbxg b.trg b, .rndbxg b.brg b { border-width: 0 }
    .wrndbxg b.trg b, .wrndbxg b.brg b { background: #cccccc }
    .wrndbxg b.trg i, .wrndbxg b.brg i, .wrndbxg b.trg u, .wrndbxg b.brg u, .wrndbxg .rndbxCg { background: #ffffff; border-color: #cccccc }
    .grndbxg b.trg *, .grndbxg b.brg *, .grndbxg .rndbxCg { background: #ececec !important; border-color: #ececec !important }
    </style>
    HTML Code:
    <div style="padding: 10px; width: 100%">
    
     <div class="rndbxg wrndbxg">
      <b class="trg"><b></b><i></i><u></u></b>
       <div class="rndbxCg">
    
        <div style="padding: 10px">
        <div align=center>Rounded Corners Without Images</div>
        </div>
    
       </div>
      <b class="brg"><u></u><i></i><b></b></b>
     </div>
    
    </div>
    This will work in Firefox - IE - Opera and others
    Make your website the fastest one - Web Optimizer* web.stakh.com

    Comment


    • #32
      Thank you for sharing.
      web design London,
      logo design London,
      print London

      Comment


      • #33
        Thanks for the link.
        web design London,
        logo design London,
        print London

        Comment


        • #34
          Thanks for sharing. Useful tool for sure!
          Finally, a UK Web Hosting Forum - www.UKHostingTalk.com

          Comment


          • #35
            Thanks for that link flesso the link is very helpful

            Comment


            • #36
              Everybody loves rounded corners. A plethora of articles have been written about how to do it, but this is going to be different. This article is going to show you how to make rounded corners without images. That’s right. Without images.

              Why would we do such a thing? Here are a few advantages:

              * Speed: No images to download, therefore the page is quicker loading and less bandwidth is used.
              * Time: Does anyone like the tedious work to make rounded corners, splice them, upload them, etc.? I know I don’t. This saves time and frustration.
              * Scalability: One refined, this would allow for easy scaling along with the font size, which image corners do not (normally) do.
              * Future: This is the future of rounded corners–well, I think so anyway. Images should only be used when necessary, and if we can eliminate images and still make rounded corners with a decent amount of control, the world is one step closer to being a better place.
              * Coolness: Nobody is doing this yet, and it is way cool. Your boss will dig it and your mom will be impressed.

              Okay, well maybe not the coolness one. But the rest are pretty good reasons.
              Theory

              The way this works is really quite simple, but it does take thinking outside of the box (no box model puns here, please). To do this, we use a 20 x 20 square (in pixels) with the background of the page. Secondly, we use a bullet the color of the box. For this example, we are going to use a white background (#FFF) and a grey box (#E6E6E6). I know, those choices were extremely colorful of me.
              Let’s Try This Thing

              As usual, we will start out with the HTML first. What does it take to code this, you might ask? Well, let me show you. Here is the HTML we will use:

              (Note: I am using longer class names to facilitate learning, in a real world environment these could—and probably should—be shortened. Also, sorry about no spaces, my weblog software tried to put p tags there when there are spaces, but look at the example for a little more readable code.)


              <div class="rounded-box">
              <!-- Corners -->
              <div class="top-left-corner">
              <div class="top-left-inside">
              &bull;
              </div>
              </div>
              <div class="bottom-left-corner">
              <div class="bottom-left-inside">
              &bull;
              </div>
              </div>
              <div class="top-right-corner">
              <div class="top-right-inside">
              &bull;
              </div>
              </div>
              <div class="bottom-right-corner">
              <div class="bottom-right-inside">
              &bull;
              </div>
              </div>
              <!-- Content -->
              <div class="box-contents">
              Contents go here, but it must be at least
              two lines to look any good.
              </div> <!-- end div.box-contents -->
              </div> <!-- end div.rounded-box -->

              Now for the CSS. We are going to start out using pixels, because this needs to be pretty darn precise to work correctly. Ideally it will be in ems eventually.

              div.rounded-box {
              width: 9em;
              background-color: #E6E6E6;
              margin: 3px;
              }
              div.top-left-corner, div.bottom-left-corner,
              div.top-right-corner, div.bottom-right-corner
              {position:absolute; width:20px; height:20px;
              background-color:#FFF; overflow:hidden;}
              div.top-left-inside, div.bottom-left-inside,
              div.top-right-inside, div.bottom-right-inside
              {position:relative; font-size:150px; font-family:arial;
              color:#E6E6E6; line-height: 40px;}
              div.top-left-corner { top:0px; left:0px; }
              div.bottom-left-corner {bottom:0px; left:0px;}
              div.top-right-corner {top:0px; right:0px;}
              div.bottom-right-corner {bottom: 0px; right:0px;}
              div.top-left-inside {left:-8px;}
              div.bottom-left-inside {left:-8px; top:-17px;}
              div.top-right-inside {left:-25px;}
              div.bottom-right-inside {left:-25px; top:-17px;}
              div.box-contents {
              position: relative; padding: 8px; color:#000;
              }

              Now we should have a simple rounded box—without those pain-in-the-rear images! Take a look at the example for the finished product!

              Comment


              • #37
                Hey everyone, I use rounded corners alot in my web development and design.
                Search on google for css3 pie, this this awesome, it works in all browsers with no problems including ie and yes before you ask even ie7 and ie8! It also supports css gradient, css shadows etc. I've even used it on drop down menus.
                Forget images!! They are fidgety.
                Cheap international calls from mobile phones >

                Comment


                • #38
                  Originally posted by sihost View Post
                  Hey everyone, I use rounded corners alot in my web development and design.
                  Search on google for css3 pie, this this awesome, it works in all browsers with no problems including ie and yes before you ask even ie7 and ie8! It also supports css gradient, css shadows etc. I've even used it on drop down menus.
                  Forget images!! They are fidgety.
                  Does it require any quirky hacks to work in IE7 and IE8? lol

                  Comment


                  • #39
                    Originally posted by Ben Stones View Post
                    Does it require any quirky hacks to work in IE7 and IE8? lol
                    "with no problems including ie and yes before you ask even ie7 and ie8! "

                    works perfectly as long as you use the correct css code - this code contains the proper declarations for gechko browsers which support rounded corners and also a link to a htc file which css3 pie uses to generate the same in ie.

                    css3 pie is the most consistant one I've found and saved many headaches. especially when wanting rounded corner menus on a CMS site where the sizing is dynamic and using images would be a complete nightmare.
                    Cheap international calls from mobile phones >

                    Comment


                    • #40
                      Originally posted by sihost View Post
                      "with no problems including ie and yes before you ask even ie7 and ie8! "

                      works perfectly as long as you use the correct css code - this code contains the proper declarations for gechko browsers which support rounded corners and also a link to a htc file which css3 pie uses to generate the same in ie.

                      css3 pie is the most consistant one I've found and saved many headaches. especially when wanting rounded corner menus on a CMS site where the sizing is dynamic and using images would be a complete nightmare.
                      No, I meant the developers of CSS Pie . They must have used quirky hacks to make it work flawlessly in IE7/8.

                      Comment


                      • #41
                        Infact they say it's not a hack as such

                        "It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties."

                        So I think what it's doing is using the already built in ie filters, but in a clever way without the need for complex javascript or hacks.

                        I hate ie, wastes so much of my time :-0 so it's brilliant that these guys have created something which at least solves one headache or two
                        Cheap international calls from mobile phones >

                        Comment


                        • #42
                          Originally posted by sihost View Post
                          Infact they say it's not a hack as such

                          "It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties."

                          So I think what it's doing is using the already built in ie filters, but in a clever way without the need for complex javascript or hacks.

                          I hate ie, wastes so much of my time :-0 so it's brilliant that these guys have created something which at least solves one headache or two
                          Well, Microsoft are changing their attitude with IE9 and IE10 .

                          Comment


                          • #43
                            true! all we need to do is get the ie7/8 users to upgrade!! lol
                            Cheap international calls from mobile phones >

                            Comment


                            • #44
                              Re: Rounded Corners Without Images

                              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.

                              Hope this helps.

                              Comment

                              Working...
                              X