In CSS a box drop shadow can simiulate a 3-d image or dimension.

The code for it is 

box-shadow:horizontalOffset verticalOffset [blur] [spread] [color] [inset];
The [] are optional values.
Positive number for horizontal offset will place the shadow to the right.
Negative number for horizontal offset will place the shadow to the left of the box.
Positive number for vertical offset will place the shadow below the box.

Negative number for vertical offset will place the shadow above the box.

The blur value affects the edge of the box. The larger the number the blurrier the edge.

Spread value enlarges the drop shadow it can be made larger then the original box
. Allows the shadows to be spread out in all directions. It appears as if there is more then one light source instead of just one light source.
The color value can change the color of the drop shadow. It can use either the words for color or the hex code.
The inset word places the shadow inside the box.


Comments (0)

To round the corners on borders use

border-radius: length

The length is in pixels px.  The larger the number the rounder the corner.

More then one value can be entered in radius

  • one number results in all four corners having the same curve.
  • two number result in top-left & bottom-right being the first value and top-right & bottom-left being the second value.
  • three numbers result in top-left first value, top-right & bottom-left second value and bottom-right third value.
  • four numbers result in top-left first value, top-right second value, bottom-right third value and bottom-left fourth value.

 If one wants to change top and bottom of a curve to different values the following commands would be used.

  • border-top-left-radius: horizontal vertical (first value applied to the horizontal portion of the curve second value applied to the vertical portion of the curve.
  • border-top-right-radius: horizontal vertical
  • border-bottom-right-radius: horizontal vertical
  • border-bottom-left-radius: horizontal vertical

If you want all four corners to have the same varied horizontal slope and the same varied vertical slope (but horizontal is different from vertical) use the following command.

     border-radius: horizontal/vertical

The slash mark / tells the browser to apply the first value to all widths and the second value to all heights on the border.


Comments (0)

There are various types of borders then can be used around a div they are

  • solid
  • groove
  • dotted
  • ridge
  • dashed
  • inset
  • double
  • outset
  • dot-dash (not supported by all browsers)
  • dot-dot-dash(not supported by all browsers)
  • wave(not supported by all browsers)

The border width is in pixels, and the color can be either hex or color name.

Code for the border can be

border: border-style width color;

 each side of the border can be defined seperately by side, style, color or width

  • border: border-style width color; (does all 4 sides the same)
  • border-bottom: border-style width color;  (does only the bottom of the box with a give style width and color)
  • border-bottom: border-style; (defines only the bottom border style)
  • border-bottom: color; (defines only the bottom border color)
  • border-bottom: width; (defines only the bottom border width in pix)
  • border-left: border-style width color; (defines the left sides style, with, and color)
  • border-left: border-style; (defines only the left border style)
  • border-left: color; (defines only the left border color)
  • border-left: width; (defines only the left border width in px)
  • border-right: border-style color width; (defines the right border style, color and width in px)
  • border-right: border-style; (defines the right border style only)
  • border-right: color; (defines only the right border side color)
  • border-right: width (defines only the right border side width)
  • border-top: border-style color width; (defines the top border-style, color and width in px)
  • border-top: border-style; (defines the top border style)
  • border-top: color; (defines the top border color)
  • border-top width; (defines the top border width)



Comments (0)

If you want to add php to your html files you need to rename the extension on the file to php.  If the extension on the file is html it will read the php as text and print out the code.

Comments (0)
<!DOCTYPE html>
Comments (0)