1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS rounded corners without images!

Discussion in 'CSS' started by deathshadow, Jun 26, 2007.

0
  1. #1
    This is something I've been playing with for years, and I just did a total rewrite on my 'howto' page on the subject.

    http://battletech.hopto.org/html_tutorials/rounded_css_borders/template.html

    the directory

    http://battletech.hopto.org/html_tutorials/rounded_css_borders

    is unlocked for ease of access.

    This is the first semi-completed page for my upcoming site of web tutorials and guides. Only some 80-160 more pages to go...

    Just thought I'd share. I'm rather proud of this one. :cool:
     
    deathshadow, Jun 26, 2007 IP
    nwk, ansi and Clive like this.
  2. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #2
    Sounds interesting, will try :)
     
    Clive, Jun 26, 2007 IP
  3. Edynas

    Edynas Peon

    Messages:
    796
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Looking good. I like the Anti-Aliasing trick
    I'll bookmark your site and check back to see if you have any other tricks I can use
     
    Edynas, Jun 26, 2007 IP
  4. ninjamuk

    ninjamuk Peon

    Messages:
    305
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I like the "out of the box thinking" on that technique - nice work.
     
    ninjamuk, Jun 26, 2007 IP
  5. Digital Artist

    Digital Artist Active Member

    Messages:
    562
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Thanx it is too helpful i'll try on it and cool

    i had work on it it is also cool kinldy check it out
    CSS

    body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:11px;}
    #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
    #xsnazzy h1 {font-size:2em; color:#000000;}
    #xsnazzy h2 {font-size:1.5em;color:#a32118; border:0;}
    #xsnazzy p {padding-bottom:0.5em;}
    #xsnazzy h2 {padding-top:0.5em;}
    #xsnazzy {background: transparent; margin:1em;}

    .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
    .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {background:#f7f7f7; border-left:1px solid #a32118; border-right:1px solid #a32118;}
    .xb1 {margin:0 5px; background:#a32118;}
    .xb2 {margin:0 3px; border-width:0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}

    .xboxcontent {display:block; background:#f7f7f7; border:0 solid #a32118; border-width:0 1px;}
    </style>
    HTML
    </head>

    <body>
    <div id="xsnazzy">
    <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
    <div class="xboxcontent">
    <h1> nice</h1>
    <h2>nice</h2>
    <p> nice</p>

    </div>
    <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
    </div>
     
    Digital Artist, Jun 26, 2007 IP
    Agent47 and Analyst like this.
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Someone on opera forums linked me to a site written by an Italian gentleman that he did that with the bold tag about two months after my original... While cute, it has a few 'issues' to me.

    High global line-height will mess it up again in both opera 8.x and IE5.x - which is why you also need a 1px line-height.

    the use of a inline element that has semantic meaning, then making it display:block doesn't seem very... SEO

    It's class heavy... The object is to move data OUT of the HTML and into the CSS.

    But it is interesting to see how different people approach the same problem. Gets one thinking in different directions.
     
    deathshadow, Jun 26, 2007 IP
  7. bnandika

    bnandika Well-Known Member

    Messages:
    1,079
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    140
    #7
    Thanks for sharing, it's very useful
     
    bnandika, Jun 26, 2007 IP
  8. duilen

    duilen Active Member

    Messages:
    354
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    58
    #8
    I like the concept. I may use it for a few simple corners with a 5px radius but for the most part I think I'll stick with image alternatives.
     
    duilen, Jun 27, 2007 IP
  9. nwk

    nwk Well-Known Member

    Messages:
    385
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    158
    #9
    Its really a great work Deathshadow :).. I'll be using imageless rounded corners from now on..And Thanks for the sharing.
     
    nwk, Jun 27, 2007 IP
  10. kojakfilth

    kojakfilth Notable Member

    Messages:
    3,000
    Likes Received:
    213
    Best Answers:
    0
    Trophy Points:
    210
    #10
    nice.. ive been looking for this kind.. im studying css right now..
     
    kojakfilth, Jun 27, 2007 IP
  11. ansi

    ansi Well-Known Member

    Messages:
    1,483
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    100
    #11
    very nice. bookmarked it. green to you for sharing.
     
    ansi, Jun 27, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    You all should see what else he's working on. Too bad his schedule is conflicting with mine right now, otherwise I'd let him bounce ideas off of me again.
     
    Dan Schulz, Jun 28, 2007 IP
  13. reyna12

    reyna12 Peon

    Messages:
    42
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Also

    -moz-border-radius: 25px;
    Code (markup):
     
    reyna12, Jun 29, 2007 IP
  14. lokotex

    lokotex Peon

    Messages:
    447
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #14
    im lovin it :)
     
    lokotex, Jun 29, 2007 IP