cs7026 css3
Download
Skip this Video
Download Presentation
CS7026 – CSS3

Loading in 2 Seconds...

play fullscreen
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