Viewing Thread:
"CSS Rounded Corners - a feature you may not be familiar with!!!"

[B][U]CSS Rounded Corners - a feature you may not be familiar with!!![/U][/B]

Cascading Style Sheets, more commonly known as simple CSS, have been a part of the web for a long, long time (unless you’re Microsoft), and know doubt a few people who read this particular forum, or host web sites with Freeola with either knowingly or unknowingly be using CSS on their pages. CSS is the preferred way do "design" web site layouts, leaving the HTML to merely "mark-up" its meaning.

This little article is aimed at those who know what CSS is, and have used it in the past and present. You may have changed your fonts, your colours, your background images, but there is one feature that you may not be familiar with, but once you known about it, may very well fall off your chair with excitement ... or perhaps not, but I’m going to share this one feature with you, weather you like it or not, so there!

Because this is aimed at people who know about CSS, even if it’s just the basics, I’ll not expand too much on any given property, as hopefully you’ll see how it works quite quickly… yes, even you Machie.

Not All Web Browsers Are Equal!!!

Before going any further, the feature I’m going to mention is not “cross-platform" (yet) – it might work in one browser but not another, while other browsers might require different CSS code to make the same action occur.

Those of you know anything about the history of Microsoft’s Internet Explorer web browser won’t be surprised to learn that this feature isn’t supported at all (again, I say yet).

As this is a visual effect feature, i.e. the way the web site looks to people, you can get away quite easily with the fact that it’ll work in one browser and not another. It’s just a case of your own judgement as to weather you think the feature is worth adding for 25% or so of your potential visitors from seeing.

Browser Specific CSS!!!

Some web browsers support a feature to set CSS to be aimed at only that browser for certain CSS properties, which are usually previews of future CSS settings. This is done by adding the browser name / rendering engine name to the front of the CSS setting you’re using, being preceded with a dash to indicate it is browser specific, for example:

[B]-moz-[/B]property: value;
[B]-webkit-[/B]property: value;
[B]-ms-[/B]property: value;


The first example is targeted to the rendering engine of Mozilla Firefox, the second to Apple Safari & Google Chrome, and the third to Microsoft Internet Explorer. Others exist, but those are the four web browsers you’re most likely to be familiar with. Chrome and Safari use the same rendering engine, called webkit, though at any one time they may be using different versions, so keep an eye out.

The use of a dash before any CSS property is an official method in CSS, to allow previews to be implemented early for real world examples of future CSS settings, so don’t worry if a CSS validator tells you otherwise – the validator is, ironically, invalid in this case, even the W3C one, so don’t be concerned, unless you’re really in to your CSS valid icons. Using CSS 3 may also produce a CSS warning, but that’s because CSS 3 isn’t completed yet.

Okay, lets get in to the example of a feature you might like, but don’t know it yet.

CSS Rounded Corners!!

As the title may suggest, the CSS feature I want to show you is the proposed CSS 3 feature Rounded Corners. This feature will enable a web site author to created curved corners on any visual border.

For example, currently, if you have a <div> element, and use CSS to set the border to be 7px, coloured red, and to have a solid line design, the border will look like a box / rectangle shape, with all four corners connecting at right-angles.

Web designers for a long time have wanted to be able to make these corners a little more visually appealing, and less "blocky", and so for a while have been using techniques that involve the use of multiple images floating in the corner, or multiple HTML elements with different background images to make the corners curvy.

To make this unnecessary, CSS 3 hopes to include this type of design feature. Some web browsers already implement a preview of the feature, meaning web sites can make the corners round with a little CSS code, rather than using multiple images.

The preview feature is currently available in Firefox, Safari & Chrome, which make up about 25% of web traffic, give or take a % or two (or three, 4 perhaps ….). Opera & Internet Explorer don’t support this feature as yet, though Internet Explorer 9 will (it’s in the IE9 alpha build), as I’m sure will Opera sooner or latter.

How A Rounded Corner Is Defined!!!

The CSS 3 setting for this will be known as the border-radius group, and the value(s) for this will be a radius length (e.g. pixels) of the desired curve dimensions. A radius is the length from the centre point of a circle to the edge, and as such you can set the two points that the corners start to curve, starting from the corner point.

The first length value works from the corner point, and moves horizontally, while the second value starts from the corner point and moves vertically. Then the two points are marked as the radius point, and a curve is drawn between the two, creating the effect, If the two length values are the same, then an even curve is drawn, while two different lengths will cause the oppose effect.

Perhaps that is a tad confusing, and that is no surprise, as it’s not easy to get without any diagrams or visual aids, so now would be a good time to dive in to an example.

We’ll stated with a basic <div> element, with an <h2> and a <p> element of text inside it, and give it a border, so our little bit of HTML come may look like this:

<div>
<h2>A page heading</h2>
<p>some text</p>
</div>

and our little CSS to set the standard border looking like this:

<style type="text/css">
div {
border: 7px red solid;
}
</style>

To created a rounded corner for our new box, each of the four corners of our <div> has its own CSS property, and to jump right in, here is an example of how each corner might be defined.

<style type="text/css">
div {
border: 1px red solid;

[B]border-top-left-radius: 5px 5px;
border-top-right-radius: 15px 15px;
border-bottom-right-radius: 25px 25px;
border-bottom-left-radius: 35px 35px;[/B]
}
</style>

The top left corner will have a radius pinned 5 pixels from the top and side, and the browser will create the curve from this point. Because the radius is not far from the border, the curve is hard to see. The top right radius is a little bigger, as is the bottom right and bottom left bigger still.

While the CSS 3 setting will use the shorthand border-radius, only Google Chrome recognises this at this time, and Safari & Firefox, require their own settings to be included. These settings are called [B]-moz-[/B]border-radius (for Firefox) & [B]-webkit-[/B]border-radius (for Safari). Because Chrome also recognises the Safari code, you could just use this for the time being if you want to save a little bandwidth.

For Apple Safari (Google Chrome also recognises this) the CSS code for rounded corners looks like:

<style type="text/css">
div {
-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 25px 25px;
-webkit-border-bottom-left-radius: 35px 35px;
}
</style>

And for Firefox, the CSS code for rounded corners looks like:

<style type="text/css">
div {
-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 15px 15px;
-moz-border-radius-bottomright: 25px 25px;
-moz-border-radius-bottomleft: 35px 35px;
}
</style>

The reason the Firefox code is quite different is because it has existed for quite some time, and therefore doesn’t follow the more recent proposed CSS 3 property. Mozilla will no doubt correct this when CSS 3 is close to completion. It can also be expected that Safari will follow Chrome sometime soon and use the standard border-radius property, without the need for the -webkit- bit at the beginning.

So all put together in a single <style> declaration, we could use the following CSS to define a rounded corner for Google, Firefox & Apple web browsers:

<style type="text/css">
div {
border: 7px red solid;

-webkit-border-top-left-radius: 5px 5px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 25px 25px;
-webkit-border-bottom-left-radius: 35px 35px;

-moz-border-radius-topleft: 5px 5px;
-moz-border-radius-topright: 15px 15px;
-moz-border-radius-bottomright: 25px 25px;
-moz-border-radius-bottomleft: 35px 35px;
}
</style>

Take a look if you have Chrome, Firefox or Safari installed – it’ll better highlight what the above code can do once you’ve seen the end result.

A second example is included in the above link to show the look if you use different length values on the same corner, for example:

<style type="text/css">
div {
border-top-left-radius: [B]15px 35px[/B];
border-top-right-radius: 25px 45px[/B];
border-bottom-right-radius: [B]35px 75px[/B];
border-bottom-left-radius: [B]245px 185px[/B];
}
</style>

Why Not Give It A Try???

As I mentioned, it’s currently a feature the might not be seen by many people, but if you want to have some rounded corners, and haven’t yet used any other method to do so, you can now at least let some of your visitors enjoy a visual treat or two!!!

Well?? Go for it!!!

Johnny 5. Data. INPUT! Powering down

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

CSS3 FTW!

Machie wrote:
> I don't use any codes that won't work in Mosaic Netscape.
>
> As for how they award GADs, I had it figured out ages ago.
>
> Walkthrough : 30%
> Cheats : 20%
> Technical posts : 15%
> Game reviews : 15%
> Non-game reviews : 10%
> No winner : 10%
> Chat posts : 0%*
>
> * - Unless it's a special challenge

Thanks for the recognition Machie :-)

And @cjh - brilliant:-)

No need to apologise, this is after all a chat forum - and thanks for the second win :)

I'll unlikely be submitting one for next week, due to lack of time, but I might try for the following week if I can.

Yeah it's all thanks to Hmmm that he won a GAD. Although I have to disagree with him. I mean the market share of IE has gotta be pretty insignificant now.

edit: congratulations by the way cjh, keep 'em coming.

Hey, we're keeping his post at the top of the forum-he should be thanking us :D

Sorry about that - I was only responding to Sonic Chris :¬)
...and also apologised to cjh for going OT.
[s]Hmmm...[/s]

Poor cjh, time to get back on topic I think.

Open another thread if you wanna discuss GAD's. Especially seen as those two guides have already been explained in the GAD query thread in the past. :D

I don't use any codes that won't work in Mosaic Netscape.

As for how they award GADs, I had it figured out ages ago.

Walkthrough : 30%
Cheats : 20%
Technical posts : 15%
Game reviews : 15%
Non-game reviews : 10%
No winner : 10%
Chat posts : 0%*

* - Unless it's a special challenge

Garin wrote:
> I think they are focused on generating traffic. I believe its
> far easier to generate traffic from gaming than from technical
> things. And I wouldnt be surprised if "technical
> traffic" is actually less useful anyway. At least in terms
> of converting them to customers.

I guess you're right.

But how many 'gamers' out there are in a position to actually decide which Broadband company to sign up with when they stumble across a games thread? I'm guessing most of them haven't even got a bank account! :¬P

NB. If it is based on perceived traffic I'm not sure that works, looking at some of the thread post counts...

Anyway we're going well OT here - sorry cjh.
[s]Hmmm...[/s]

Hmmm... wrote:
> As Freeola are an ADSL and Web Hosting company (to me!) they
> still seem to be more focused on Gaming which was part of their
> past...

I think they are focused on generating traffic. I believe its far easier to generate traffic from gaming than from technical things. And I wouldnt be surprised if "technical traffic" is actually less useful anyway. At least in terms of converting them to customers.