CS7026 – CSS3

1. CS7026 – CSS3 Multiple Columns and some other things…

2. Multiple Columns • With CSS3, you can create multiple columns for laying out text - like in newspapers! • We will look at: • column-count • column-gap • column-rule • Internet Explorer 10 supports the multiple columns properties. • Firefox requires the prefix -moz-. • Chrome and Safari require the prefix -webkit-.

3. Create Multiple Columns • The column-count property specifies the number of columns an element should be divided into: • Divide the text in a div element into three columns: div{ -moz-column-count:3; -webkit-column-count:3; column-count:3; }

4. Browser Support • The column-count property is only supported in Opera and IE10. • Firefox supports an alternative, the -moz-column-count property. • Safari and Chrome support an alternative, the -webkit-column-count property.

5. column-count Values • The column-countproperty can have the following values: • number: The optimal number of columns into which the content of the element will be flowed • auto: The number of columns will be determined by other properties, like e.g. "column-width"

6. Specify the Gap Between Columns • The column-gap property specifies the gap between the columns: • Specify a 40 pixel gap between the columns: div{ -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px;}

7. column-gap Values • The column-gap property can have the following values: • length: A specified length that will set the gap between the columns • normal: Specifies a normal gap between the columns. W3C suggests a value of 1em

8. Column Rules • The column-rule property sets the width, style, and colour of the rule between columns. • It’s a shorthand property for setting all the column-rule-* properties • These are: • column-rule-color: Specifies the colour of the rule between columns • column-rule-style: Specifies the style of the rule between columns • column-rule-width: Specifies the width of the rule between columns

9. Column Rules • Specify the width, style and colour of the rule between columns: div{ -moz-column-rule:3px outset #ff00ff; -webkit-column-rule:3px outset #ff00ff; column-rule:3px outset #ff00ff;}

10. column-rule- Values • column-rule-color: • color: Specifies the color of the rule– takes the usual forms. • column-rule-width: • thin: Defines a thin rule • medium: Defines a medium rule • thick: Defines a thick rule • length: Specifies the width of the rule

11. column-rule- Values • column-rule-style: • none: Defines no rule • hidden: Defines a hidden rule • dotted: Defines a dotted rule • dashed: Defines a dashed rule • solid: Defines a solid rule • double: Defines a double rule • groove: Specifies a 3D grooved rule. The effect depends on the width and colour values • ridge: Specifies a 3D ridged rule. The effect depends on the width and colour values • inset: Specifies a 3D inset rule. The effect depends on the width and colour values • outset: Specifies a 3D outset rule. The effect depends on the width and colour values

12. Column Span • column-span specifies how many columns an element should span across. • It’s possible values are: • 1: The element should span across one column • all: The element should span across all columns • Let the h2 element span across all columns: h2{ -webkit-column-span:all; column-span:all; }

13. Column Width • column-width specifies the width of the columns. • It’s possible values are: • auto:The column width will be determined by the browser • length:A length that specifies the width of the columns • The column-width property is only supported in Opera. • Firefox supports the -moz-column-width property. • Safari and Chrome support the -webkit-column-width property.

14. Column Width • Specify the width of the columns: div{ -moz-column-width:100px; -webkit-column-width:100px; column-width:100px;}

15. columnsProperty • The columns property is a shorthand property for setting column-width and column-count. • Specify the width and number of columns: div{ columns:100px 3; -webkit-columns:100px 3; -moz-columns:100px 3; }

16. User Interface • In CSS3, some of the new user interface features that are most commonly supported are resizing elements, box sizing, and outlining. • We will look at the following user interface properties: • resize • box-sizing • outline-offset

17. Browser Support • The resize property is supported in Firefox 4+, Chrome, and Safari. • The box-sizing is supported in Internet Explorer, Chrome, and Opera. Firefox requires the prefix -moz-. Safari requires the prefix -webkit-. • The outline property is supported in all major browsers, except < Internet Explorer 9 .

18. Resizing • In CSS3, the resize property specifies whether or not an element should be resizable by the user. • Specify that a div element should be resizable by the user: div{resize:both;overflow:auto;}

19. Resizing • Possible values include: • none: The user cannot resize the element • both: The user can adjust both the height and the width of the element • horizontal: The user can adjust the width of the element • vertical: The user can adjust the height of the element

20. Box Sizing • The box-sizing property allows you to define certain elements to fit an area in a certain way: • Specify two bordered boxes side by side: div {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:50%;float:left; }

21. Browser Support • The box-sizing property is supported in Internet Explorer, Opera, and Chrome. • Firefox supports the -moz-box-sizing property. • Safari supports the -webkit-box-sizing property.

22. Box Sizing - Values • Possible values include: • content-box: • The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. • The padding and border of the element are laid out and drawn outside the specified width and height

23. Box Sizing - Values • border-box: • The specified width and height (and min/max properties) on this element determine the border box of the element. • That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. • The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties • inherit • Specifies that the value of the box-sizing property should be inherited from the parent element

24. Outline Offset • The outline-offset property offsets an outline, and draws it beyond the border edge. • Outlines differ from borders in two ways: • Outlines do not take up space • Their purpose is to make elements ‘stand out’ • Specify an outline 15px outside the border edge: div{ border:2px solid black; outline:2px solid red; outline-offset:15px;}

25. Outline Offset • Possible values include: • length: The distance the outline is outset from the border edge • inherit: Specifies that the value of the outline-offset property should be inherited from the parent element

26. appearanceProperty • The appearance property allows you to make an element look like a standard user interface element. • E.g. make a div element look like a button: div{appearance:button; -moz-appearance:button; -webkit-appearance:button; }

27. appearanceProperty - Values • The appearance property can have the following values: • normal:Render the element as normal • icon: Render the element as a small picture • window: Render the element as a viewport • button: Render the element as a button • menu: Render the element as a set of options for the user to choose from • field: Render the element as an input field

28. nav-Properties • The nav-index property specifies the tabbing order for an element • The nav-down property allows you to specify where to navigate when using the arrow keys. • The nav-left property specifies where to navigate when using the arrow-left navigation key • The nav-right property specifies where to navigate when using the arrow-left navigation key • The nav-up property specifies where to navigate when using the arrow-up navigation key • The nav- properties are currently supported only in Opera.

29. nav- Properties vbutton#b1{ %;left:25%; nav-index:1; :#b2;nav-left:#b4;nav-down:#b2;nav-up:#b4;}button#b2{ top:40%;left:50%; nav-index:2;nav-right:#b3;nav-left:#b1;nav-down:#b3;nav-up:#b1;}button#b3{ top:70%;left:25%; nav-index:3;nav-right:#b4;nav-left:#b2;nav-down:#b4;nav-up:#b2;}button#b4{ top:40%;left:0%; nav-index:4;nav-right:#b1;nav-left:#b3;nav-down:#b1;nav-up:#b3;}

30. Create the CSS… • Download the column_basepage.html from the course website. • Write a stylesheet to make it look as close to the following slide as possible.

31. Create the CSS…