CSS3 Presentation

8/6/2019 CSS3 Presentation

http://slidepdf.com/reader/full/css3-presentation 1/25

Presentation Prepared by:

Syed Danish, Ahmed Zafar, Adil

1



` 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



` 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



AttributeSelector

Structuralpseudo-classes

CombinatorySelector

4



` 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



` :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



` :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



` :target match an element that is the target of the referring URI

8



` :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



` :not(s) match when the element does not match the simple

selector s

10



` General sibling combinator

` elementA ~ elementB

match when elementB follows somewhere after elementA, not necessarily immediately

11



` 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



` 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



` 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



` 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



` 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



` 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



` 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



` 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



` 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



` Provides support for languages that use textualruby to annotate documents.

21



` CSS3 Template layout module and Gridpositioning module

22



` 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



` 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



` Giving new cursors, responses to actions,required fields, and even resizing elements.

25

CSS3 Presentation

Documents

Transcript of CSS3 Presentation