tag:blogger.com,1999:blog-78466378863258655082024-02-19T06:51:24.987+02:00Creative Web Designs South AfricaCreative Web Designs South Africa offers Creative, Cutting Edge Websites designed with excellence as well web design tips & tricks. We specialize in graphic web design and development using the following tools: Dreamweaver, XHTML, CSS3, JavaScript, DHTML, Actionscript, Flash, PHP, SQL, and Photoshop.Chris van der Merwehttp://www.blogger.com/profile/18255034290132909617noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-7846637886325865508.post-50545401875414341942011-10-23T23:48:00.000+02:002016-03-31T02:14:55.553+02:00The modulo operator in programmingA little known and often ignored Arithmetic operator in <b>JavaScript</b> and other programming languages used in <b>Web Design</b> (and other applications) is the modulo operator represented by the percent sign (%).<br />
<br />
In <b>JavaScript</b> (and most C based languages) the Arithmetic operators are the following:<br />
<br />
<ul>
<li>Addition: +</li>
<li>Subtraction: -</li>
<li>Multiplication: *</li>
<li>Division: /</li>
<li><b>Modulus: %</b></li>
<li>Increment (x=x+1): ++</li>
<li>Decrement (x=x-1): --</li>
</ul>
Most people learn all the others but ignore the modulus operator because they don't understand what it does or how it can be useful. So let us start with the basics.<br />
<br />
In mathematics the modulo operator basically finds the remainder, or modulus, of a number after it has been divided by a second number. So 10 % 3 = 1 reads 10 modulo 3 equals 1 and means that after 10 has been divided by 3 there is a remainder of 1 that cannot be divided by 3 without resulting in a floating point or decimal number. Here are a few examples:<br />
<br />
<ul>
<li>57 % 2 = 1</li>
<li>75 % 10 = 5</li>
<li>33 % 3 = 0</li>
<li>4 % 4 = 0</li>
<li>0 % 2 = 0</li>
<li>2 % 0 = error: illegal division by zero</li>
<li>185 % 60 = 5</li>
</ul>
As can deduct the product of the modulo operator can never be more than the second parameter (the divider). This is especially useful when we must conform a number to a certain range but the input number can be anything e.g. an angle needs to be between 0 and 360, modulo can be used to determine the current angle if more than one revolutions has occurred; or if more than 60 seconds has passed on a counter and you must determine the number of seconds on a second hand of a clock.<br />
<br />
So how can you use this operator practically? Well, the previous examples are good and there are many more. However, the most common use for modulo is to determine whether a number is even or odd using the simple formula:<br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">if x % 2 = 0 then "number is even"</span><br />
<span class="Apple-style-span" style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">else if x % 2 = 1 then "number is odd".</span><br />
<br />
Some other uses are:<br />
<br />
<ul>
<li>to determine perfect squares</li>
<li>making a clock that counts hours, minutes, and seconds (x % 60 = sec; Math.floor(x/60) % 60 = min)</li>
<li>angle calculations (x % 360)</li>
<li>non-destructive function for cryptology</li>
<li>getting the decimal part of a number (x % 1)</li>
<li>getting the day of the week from the day of the year ((x+offset) % 7)</li>
</ul>
<div>
I hope this tutorial has shown you how useful modulo can be and that you can use this in your programming.</div>
<div>
<br /></div>
<div class="blogger-post-footer"><hr/>
By <a href='http://creativewebdesignsa.blogspot.com' target='_blank'>Creative Web Designs South Africa</a></div>Chris van der Merwehttp://www.blogger.com/profile/18255034290132909617noreply@blogger.com3tag:blogger.com,1999:blog-7846637886325865508.post-72002329118849894302011-10-23T16:42:00.000+02:002011-10-23T16:42:02.194+02:00CSS3 rounded borders with border radius.<style type="text/css">
.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;
}
</style>
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.<br />
<br />
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.<br />
<br />
Here is a basic example:<br />
<div class="example1">
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.<br />
<br />
Here is the code for this div:<br />
<br />
<code>
.example1{<br />
background-color:skyblue;<br />
margin:1em;<br />
padding:20px;</code><br />
<code><br />
<b>border-radius:15px;</b><br />
<b>-moz-border-radius:15px;</b></code><br />
<code><b><br /></b>
}</code></div>
<br />
<h3>
Syntax</h3>
<div>
<br /></div>
<code class="box">
border-radius: <border-radius>{1,4} [ / <border-radius>{1,4}]?
</code>
<br />
<br />
<br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;">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.</span><br />
<br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;">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).</span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;"><br /></span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;">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. </span><span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;">Where only one value is supplied, this is used to define both the horizontal and vertical radii equally. </span><span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;">If either value is zero, the corner will be square, not round.</span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;"><br /></span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;">The following diagram gives a few examples of how corners might appear given differing radii:</span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;"><br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://news.css3.info/wp-content/uploads/border-radius-diagram-12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://news.css3.info/wp-content/uploads/border-radius-diagram-12.png" /></a></div>
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;"><br /></span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;">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.</span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;"><br /></span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;">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.</span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;"><br /></span><br />
<br />
<div style="background-color: white; font-size: 13px; font: normal normal normal 13px/16px 'Trebuchet MS', Arial, sans-serif, Tahoma; margin-top: 13px; padding-bottom: 3px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify;">
<em>For each set of values the following applies:</em></div>
<div style="background-color: white; font-size: 13px; font: normal normal normal 13px/16px 'Trebuchet MS', Arial, sans-serif, Tahoma; margin-top: 13px; padding-bottom: 3px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: justify;">
If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.</div>
<br />
<h3>
Browser Support</h3>
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;">At 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 <a href="http://www.w3.org/TR/css3-background/">W3C Specification</a>.</span><br />
<span class="Apple-style-span" style="background-color: white; font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma; font-size: 13px; line-height: 16px;"><br /></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma;"><span class="Apple-style-span" style="line-height: 16px;">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.</span></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma;"><span class="Apple-style-span" style="line-height: 16px;"><br /></span></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma;"><span class="Apple-style-span" style="line-height: 16px;">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:</span></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', Arial, sans-serif, Tahoma;"><span class="Apple-style-span" style="line-height: 16px;"><br /></span></span><br />
<br />
<table style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; background-color: white; color: black; counter-increment: table 1; font-family: 'Trebuchet MS', Verdana, Helvetica, sans-serif; font-size: 12px; padding-left: 10px; text-align: left; width: 539px;"><thead>
<tr><th style="font-size: 13px;">W3C Specification</th><th style="font-size: 13px;">Mozilla Implementation</th></tr>
</thead><tbody>
<tr><td>border-radius</td><td>-moz-border-radius</td></tr>
<tr><td>border-top-left-radius</td><td>-moz-border-radius-topleft</td></tr>
<tr><td>border-top-right-radius</td><td>-moz-border-radius-topright</td></tr>
<tr><td>border-bottom-right-radius</td><td>-moz-border-radius-bottomright</td></tr>
<tr><td>border-bottom-left-radius</td><td>-moz-border-radius-bottomleft</td></tr>
</tbody></table>
<h3>
More Examples:</h3>
<br />
<div>
<pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-left-radius: 0px 0px; border-bottom-right-radius: 50px 50px; border-bottom-style: solid; border-bottom-width: 10px; border-color: initial; border-left-style: solid; border-left-width: 10px; border-right-style: solid; border-right-width: 10px; border-top-left-radius: 0px 0px; border-top-right-radius: 50px 50px; border-top-style: solid; border-top-width: 10px; color: #333333; float: left; font-size: 14px; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px;">border: solid 10px;
/* the border will curve into a 'D' */
border-radius: 0 50px 50px 0;
</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: red; border-bottom-left-radius: 2em 2em; border-bottom-right-radius: 2em 2em; border-bottom-style: groove; border-bottom-width: 1em; border-left-color: red; border-left-style: groove; border-left-width: 1em; border-right-color: red; border-right-style: groove; border-right-width: 1em; border-top-color: red; border-top-left-radius: 2em 2em; border-top-right-radius: 2em 2em; border-top-style: groove; border-top-width: 1em; color: #333333; float: left; font-size: 14px; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px;"> border: groove 1em red;
border-radius: 2em;
</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: gold; background-image: initial; background-origin: initial; border-bottom-color: rgb(255, 215, 0); border-bottom-left-radius: 13em 3em; border-bottom-right-radius: 13em 3em; border-bottom-style: ridge; border-left-color: rgb(255, 215, 0); border-left-style: ridge; border-right-color: rgb(255, 215, 0); border-right-style: ridge; border-top-color: rgb(255, 215, 0); border-top-left-radius: 13em 3em; border-top-right-radius: 13em 3em; border-top-style: ridge; border-width: initial; color: #333333; float: left; font-size: 14px; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px;"> background: gold;
border: ridge gold;
border-radius: 13em/3em;
</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: gold; background-image: initial; background-origin: initial; border-bottom-left-radius: 10px 10px; border-bottom-right-radius: 40px 40px; border-bottom-style: none; border-color: initial; border-left-style: none; border-right-style: none; border-top-left-radius: 40px 40px; border-top-right-radius: 10px 10px; border-top-style: none; border-width: initial; color: #333333; float: left; font-size: 14px; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px;"> background: gold;
border-radius: 40px 10px;
</pre>
<pre style="background-attachment: initial; background-clip: initial; background-color: black; background-image: initial; background-origin: initial; border-bottom-left-radius: 50% 50%; border-bottom-right-radius: 50% 50%; border-bottom-style: none; border-color: initial; border-left-style: none; border-right-style: none; border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%; border-top-style: none; border-width: initial; color: grey; float: left; font-size: 14px; font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px;">background: black;
color: gray;
border-radius: 50%;</pre>
</div>
<br />
<br />
<h3 style="clear: both;">
Sources:</h3>
<a href="http://www.css3.info/preview/rounded-border/">http://www.css3.info/preview/rounded-border/</a><br />
<a href="https://developer.mozilla.org/en/CSS/border-radius">https://developer.mozilla.org/en/CSS/border-radius</a><br />
<a href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a><br />
<br /><div class="blogger-post-footer"><hr/>
By <a href='http://creativewebdesignsa.blogspot.com' target='_blank'>Creative Web Designs South Africa</a></div>Chris van der Merwehttp://www.blogger.com/profile/18255034290132909617noreply@blogger.com1tag:blogger.com,1999:blog-7846637886325865508.post-992251761763801472011-10-19T03:30:00.011+02:002011-10-19T03:39:32.192+02:00Javascriptkit.com review<div>
For all you <strong>creative web designers</strong> and coders out there here is a great site that is really a must for anyone who is serious about programming in <b>JavaScript</b> for the web:</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.javascriptkit.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.javascriptkit.com/jkincludes/jksitelogo.gif" /></a></div>
<a href="http://www.javascriptkit.com/">JavaScript Kit</a> (<a href="http://www.javascriptkit.com/">http://www.javascriptkit.com/</a>)<br />
<br />
This site not only offers excellent tutorials, but also has a great <b>JavaScript</b> 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 <acronym title="Document Object Model">DOM</acronym> Reference and <acronym title="Dynamic Hypertext Markup Language"><b>DHTML</b></acronym> tutorials which can be seen as extensions of <b>JavaScript</b>.<br />
<br />
As stated before this site offers <b>tips</b> on how write cross-browser compatible code which is a very important issue for <b>JavaScript</b> developers. Something which most people are not aware of and is quite surprising to new coders is that <b>JavaScript</b> for <acronym title="Internet Explorer">IE</acronym>, more accurately called JScript, is a completely separate language from <b>JavaScript</b> 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 <b>web designer</b>'s existence) makes it necessary for <b>developers</b> to write code for both browsers in order to make web applications work.<br />
<a name='more'></a><br />
Something else which is surprising to most people is that JavaScript has almost nothing in common with Java except both being cross-platform <acronym title="Object Oriented Programming">OOP</acronym> 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 <b>JavaScript</b> for Mozilla and the Netscape Navigator browser. <acronym title="Internet Explorer">IE</acronym> only later come along with their own propriety equivalent which they termed JScript.<br />
<br />
Another site which may not be as comprehensive, but is still a very good for beginner JavaScript designers is: <a href="http://www.w3schools.com/js/default.asp">W3Schools.com's JavaScript Tutorials</a><br />
<br /><div class="blogger-post-footer"><hr/>
By <a href='http://creativewebdesignsa.blogspot.com' target='_blank'>Creative Web Designs South Africa</a></div>Chris van der Merwehttp://www.blogger.com/profile/18255034290132909617noreply@blogger.com0tag:blogger.com,1999:blog-7846637886325865508.post-896182288342051302011-10-13T04:41:00.003+02:002011-10-19T04:02:05.620+02:00Mozilla Developer CSS Reference<span xmlns="">For all you <strong>Web Design</strong> boffins out there especially the <strong>CSS</strong> gurus and also to all you new <strong>Web Designers and Developers </strong>who want to know more about <strong>Cascading Style Sheets</strong> (<strong>CSS</strong>), here is a great site: <br />
<a href="https://developer.mozilla.org/en/CSS_Reference">Mozilla Developer Network (MDN) CSS Reference</a> (<a href="https://developer.mozilla.org/en/CSS_Reference">https://developer.mozilla.org/en/CSS_Reference</a>)<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span xmlns=""><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_iG3BjFC5gMVYwYc2Hcd-IcEupk1uoA3liU-KLJLy_O3cdK0BGGxxEBuhb6NlHiBVEnIPBLpoJYXa-DZd3LH5VI81Jjq5lx1imH_Lv5U3TvDV9TMgCCMVYtcg5ir-iQbDHeRs814aKh-a/s1600/css+reference+screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_iG3BjFC5gMVYwYc2Hcd-IcEupk1uoA3liU-KLJLy_O3cdK0BGGxxEBuhb6NlHiBVEnIPBLpoJYXa-DZd3LH5VI81Jjq5lx1imH_Lv5U3TvDV9TMgCCMVYtcg5ir-iQbDHeRs814aKh-a/s320/css+reference+screenshot.png" width="320" /></a></span></div>
<span xmlns="">
<br /><br />
This great site lists and gives detailed descriptions of all the <strong>CSS</strong> properties, selectors, concepts, values, types, rules, and other miscellaneous info for all the CSS that works in Mozilla Firefox. It includes the traditional <strong>CSS 2.1</strong> specifications to which most <strong>Developers</strong> have become accustomed to as well as the new and exciting developments in <strong>CSS 3</strong> which are already implemented in browsers. It also includes browser compatibility tables for all <strong>CSS </strong>properties and selectors. This is a good place to start whether you are a beginner or Advanced Designer.<br /><br />
For those of you who have no idea what <strong>Cascading Style Sheets</strong> (<strong>CSS)</strong> is, here is a short description: <strong>Cascading Style Sheets</strong> 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 <strong>CSS</strong> 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. . <strong>CSS</strong> also allows <strong>developers</strong> 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 <strong>CSS</strong> file that is linked to all the pages in site, e.g. "mystylesheet.css", and that would update the entire site.<br />
</span><br />
<a name='more'></a><br />
<span xmlns=""><strong>CSS</strong> when combined with other web technologies may also be used to do some pretty advanced stuff like <strong>DHTML</strong> (<strong>Dynamic HTML</strong>) – Combining <strong>JavaScript</strong>, <strong>CSS</strong>, and <strong>HTML </strong>to change content dynamically and create animation. Basically <strong>JavaScript</strong> can be used to change <strong>CSS</strong> 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.<br />
</span><br />
<br />
<span xmlns="">Some other sites relating to CSS you might be interested in:<br />
</span><br />
<span xmlns=""><a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> also from MDN (<a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions">https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions</a>)<br />
Gives a list of Firefox specific CSS.</span><br />
<span xmlns=""><br />
</span><br />
<span xmlns=""><a href="http://developer.apple.com/library/safari/">Safari CSS Reference</a> (<a href="http://developer.apple.com/library/safari/">http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html</a>)<br />
Gives a list of Safari/Chrome/Webkit specific CSS .<br />
</span><br />
<br />
<span xmlns=""><a href="http://reference.sitepoint.com/css">Sitepoint CSS Reference</a> (<a href="http://reference.sitepoint.com/css">http://reference.sitepoint.com/css</a>)<br />
Gives an overview of basic CSS2.1 also has a good compatibility guide.<br />
</span><br />
<span xmlns=""><br />
</span><br />
<span xmlns="">W3Schools CSS Tutorial (<a href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a>)<br />
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.<br />
</span><br />
<br />
<span xmlns=""><a href="http://www.w3.org/Style/CSS/">Official W3C CSS Specifications and drafts</a> (<a href="http://www.w3.org/Style/CSS/">http://www.w3.org/Style/CSS/</a>)</span><br />
<span xmlns=""><br />
</span><br />
Stay tuned and follow this blog as I may be posting more on new CSS 3 properties and selectors soon.<div class="blogger-post-footer"><hr/>
By <a href='http://creativewebdesignsa.blogspot.com' target='_blank'>Creative Web Designs South Africa</a></div>Chris van der Merwehttp://www.blogger.com/profile/18255034290132909617noreply@blogger.com0tag:blogger.com,1999:blog-7846637886325865508.post-8500049538238822782011-08-30T05:56:00.002+02:002011-10-12T22:52:53.058+02:00WelcomeWelcome to my newly created blog! I will be sharing <b>Web Design & Development</b> <b>tips & tricks</b> as well as some of my latest <b>Designs</b> here. Hope you enjoy it. Please Follow and Share if you like this blog.<br />
<br />
Thank you!<br />
<br />
Shalom,<br />
Chris W. van der Merwe<div class="blogger-post-footer"><hr/>
By <a href='http://creativewebdesignsa.blogspot.com' target='_blank'>Creative Web Designs South Africa</a></div>Chris van der Merwehttp://www.blogger.com/profile/18255034290132909617noreply@blogger.com2