Css Course


CSS3 contains new features that allow you to create rounded borders, add shadow to boxes, and use an image as a border.


CSS3 Rounded Corners

The CSS3 border-radius property allows you to easily create rounded corners in your design elements, without the need for corner images or the use of multiple div tag.

Example:
<style>
#id1 {
 width:300px;
 height:120px;
 border:2px solid blue;
 border-radius:28px;
 padding:4px 4px 2px 10px;
}
</style>

<h4>Example border-radius</h4>

<div id='id1'> CSS Course - coursesweb.net</div>
Rounded corners can also be created independently using the four individual border-*-radius properties ( border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius ).
Example:
<style>
#id1 {
 width:300px;
 height:120px;
 background-color:#bbfeda;
 border:2px solid blue;
 border-top-left-radius:20px;
 border-bottom-right-radius:38px;
 padding:4px 4px 2px 10px;
}
</style>

<h4>Example border-*-radius</h4>

<div id='id1'> CSS Course - coursesweb.net</div>

Box Shadow

The box-shadow property is used to add shadow to boxes. It is supported in IE9+, Firefox 4, Chrome, and Opera.
The box-shadow has the following syntax:
elm { box-shadow: X_offset Y_offset blur size color inset; }
- elm - is the HTML element to which you apply this property.
- X_offset - is the position of the horizontal shadow. Negative values are allowed.
- Y_offset - is the position of the vertical shadow. Negative values are allowed.
- blur - sets the blur distance (optional, 0 or not specified is no blur).
- size - the size of shadow (optional).
- color - define the color of the shadow (optional, black for not specified).
- inset - changes the shadow from an outer shadow (outset) to an inner shadow.

The first two values are required. If the blur or size lengths are not supplied, they are assumed to be 0.

Example:
<style>
#id1 {
 width:300px;
 height:120px;
 background-color:#bbfeda;
 box-shadow: 11px 11px 5px #7878da;
 padding:4px 4px 2px 10px;
}
</style>

<h4>Example box-shadow</h4>

<div id='id1'> CSS3 box-shadow, coursesweb.net/css</div>

CSS3 Border Image

With the border-image property you can use an image to act as an element's border.
This is achieved by slicing the border area into a nine-segment grid representing each of the corners of the border area, the sides, and the center (as shown in the image below). A single image file is similarly split into nine segments and mapped to each of the areas of the border area and the center of the container.
Slicing border-image
The box-shadow has the following syntax:
elm { border-image: url_img slice width outset repeat; }
- url_img - the path to the image to be used as a border.
- slice - specifies the inward offsets from the top, right, bottom, and left edges of the image, dividing it into nine regions: four corners, four edges and a middle.
- width - the width of the image-border.
- outset - specifies the amount by which the border image area extends beyond the border box.
- repeat - specifies whether the image-border should be repeated, rounded or stretched (can have these values: stretch, repeat, round).

• To see the border-image properly, you must specify also the border property with transparent color.
In the following example, this image is used: border-image
<style>
#id1 { 
 width:200px; 
 height:120px; 
 border: 12px solid transparent; 
 border-image:url('css/border_image.png') 30 30 round; 
} 
#id2 { 
 width:200px; 
 height:120px; 
 border: 15px solid transparent; 
 border-image:url('css/border_image.png') 30 30 stretch; 
}
</style>

<h4>Example border-image</h4>

<div id='id1'> CSS3 border-image, with round</div><br>
<div id='id2'> CSS3 border-image, with stretch</div>

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
CSS3 - new Border properties

Last accessed pages

  1. Get and Modify content of an Iframe (23454)
  2. SHA1 Encrypt data in JavaScript (19325)
  3. PHP PDO - Select query, fetch (24492)
  4. Laravel Ajax (451)
  5. Select in MySQL, Output results in HTML Table (13766)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (494)
  2. Read Excel file data in PHP - PhpExcelReader (228)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (219)
  4. querySelector and querySelectorAll (209)
  5. Create simple Website with PHP (199)