Raised This Month: $ Target: $400
 0% 

html tags, rounded corners


Post New Thread Reply   
 
Thread Tools Display Modes
Author Message
worldspawn
Senior Member
Join Date: Aug 2009
Location: Russia, Yekaterinburg
Old 04-22-2010 , 15:38   html tags, rounded corners
Reply With Quote #1

Hello,
Is here any people that have knowledge in html, especially in working with div tags?
So, what i want is to create a block on my page with rounded corners, but without using images(!)
i've searched, but found only tuts with using images

Thanks
worldspawn is offline
Send a message via ICQ to worldspawn Send a message via Skype™ to worldspawn
fysiks
Veteran Member
Join Date: Sep 2007
Location: Flatland, USA
Old 04-22-2010 , 15:42   Re: html tags, rounded corners
Reply With Quote #2

I don't think it's possible without images. HTML isn't designed for that purpose.
__________________
fysiks is offline
Seta00
The Seta00 user has crashed.
Join Date: Jan 2010
Location: Berlin
Old 04-22-2010 , 15:49   Re: html tags, rounded corners
Reply With Quote #3

Quote:
Originally Posted by fysiks View Post
I don't think it's possible without images.
It is, with JavaScript. Here ya go.

PS: NiftyCube is browser-independent, works on any decent browser/platform.

Last edited by Seta00; 04-22-2010 at 15:56.
Seta00 is offline
fysiks
Veteran Member
Join Date: Sep 2007
Location: Flatland, USA
Old 04-22-2010 , 16:22   Re: html tags, rounded corners
Reply With Quote #4

Quote:
Originally Posted by Seta00 View Post
It is, with JavaScript. Here ya go.

PS: NiftyCube is browser-independent, works on any decent browser/platform.
Javascript for rounded corners sounds like over kill to me.

So, apparently it is possible but it probably looks the best with images.

Looks like it will probably be supported by all browsers soon. http://jonraasch.com/blog/css-rounde...n-all-browsers


You learn something new everyday!

EDIT: Yay, I can make circles!
__________________

Last edited by fysiks; 04-22-2010 at 16:39.
fysiks is offline
Seta00
The Seta00 user has crashed.
Join Date: Jan 2010
Location: Berlin
Old 04-22-2010 , 18:18   Re: html tags, rounded corners
Reply With Quote #5

Quote:
Originally Posted by fysiks View Post
Javascript for rounded corners sounds like over kill to me.
You know, the library isn't new, it was made back in CSS1 and 2 times.
Quote:
Originally Posted by fysiks View Post
So, apparently it is possible but it probably looks the best with images.
IMO, the gained speed surpass the visual loss.
Quote:
Originally Posted by fysiks View Post
Looks like it will probably be supported by all browsers soon. http://jonraasch.com/blog/css-rounde...n-all-browsers
Quote:
Originally Posted by fysiks View Post
You learn something new everyday!

Quote:
Originally Posted by fysiks View Post
EDIT: Yay, I can make circles!
I suggest you a reading on HTML5, the MathML and SVG addition is awesome, look at this snippet:
Code:
<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
Great, isn't it?!
Seta00 is offline
Xanimos
Veteran Member
Join Date: Apr 2005
Location: Florida
Old 04-22-2010 , 19:02   Re: html tags, rounded corners
Reply With Quote #6

Actually there is a way of accomplishing this with using just HTML + CSS. This came around before all this fancy browser action.
I stumbled across this years ago and thought it was nifty.

Depending on how rounded you want your corners (5px is normal, but up to 15 is cool), you'll need to use that many 'b' tags, for each corner. I know this sounds odd right now but I'll try to explain it a bit but I recommend googling it to find the tut somewhere.

I'm going to describe just the top left corner, each corner will be the same but reversed and/or inversed with height and top margin.

You start with a top-row div class that holds: both corners and a title bar. Then a div for the main content section of the box, then another row called bottom-row that holds the same thing as the top row.

Each corner has the amount of b tags as your round-ness.

Each b tab will be 1px in width, with a background color of whatever color you want the inside of the bordered box to be, has a display: block, margin and padding of 0;
Then for the top left corner you play with height and margin-top.

For my example I'm going to use a box rounded at 5.

The HTML of the top row:
HTML Code:
<div class="top-row">
    <div class="left-corner">
        <b class="corner1"></b>
        <b class="corner2"></b>
        <b class="corner3"></b>
        <b class="corner4"></b>
        <b class="corner5"></b>
    </div>
    <div class="title">Hello</div>
    <div class="right-corner">
        <b class="corner1"></b>
        <b class="corner2"></b>
        <b class="corner3"></b>
        <b class="corner4"></b>
        <b class="corner5"></b>
    </div>
</div>

<div class="round-content">
text here
</div>

<div class="bottom-row">
    <div class="left-corner">
        <b class="corner1"></b>
        <b class="corner2"></b>
        <b class="corner3"></b>
        <b class="corner4"></b>
        <b class="corner5"></b>
    </div>
    <div class="title">Hello</div>
    <div class="right-corner">
        <b class="corner1"></b>
        <b class="corner2"></b>
        <b class="corner3"></b>
        <b class="corner4"></b>
        <b class="corner5"></b>
    </div>
</div>
Looks weird don't it?

Ok, the CSS for the top row, left corner
Code:
.top-row, .top-row div, .top-row div b{
    margin: 0;
    padding: 0;
    border: 0;
    height: 15px; /* This height is important for each corner piece */
    vertical-align: bottom;
}

.top-row div b {
    background: #cdcdcd; /*Change to your main color background*/
    width: 1px;
    display: block;
    float: left;
}

/* make the height = top-row height - top margin */
.left-corner .corner1 { margin-top: 5px; height: 10px; }
.left-corner .corner2 { margin-top: 4px; height: 11px; }
.left-corner .corner3 { margin-top: 3px; height: 12px; }
.left-corner .corner4 { margin-top: 2px; height: 13px; }
.left-corner .corner5 { margin-top: 1px; height: 14px; }
Now for the right corner it the exact same except opposite, so I'm just going to use the same code from above and put the right corner into it.

Code:
/* make the height = top-row height - top margin */
.top-row .left-corner .corner1, .top-row .right-corner .corner5
  { margin-top: 5px; height: 10px; }
.top-row .left-corner .corner2, .top-row .right-corner .corner4
  { margin-top: 4px; height: 11px; }
.top-row .left-corner .corner3, .top-row .right-corner .corner3
  { margin-top: 3px; height: 12px; }
.top-row .left-corner .corner4, .top-row .right-corner .corner2
  { margin-top: 2px; height: 13px; }
.top-row .left-corner .corner5, .top-row .right-corner .corner1 
  { margin-top: 1px; height: 14px; }
The CSS for the bottom row is inversed top and bottom from the top and is as follows:

Code:
.bottom-row, .bottom-row div, .bottom-row div b {
    margin: 0;
    padding: 0;
    border: 0;
    height: 15px; /* once again height is important */
    vertical-align: top;
}

/*I combined the top row css and the bottom row css below*/
.top-row div b, .bottom-row div b {
    background: #cdcdcd; /*Change to your main color background*/
    width: 1px;
    display: block;
    float:left;
}

.top-row .title , .bottom-row .title {
    margin-left: 5px; /* this is the amount of b tags and the rounding you want */
    margin-right: 5px;
    background: #cdcdcd; /* the background color again */

/* make the height = bottom-row height - top margin */
.bottom-row .left-corner .corner1, .bottom-row .right-corner .corner5
  { margin-bottom: 5px; height: 10px; }
.bottom-row .left-corner .corner2, .bottom-row .right-corner .corner4
  { margin-bottom: 4px; height: 11px; }
.bottom-row .left-corner .corner3, .bottom-row .right-corner .corner3
  { margin-bottom: 3px; height: 12px; }
.bottom-row .left-corner .corner4, .bottom-row .right-corner .corner2
  { margin-bottom: 2px; height: 13px; }
.bottom-row .left-corner .corner5, .bottom-row .right-corner .corner1 
  { margin-bottom: 1px; height: 14px; }
Like I said there's an online tut somewhere if by memory and without testing my html and css doesn't function how I my thought process says it should. lol but the concept is there.

If you're fuzzy on the concept here's a diagram:
Top left Corner b tags, each column is a separate tag.
Code:
----*
---**
--***
-****
*****  <-- undefined height
I know it looks odd stretched out, but when put together properly it looks just fine. (Use your imagination)

[EDIT] Wow, making this made me feel like I've been in the industry a while...I guess my age in this field shows.

Last edited by Xanimos; 04-22-2010 at 19:10.
Xanimos is offline
Send a message via AIM to Xanimos Send a message via MSN to Xanimos
fysiks
Veteran Member
Join Date: Sep 2007
Location: Flatland, USA
Old 04-22-2010 , 19:33   Re: html tags, rounded corners
Reply With Quote #7

Wow, crazy stuff. It will make many things much easier.
__________________
fysiks is offline
xPaw
Retired AMX Mod X Moderator
Join Date: Jul 2008
Old 04-22-2010 , 15:51   Re: html tags, rounded corners
Reply With Quote #8

Search for "rounded corners with css" and you will find what you need.
__________________
xPaw is offline
Pro Patria Finland
Senior Member
Join Date: Apr 2006
Location: BaronPub.com
Old 04-23-2010 , 15:08   Re: html tags, rounded corners
Reply With Quote #9

It is possible with just CSS.

I guess just works in Firefox. Here is a qucik copu from a CSS file I've done. Feel free to use. I am beer hence no indepth post:


#mainbox
{
/* Box size */
width: 94%;
margin-left: 3%;
margin-top: 8px;

/* Borders and background */
border: 3px solid #A30EC4;
background: #FFFFFF;
background-image: url('bgr_main.png');
background-repeat: repeat-x;
padding: 3px;

/* ROUND CORNERS HERE: */
-moz-border-radius: 15px 15px 15px 15px;
}
__________________
I am not a number. I am Gordon Freeman!
Pro Patria Finland is offline
8088
Veteran Member
Join Date: Jan 2008
Old 04-23-2010 , 18:37   Re: html tags, rounded corners
Reply With Quote #10

Quote:
Originally Posted by Pro Patria Finland View Post
-moz-border-radius: 15px 15px 15px 15px;
The WebKit (Safari, Chrome) equivalent is -webkit-border-radius. Opera supports the CSS 3 draft border-radius. IE won't support any of these until version 9.
__________________
steamID converter with OpenSearch browser plugin
8088 is offline
Reply



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -4. The time now is 19:47.


Powered by vBulletin®
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Theme made by Freecode