Post on 07-Apr-2018
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 1/25
Presentation Prepared by:
Syed Danish, Ahmed Zafar, Adil
1
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 2/25
` Attribute selectors` Structural pseudo-classes
` The target pseudo-class
` The UI element states pseudo-classes
` Negation pseudo-class` New combinatory selector
` Multiple Background images
` New Background Style Properties
` Changes to Existing Background Style Properties` CSS3 Border Properties
` New Border Style Properties
2
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 3/25
` CSS3 Columns` CSS Template layout module` CSS3 Grid positioning module- creating grids
with CSS` CSS3 Text module` CSS3 Color module` CSS3 User Interface module
` Media Queries` Generated content` CSS3 Speech module
3
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 4/25
AttributeSelector
Structuralpseudo-classes
CombinatorySelector
4
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 5/25
` E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"
` E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar"
` E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar"
`
The element has an attribute called foo that contains the string "bar"` e.g. <element foo="rebaring">
5
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 6/25
` :root The root element of the document. In HTML this is always <html>
` :nth-child(n) use this to match exact child elements or use variables to get alternating matches
` :nth-last-child(n) match exact child elements counting up from the last one
` :nth-of-type(n) match sibling elements with the same name before it in the document tree
` :nth-last-of-type(n) match sibling elements with the same name counting up from the bottom
6
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 7/25
` :last-child match the last child element of the parent
` :first-of-type match the first sibling element of that type
` :last-of-type match the last sibling element of that type
` :only-child match the element that is the only child of its parent
` :only-of-type match the element that is the only one of its type
` :empty match the element that has no children (including text nodes)
7
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 8/25
` :target match an element that is the target of the referring URI
8
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 9/25
` :enabled match the element when it's enabled
`
:disabled match the element when it's disabled
` :checked
match the element when it's checked (radio button or checkbox)
9
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 10/25
` :not(s) match when the element does not match the simple
selector s
10
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 11/25
` General sibling combinator
` elementA ~ elementB
match when elementB follows somewhere after elementA, not necessarily immediately
11
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 12/25
` Using the background-image, background-position,and background-repeat styles.
` One can specify multiple background images to be
layered on top of one another in the box.
` The first image is the layer closest to the user, withthe following ones painted behind.
` If there is a background color, it is painted below allthe image layers.
12
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 13/25
` There are also some new background properties in CSS3.
` background-clip This property defines how the background image should be clipped. The
default is the border box, but it can be changed to the padding box or thecontent box.
` background-origin This property determines whether the background should be places in
the padding box, the border box, or the content box.
` background-size This property allows you to indicate the size of the background image. It
allows you to stretch smaller images to fit the page.
13
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 14/25
` background-repeat There are two new values for this property: space and round. Space
spaces the tiled image evenly within the box without being clipped.Round rescales the background image so that it will tile a whole number of times in the box.
` background-attachment A new value "local" is added so that the background will scroll with the
element's content when that element has a scroll bar.
` background The background shorthand property adds in the size and origin
properties.
14
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 15/25
` In CSS3 borders can be the styles (solid, double,dashed, etc.) or they can be an image.
` CSS3 brings in the ability to create rounded corners.
` Border images are interesting because one can create
an image of all four borders and then tell the CSShow to apply that image to your borders.
15
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 16/25
` There are some new border properties in CSS3:
` border-radius border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-
radius. These properties allow you to create rounded corners on your borders.
` border-image-source Specifies the image source file to be used instead of border styles already defined.
` border-image-slice Represents the inward offsets from the border image edges
` border-image-width Defines the value of the width for your border image
` border-image-outset Specifies the amount that the border image area extends beyond the border box
` border-image-stretch Defines how the sides and middle parts of the border image should be tiled or scaled
` border-image The shorthand property for all the border image properties
16
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 17/25
` There are three new properties that allow you to define thenumber and width of your columns:
` column-width Defines the width your columns should be. The browser will then
flow the text to fill the space with columns that wide.
` column-count Defines the number of columns on the page. The browser will
then create columns wide enough to fit in the space, but only thenumber you specify.
` columns Shorthand property where you can define either the width or
number (or both, but that rarely makes sense)
17
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 18/25
` Gaps and rules are placed between columns in the same multicolumnscenario. Gaps will push apart the columns, but rules do not take upany space. If a column rule is wider than it's gap, it will overlap adjacentcolumns.
` There are five new properties for column rules and gaps:
` column-gap Defines the width of the gaps between the columns
` column-rule-color Defines the color of the rule
` column-rule-style
Defines the style of the rule (solid, dotted, double, etc.)` column-rule-width
Defines the width of the rule
` column-rule A shorthand property defining all three column rule properties at once
18
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 19/25
` Column breaks use the same CSS2 options used to define breaks inpaged content, but with three new properties: break-before break-after, break-inside
` Like with tables, you can set elements to span columns with thecolumn-span property. This allows you to create headlines that spanmultiple columns more like a newspaper.
` Filling columns decides how much content will be in each column.
` Balanced columns try to put the same amount of content in eachcolumn while auto just flows the content in until the column is full andthen goes to the next one.
19
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 20/25
` Allows more flexibility when defining how a stylesheet should be used.
` For instance, we could define a style sheet that isonly for handheld devices that have a viewportlarger than 20em.
20
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 21/25
` Provides support for languages that use textualruby to annotate documents.
21
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 22/25
` CSS3 Template layout module and Gridpositioning module
22
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 23/25
` Outline text and even create drop-shadows withCSS.
Need a Photoshop like Text shadow? CSS3 text-
shadow property allows to add a shadow to eachletter of some text. Also, text-shadow is not new toCSS3, it was originally proposed in CSS2, but wasremoved from CSS 2.1.
23
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 24/25
` With opacity.
` There are so many ways to use CSS transparency
to create to make website user friendly website.You can control the opacity of the text or imagesthat to create visually ecstatic content.
24
8/6/2019 CSS3 Presentation
http://slidepdf.com/reader/full/css3-presentation 25/25
` Giving new cursors, responses to actions,required fields, and even resizing elements.
25