1 CS428 Web Engineering Lecture 10 Images, Tables, Forms, Border-Radius (CSS – V)

CSS Images CSS play a good role to control image display, you can set following image properties:  The border property is used to set the border of an image.  The height property is used to set the height of an image.  The width property is used to set the width of an image.  The opacity property is used to set the opacity of an image.

3 border Output: Possible values: can have a value in length or in %, pt, px

4 height <img style=“border: 1pt solid red; height: 200px;” src=“images/css.gif” /> Output: Possible values: %, pt, px

5 width <img style=“border: 1pt solid red; width: 200px;” src=“images/css.gif” /> Output: Possible values: %, pt, px

opacity The opacity property is used to create transparency of an element or an image. The opacity value is a floating point number from 0.0 to 1.0. A lower value makes element more transparent. The opacity value of 0 defines the element as fully transparent.

Example img { opacity: 0.4; }

Regular Image: The same image with transparency: 8

Rounded Corners: border-radius The border radius property lets you create rounded corners. #box1 { border: 2px solid red; width: 150px; height: 70px; border-radius: 25px; } HTML5 & CSS3

10

11 border-top-left-radius #box1 { border: 2px solid red; width: 150px; height: 70px; border-top-left-radius: 5px; } HTML5 & CSS3 Output: Possible values: number in pixels

12 border-top-right-radius #box1 { border: 2px solid red; width: 150px; height: 70px; border-top-right-radius: 10px; } HTML5 & CSS3 Output: Possible values: number in pixels

13 border-bottom-right-radius #box1 { border: 2px solid red; width: 150px; height: 70px; border-bottom-right-radius: 15px; } HTML5 & CSS3 Output: Possible values: number in pixels

14 border-bottom-left-radius #box1 { border: 2px solid red; width: 150px; height: 70px; border-bottom-left-radius: 40px; } HTML5 & CSS3 Output: Possible values: number in pixels

15 Forms: input[type=control] You can also change the form appearance. Input[type=control] is used to change the default form appearance.

16 input[type=submit] input[type=submit] { color: #FF00CC; background-color: blue; border-radius: 10px; font-weight: bold; } Output:

CSS Tables You can set following table properties:  The border property is used to set the border of a table.  The border-collapse property sets whether the table borders are collapsed into a single border or separated.  The width property is used to set the width of a table.  The height property is used to set the height of a table.

–The text-align property is set the horizontal alignment. –The vertical-align property is set the vertical alignment. –The padding property is used to control the border and contents in a table. –The color property is set the text color. –The background-color property is set the background color of a table. 18

border table, th, td { border: 1px solid black; } Comany Country The Big Cheeze USA Island Trading UK 19

border-collapse property The border-collapse property sets whether the table borders are collapsed into a single border or separated: Possible values: collapse, separate 20

border-collapse table { border-collapse: collapse; } table, th, td { border: 1px solid black; } Comany Country The Big Cheeze USA Island Trading UK 21

22 width & height property table { width: 50%; } th { height: 50px; }

text-align table { width: 50%; } td { text-align: right; }

vertical-align table { width: 50%; } td { height: 50px; vertical-align: middle; }

padding table { width: 50%; } th { height: 50px; padding: 15px; }

color table { width: 50%; } th { height: 50px; background-color: green; color: white; }

caption-side table { caption-side: bottom; } th { height: 50px; background-color: green; color: white; } Possible values: left, right, top and bottom