Css Course

Circle and Oval shapes created with a single HTML DIV tag and a few CSS properties.

Circle

<style type="text/css">
#circle {
 width: 180px;
 height: 180px;
 background: #abcdef;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 padding:15px;
}
</style>

<div id="circle"><br/><br/>Web Programming Courses:<br/>CoursesWeb.net</div>
Demo:


Web Programming Courses:
CoursesWeb.net

Oval shape

- Radius must be half of length and width, to which is added the padding value (in this example: (240 / 2) + 15 = 135, and (120 / 2) + 15 = 75).
<style type="text/css">
#oval {
 width: 240px;
 height: 120px;
 background: #89f899;
 -moz-border-radius: 135px / 75px;
 -webkit-border-radius: 135px / 75px;
 border-radius: 135px / 75px;padding:15px;
}
</style>

<div id="oval"><br/>Courses for Web Development:<br/>https://CoursesWeb.net</div>
Demo:

Courses for Web Development:
https://CoursesWeb.net

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Circle and Oval with CSS

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (118123)
  2. Add data from form in text file in JSON format (13610)
  3. Ajax-PHP Chat Script (46430)
  4. Node.js Move and Copy Directory (11718)
  5. Paragraphs, Line break, Horizontal rule (3296)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (528)
  2. PHP Unzipper - Extract Zip, Rar Archives (427)
  3. SHA256 Encrypt hash in JavaScript (410)
  4. Read Excel file data in PHP - PhpExcelReader (364)
  5. Create simple Website with PHP (338)