1 / 31

CS7026 – CSS3

CS7026 – CSS3. Multiple Columns and some other things…. 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.

brant
Télécharger la présentation

CS7026 – CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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…

More Related