Creative Web Designs South Africa: Web Design & Development in Strand, Western Cape

.example1{ background-color:skyblue; margin:1em; padding:20px; border-radius:15px; -moz-border-radius:15px; } code{ } code.box{ background-color:#CCCCCC; margin:0.5em; padding:15px; border-radius:15px; -moz-border-radius:10px; } How many of you designers out haven't wished it was possible to create rounded borders on a webpage without  having to make 4 corner images and then using complicated CSS to make the images 'stick' to the corners of the box only to find that your trick didn't work the same in all the browsers? Well, now it is with the new CSS3 property called border-radius.Before CSS3 the only way to create round borders on web sites was with images and even that solution had a few inherit problems. One of which was scaling (images don't scale to well when you want to change the width of the box); another was CSS bugs in different browsers (because of buggy browser's (mostly IE) floated or positioned images didn't display the same way on all the browsers without a few CSS hacks). Thankfully those days are over. Using the new CSS3 property, border-radius, it is possible to make round or even elliptical borders across browsers using simple CSS syntax.Here is a basic example: Syntaxborder-radius: <border-radius>{1,4} [ / <border-radius>{1,4}]? Rounded corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property.The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box).Where two values are supplied these are used to define, in order, the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge i.e. how large that corner is on that axis. Where only one value is supplied, this is used to define both the horizontal and vertical radii equally. If either value is zero, the corner will be square, not round.The following diagram gives a few examples of how corners might appear given differing radii:The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.The first set of (1-4) values define the horizontal radii for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally. Browser SupportAt the moment Firefox (version 4 onward), Internet Explorer (version 9 onward), Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 4 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification.Firefox (version 1 onward) with the -moz- prefix, and Google Chrome (version 0.2 onward) and Safari (version 3 onward) with the -webkit- prefix already offered basic support for the shorthand syntax. However, IE 8 and previous offered no support.It is recommended for backward compatibility to include the -moz- property as well. Here is a table of how the old Mozilla extensions corresponds with the W3C specification:W3C SpecificationMozilla Implementationborder-radius-moz-border-radiusborder-top-left-radius-moz-border-radius-topleftborder-top-right-radius-moz-border-radius-toprightborder-bottom-right-radius-moz-border-radius-bottomrightborder-bottom-left-radius-moz-border-radius-bottomleft More Examples: Sources:http://www.css3.info/preview/rounded-border/https://developer.mozilla.org/en/CSS/border-radiushttp://www.w3.org/TR/css3-background/

JavaScript Kit (http://www.javascriptkit.com/)This site not only offers excellent tutorials, but also has a great JavaScript reference that includes tips for writing cross-browser compatible code, as well as ready to use examples and snippets so that you don't have to reinvent the wheel. It also includes a DOM Reference and DHTML tutorials which can be seen as extensions of JavaScript.As stated before this site offers tips on how write cross-browser compatible code which is a very important issue for JavaScript developers. Something which most people are not aware of and is quite surprising to new coders is that JavaScript for IE, more accurately called JScript, is a completely separate language from JavaScript for Standards Compliant browsers (FireFox, Chrome, etc.), a.k.a. ECMAScript, regardless of the similarity in syntax and keywords. Internet Explorer's blatant disregard for standards (which is the bane of a web designer's existence) makes it necessary for developers to write code for both browsers in order to make web applications work.Something else which is surprising to most people is that JavaScript has almost nothing in common with Java except both being cross-platform OOP languages released at about the same time. Rather than being derived from Java (except in name) JavaScript is actually derived from C++ and was originally called ECMAScript, which is derived from the ECMA standards agency who originally created JavaScript for Mozilla and the Netscape Navigator browser. IE only later come along with their own propriety equivalent which they termed JScript.Another site which may not be as comprehensive, but is still a very good for beginner JavaScript  designers is: W3Schools.com's JavaScript Tutorials

For all you Web Design boffins out there especially the CSS gurus and also to all you new Web Designers and Developers who want to know more about Cascading Style Sheets (CSS), here is a great site: Mozilla Developer Network (MDN) CSS Reference (https://developer.mozilla.org/en/CSS_Reference)This great site lists and gives detailed descriptions of all the CSS properties, selectors, concepts, values, types, rules, and other miscellaneous info for all the CSS that works in Mozilla Firefox. It includes the traditional CSS 2.1 specifications to which most Developers have become accustomed to as well as the new and exciting developments in CSS 3 which are already implemented in browsers. It also includes browser compatibility tables for all CSS properties and selectors. This is a good place to start whether you are a beginner or Advanced Designer.For those of you who have no idea what Cascading Style Sheets (CSS) is, here is a short description: Cascading Style Sheets is a web technology which allows designers to creatively style and change the layout of Webpage using simple rules to define how different elements on the page should look and be positioned. For example, you could specify that all normal paragraphs in <p> tags should be colored red, font Arial, and bold (in this case the CSS would be p{color:red; font-family:Arial; font-weight:bold}). Other properties that may be changed include but is not limited to: margins, padding, borders, fonts, size, positioning, whether scrollbars appear when text overflows, how the page looks when printed or viewed on a mobile phone, background images and colors, the style of a link when the mouse hovers over it, opacity, page transitions, list styles, etc. . CSS also allows developers to separate content from design (or layout) and designers the ability to make global changes to an entire website by changing a single file i.e. to change all headings on the entire site to green instead of blue you would simply change one CSS file that is linked to all the pages in site, e.g. "mystylesheet.css", and that would update the entire site.CSS when combined with other web technologies may also be used to do some pretty advanced stuff like DHTML (Dynamic HTML) – Combining JavaScript, CSS, and HTML to change content dynamically and create animation. Basically JavaScript can be used to change CSS styles dynamically, as the user interacts with the page or across time, thereby being able to show or hide content, create dynamic or drop-down menus for navigation, animate page elements, and even create games.Some other sites relating to CSS you might be interested in:Mozilla CSS Extensions also from MDN (https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions)Gives a list of Firefox specific CSS.Safari CSS Reference (http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html)Gives a list of Safari/Chrome/Webkit specific CSS .Sitepoint CSS Reference (http://reference.sitepoint.com/css)Gives an overview of basic CSS2.1 also has a good compatibility guide.W3Schools CSS Tutorial (http://www.w3schools.com/css/default.asp)Great place to start for those who still new to CSS or want to learn or test a new property or selector. Has a great Try-it-yourself feature which allows you to dynamically edit CSS and see the result online. They also have a CSS Reference.Official W3C CSS Specifications and drafts (http://www.w3.org/Style/CSS/)Stay tuned and follow this blog as I may be posting more on new CSS 3 properties and selectors soon.

Welcome to my newly created blog! I will be sharing Web Design & Development tips & tricks as well as some of my latest Designs here. Hope you enjoy it. Please Follow and Share if you like this blog.Thank you!Shalom,Chris W. van der Merwe