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
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient#id {
background:url("path_to_image.png");
background-size:contain;
background-repeat:no-repeat;
}What operator is used to determine the rest of the division of two numbers?
% * /var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()$nr = ceil(3.5);
echo $nr; // 4