Cs7026 css3
Download
1 / 31

CS7026 – CSS3 - PowerPoint PPT Presentation


  • 140 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' CS7026 – CSS3' - brant


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Cs7026 css3

CS7026 – CSS3

Multiple Columns and some other things…


Multiple columns
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-.


Create multiple columns
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; }


Browser support
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.


Column count values
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"


Specify the gap between columns
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;}


Column gap values
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


Column rules
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


Column rules1
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;}


Column rule values
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


Column rule values1
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


Column span
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; }


Column width
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.


Column width1
Column Width

  • Specify the width of the columns:

    div{ -moz-column-width:100px; -webkit-column-width:100px; column-width:100px;}


Columns property
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;

    }


User interface
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


Browser support1
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 .


Resizing
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;}


Resizing1
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


Box sizing
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; }


Browser support2
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.


Box sizing values
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


Box sizing values1
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


Outline offset
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;}


Outline offset1
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


Appearance property
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; }


Appearance property values
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


Nav properties
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.


Nav properties1
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;}


Create the css
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.



ad