Learn css3

[email protected] Mostafa Bayomi


What is CSS3? History


CSS3 History

• “CSS” is an acronym for Cascading Style Sheets, a web-based markup language used to describe the look and formatting of a website to the browser.

• The first iteration of CSS was published in late 1996, offering support for font properties, colors for text and backgrounds as well as alignment of text, images, tables and other web elements.

• CSS2 was introduced in 1998, bringing additional capabilities such as absolute, relative and fixed positioning of elements ,before introducing CSS 2.1 in 2005.


CSS3 History(cont’d)

• Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called "modules".

• Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility.

• Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation.

• The earliest CSS 3 drafts were published in June 1999.


A Look at Modules

• Part of the problem with the first two generations of CSS was that the specification became too large and complex to update frequently.

• Rather than continue down that path, the W3C created the module system for CSS3, so that individual components can be updated and refined in pieces over time.

• Some of the most important CSS3 modules are: – Selectors

– Box Model

– Backgrounds and Borders

– Text Effects

– 2D/3D Transformations

– Animations

– Multiple Column Layout

– User Interface


CSS3 Browser support

• CSS3 is not yet a W3C standard, but the major browsers support many of the new properties.

• The table @ w3schools web site lists the new CSS3 properties and their browser support

http://www.w3schools.com/cssref/css3_browsersupport.asp

• Or you can visit this site that shows how much CSS3 does your browser support

http://css3test.com/

• Or this site:

http://caniuse.com/












http://caniuse.com/


CSS3 Selectors The heart of CSS


CSS3 Selectors

• With CSS3, we can target almost any element on the page with a wide range of selectors.

• We can now start using CSS3 selectors, and all the selectors from previous versions of CSS are still supported.


Relational Selectors

• Relational selectors target elements based on their relationship to another element within the markup.

• Descendant (E F): – It targets any element F that is a descendant (child, grandchild, great grandchild, and

so on) of an element E.

• Child (E > F): – matches any element F that is a direct child of element E.

• Adjacent Sibling (E + F): – matches any element F that shares the same parent as E, and comes directly after E

in the markup.

• General Sibling (E ~ F): – matches any element F that shares the same parent as any E and comes after it in

the markup.


Attribute Selectors

• CSS2 introduced several attribute selectors. These allow for matching elements based on their attributes.

• CSS3 expands upon those attribute selectors, allowing for some targeting based on pattern matching.

• E[attr]: – matches any element E that has the attribute attr with any value.

• E[attr=val]: – matches any element E that has the attribute attr with the exact, case-insensitive

value val.

• E[attr|=val]: – matches any element E whose attribute attr either has the value val or begins

with val-


Attribute Selectors(cont’d)

• E[attr~=val]: – matches any element E whose attribute attr has within its value the full word val,

surrounded by whitespace

• E[attr^=val]: – matches any element E whose attribute attr starts with the value val

• E[attr$=val]: – matches any element E whose attribute attr ends in val

• E[attr*=val] – :Matches any element E whose attribute attr matches val anywhere within the

attribute


Pseudo-classes

• It’s likely that you’re already familiar with some of the user interaction pseudo-classes, namely :link, :visited, :hover, :active, and :focus.

• There are many other pseudo-classes available.

• Several of these have been in the specification for years, but weren’t supported (or commonly known) until browsers started supporting the new HTML5 form attributes that made them more relevant.

• pseudo-classes can match elements based on attributes, user interaction, and form control state:


The :visited pseudo-class may pose a security risk, and may not be fully supported in the future.

In short, malicious sites can apply a style to a visited link, then use JavaScript to check the styles of links to popular sites.

This allows the attacker to glimpse the user’s browsing history without their permission.

As a result, several browsers have begun limiting the styles that can be applied with :visited, and some others (notably Safari 5) have disabled it entirely.

Slide Notes


Pseudo-classes(cont’d)

class Description

:enabled A user interface element that’s enabled.

:disabled Conversely, a user interface element that’s disabled

:checked Radio buttons or checkboxes that are selected or ticked

:target the element that is the target of the currently active intrapage anchor

:valid Applies to elements that are valid, based on the type or pattern attributes

:invalid Applies to empty required elements, and elements failing to match the requirements defined by the type or pattern attributes.


Pseudo-classes(cont’d)

class Description

:in-range Applies to elements with range limitations, where the value is within those limitations. This applies, for example, to number and range input types with min and max attributes.

:out-of-range The opposite of :in-range

:required Applies to form controls that have the required attribute set.

:optional Applies to all form controls that do not have the required attribute.

:read-only Applies to elements whose contents are unable to be altered by the user

:read-write Applies to elements whose contents are user-alterable, such as text input fields.


Structural Pseudo-classes

• So far, we’ve seen how we can target elements based on their attributes and states.

• CSS3 also enables us to target elements based simply on their location in the markup.

• These selectors are grouped under the heading structural pseudo-classes.


Structural Pseudo-classes(cont’d)

class Description

:root The root element, which is always the html element.

E F:nth-child(n) The element F that is the nth child of its parent E

E F:nth-last-child(n) The element F that is the nth child of its parent E, counting backwards from the last one. li:nth-last-child(1) would match the last item in any list

E:nth-of-type(n) The element that is the nth element of its type in a given parent element

E:nth-last-of-type(n) Like nth-of-type(n), except counting backwards from the last element in a parent

E:first-child The element E that is the first child E of its parent. This is the same as : nth-child(1).



class Description

E:last-child The element E that is the last child E of its parent, same as: nth-last-child(1)

E:first-of-type Same as: nth-of-type(1).

E:last-of-type Same as: nth-last-of-type(1)

E:only-child An element that’s the only child of its parent

E:only-of-type An element that’s the only one of its type inside its parent element

E:empty An element that has no children; this includes text nodes, so <p>hello</p> will not be matched



class Description

E:lang(en) An element in the language denoted by the two-letter abbreviation (en).

E:not(exception) it will select elements that don’t match the selector in the parentheses.

• Selectors with the :not pseudo-class match everything to the left of the colon, and then exclude from that matched group the elements that also match what’s to the right of the colon.

• You can string several :not pseudo-classes together.

h2:not(header >h2):not(.logo)


What is n?

In the simplest case, n can be an integer. For example ,

:nth-of-type(1) will target the first element in a series.

You can also pass one of the two keywords odd or even, targeting every other element.

You can also, more powerfully, pass a number expression such as :nth-of-type(3n+1). 3n means every third element, defining the frequency, and +1 is the offset.

The default offset is zero, so where :nth-of-type(3n) would match the 3rd, 6th, and 9th elements in a series.

Slide Notes


Pseudo-elements and Generated Content

• CSS gives us access to pseudo-elements.

• Pseudo-elements allow you to target text that’s part of the document.

• For example, all text nodes have a first letter and a first line, but how can you target them without wrapping them in a span?.

• CSS provides the ::first-letter and ::first-line pseudo-elements that match the first letter and first line of a text node, respectively.


Generated Content

• The ::before and ::after pseudo-elements don’t refer to content that exists in the markup, but rather to a location where you can insert additional content, generated right there in your CSS.

• While this generated content doesn’t become part of the DOM, it can be styled.

a[href^=http]:after {

content: " (" attr(href) ")";

}

• attr() allows you to access any attributes of the selected element, coming in handy here for displaying the link’s target.


Generated Content

• ::selection:

• The ::selection pseudo-element matches text that is highlighted.

• This is supported in WebKit, and with the -moz vendor prefix in Firefox.

::selection {

background:#484848;

color:#fff;

}

::-moz-selection{

background: #484848;

color:#fff;

}


CSS3 Colours New ways of describing colours


CSS3 Colors

• we almost always declared colors using the hexadecimal format (#FFFFFF for white).

• It was also possible to declare colors using the rgb() notation, providing either integers (0–255) or percentages.

• In addition, we had access to a few named colors, like purple, lime, aqua, red,… .

• The color keyword list has been extended in the CSS3 color module 2 to include 147 additional keyword colors.

• CSS3 also provides us with a number of other options: HSL, HSLA, and RGBA.


RGBA

• RGBA works just like RGB, except that it adds a fourth value : alpha, the opacity level.

• The first three values still represent red, green, and blue.

• For the alpha value, 1 means fully opaque, 0 is fully transparent, and 0.5 is 50% opaque.

• Unlike RGB, which can also be represented with hexadecimal notation as #RRGGBB, there is no hexadecimal notation for RGBA.


HSL and HSLA

• HSL stands for hue, saturation, and lightness.

• With RGB, when you need to manipulate the saturation or brightness of a color you change all three color values.

• With HSL you can do this by either change the saturation, or the lightness, while keeping the same base hue.

• The syntax for HSL comprises integer for hue, and percentage values for saturation and lightness.


HSL and HSLA(cont’d)

• The hsl() declaration accepts three values:

– The hue, in degrees from 0 to 359. • Some examples: 0 = red, 60 = yellow, 120 = green , 180 = cyan, 240 = blue.

– The saturation, as a percentage. 100% is the norm for saturation

– Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray.

– A percentage for lightness, with 50% being the norm.

– Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.


HSL and HSLA(cont’d)

• HSL also allows for an opacity value(hsla).

• For example, hsla(300, 100%, 50%, 0.5) is magenta with full saturation and normal lightness, which is 50% opaque.


CSS3 Borders

• With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border without using a design program, like Photoshop.

• The border-radius property lets you create rounded corners without the need for images or additional markup.

-moz-border-radius: 25px;

-webkit-border-radius: 25px;

-ms-border-radius: 25px;

-o-border-radius: 25px;

border-radius: 25px;

– When including prefixed properties, always follow with the correctly written, nonprefixed, standards-compliant syntax.

– This will ensure that your site is forward compatible!


CSS Vendor Prefixes

• CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period.

• Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.

• The CSS browser prefixes are: – Android: -webkit-

– Chrome: -webkit-

– Firefox: -moz-

– Internet Explorer: -ms-

– iOS: -webkit-

– Opera: -o-

– Safari: -webkit-


In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix above for each browser.

For example, if you want to add a CSS3 transition to your document, you would use the transition property with the prefixes listed first:

-webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease;

Slide Notes


You can override this issue by using libraries like:

-prefix-free and others

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

http://css3pie.com/

Slide Notes

http://leaverou.github.io/prefixfree/




http://css3pie.com/


Drop Shadows

• CSS3 provides the ability to add drop shadows to elements using the box-shadow property.

• This property lets you specify the color, height, width, blur, and offset of one or multiple inner and/or outer drop shadows on your elements.

div { box-shadow: 10px 10px 5px #888888; }

• To include more than one box shadow on an element, define a comma-separated list of shadows.

• When more than one shadow is specified, the shadows are layered front to back, as if the browser drew the last shadow first, and the previous shadow on top of that.

left top blur color


The first value is the horizontal offset. A positive value will create a shadow to the right of the element, a negative value to the left.

The second value is the vertical offset. A positive value pushes the shadow down, creating a shadow on the bottom of the element. A negative value pushes the shadow up.

The third value, if included, is the blur distance of the shadow. The greater the value, the more the shadow is blurred. Only positive values are allowed.

The fourth value determines the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions. A negative value contracts the shadow.

The fifth value above is the color.

Slide Notes


CSS3 Border Image

• With the CSS3 border-image property you can use an image to create a border:

• Use an image to create a border around a div element: div { border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; -o-border-image:url(border.png) 30 30 round; }


CSS3 Backgrounds A new way to set Backgrounds


Background-size

• The background-size property specifies the size of the background image

• Before CSS3, the background image size was determined by the actual size of the image

• In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts

• You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element

background-size:80px 60px;


Background-origin

• The background-origin property specifies the positioning area of the background images.

• The background image can be placed within the content-box, padding-box, or border-box area.

background-origin:content-box;


Multiple Background Images

• CSS3 allows you to use several background images for an element.

• To make a declaration for multiple background images, simply separate the values for each individual image with a comma.

background-image:url(firstImage.jpg), url(secondImage.gif),

url(thirdImage.png);

• The background images are layered one on top of the other with the first declaration on top


CSS3 Text Effects New text features


Text-shadow

• CSS3 contains several new text features as text-shadow

• The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multiple shadows.

/* single shadow */

text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5)

/* multiple shadows */

text-shadow: topOffset1 leftOffset1 blurRadius1 color1,

topOffset2 leftOffset2 blurRadius2 color2,

topOffset3 leftOffset3 blurRadius3 color3;


Word Wrapping

• If a word is too long to fit within an area, it expands outside

• In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:

p {

word-wrap:break-word;

}


CSS3 Gradients Decorative styling features


CSS3 Gradients

• CSS3 provides us with the ability to create native radial and linear gradients, as well as include multiple background images on any element

• A gradient can be theoretically employed anywhere a url()value can be used, such as background-image, border-image, and even list-style-type

• Though for now the most consistent support is for background images.


Linear Gradients

• Lineargradients are those where colors transition across a straight line

• Here’s the basic syntax for linear gradients:

background-image: linear-gradient( … );

• Inside those parentheses, you specify the direction of the gradient, and then provide some color stops.

• For the direction, you can provide either the angle along which the gradient should proceed, or the side or corner from which it should start.


Linear Gradients(cont’d)

• John Allsop’s is a tool that enables you to create gradients with color stops

• http://www.westciv.com/tools/gradients/

http://www.westciv.com/tools/gradients/




Colors transition smoothly from one color stop to the next. However

if two color stops are placed at the same position along the gradient, the colors won’t fade, but will stop and start on a hard line.

This is a way to create a striped background effect, like the one shown

Slide Notes


Radial Gradients

• Radial gradients are circular or elliptical gradients.

• Rather than proceeding along a straight axis, colors blend out from a starting point in all directions.

• The above three declarations are

functionally identical


Radial Gradients(cont’d)

• At the minimum, you need to provide a start color and an end color.

• Alternatively, you can also provide a position for the center of the gradient as the first parameter, and a shape and size as the second parameter.

• The shape can take one of two values, circle or ellipse, where ellipse is the default.

background-image: -webkit-radial-gradient(90px 80px,#FFF, #000);

(0,0)

90px

80px


For the size, you can use one of the following values:

closest-side:

The gradient’s shape meets the side of the box closest to its center (for circles),

or meets both the vertical and horizontal sides closest to the center (for ellipses).

closest-corner:

The gradient’s shape is sized so it meets exactly the closest corner of the box

from its center.

farthest-side:

Similar to closest-side, except that the shape is sized to meet the side of the

box farthest from its center (or the farthest vertical and horizontal sides in the case of ellipses).

Slide Notes


farthest-corner:

The gradient’s shape is sized so that it meets exactly the farthest corner of the box from its center.

contain:

A synonym for closest-side.

cover

A synonym forfarthest-corner.

Slide Notes


CSS3 Embedded Fonts The @font-face


@font-face rule

• Before CSS3, web designers had to use fonts that were already installed on the user's computer

• With CSS3, web designers can use whatever font he/she likes

• When you have found/bought the font you wish to use, include the font file on your web server, and it will be automatically downloaded to the user when needed

• Your "own" fonts are defined in the CSS3 @font-face rule


@font-face rule(cont’d)

• In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file in the src property.

@font-face { font-family: myFirstFont; src: url(sansation_light.woff); }

div { font-family: myFirstFont; }

• Use lowercase letters for the font URL.

• Uppercase letters can give unexpected results in IE.


Font formats

• The src property can take several formats. Additionally, you can declare more than one source

• If the browser fails to find the first source, it will try for the next one, and so on, until it either finds a source, or it runs out of options

• There are many font formats , and each browser supports some formats but not for some others

Format Browser Support

WOFF (Web Open Font Format) font IE 9+

TTF (True Type) OTF (OpenType)

SVG fonts/shapes

EOT (Embedded OpenType) Just in IE 9+


Using Bold Text

• You must add another @font-face rule containing descriptors for bold text:

@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }

• The file "Sansation_Bold.ttf" is another font file, that contains the bold characters for the Sansation font

• Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold

• This way you can have many @font-face rules for the same font


CSS3 Multiple Columns Laying out text


CSS3 Multiple Columns

• With CSS3, you can create multiple columns for laying out text - like in newspapers

• With CSS3 columns, the browser determines when to end one column and begin the next without requiring any extra markup.

• Create Multiple Columns: div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; }

• The column-count property specifies the number of columns an element should be divided into


Specify the Gap Between Columns:

• The column-gap property specifies the gap between the columns

• Specify a 40 pixels gap between the columns:

div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; }

• The total width of the columns combined with the gaps will take up 100% of the width of the element


CSS3 Column Rules

• The column-rule property sets the width, style, and color of the rule between columns

• Specify the width, style and color of the rule between columns:

div { -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ column-rule:3px outset #ff00ff; }


CSS3 Media Queries The way to Responsive Web Design


What is “Media Queries”

• Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user.

• A part of the CSS3 specification, media queries expand the role of the media attribute that controls how your styles are applied.

• For example, it's been common practice for years to use a separate style sheet for printing web pages by specifying media="print“

• Media queries take this idea to the next level by allowing designers to target styles based on a number of device properties, such as screen width, orientation, and so on


What is “Media Queries”(cont’d)

• For example: <link href="css/phone.css“

rel="stylesheet"

type="text/css"

media="only screen and (max-width: 400px)" >

• It means: – apply this style sheet only to a device that has a screen and only if the browser

window is no wider than 400 pixels


Media Queries syntax

<link href="css/phone.css“

rel="stylesheet"

type="text/css"

media="screen and (color)" >

• Keywords: (and , only , not);

• You can concatenate multiple media queries using the comma which acts as logical OR operator: if one of the media expressions evaluates to true the styles are used.

media type expression


Media Queries syntax (cont’d)

• Linking external styles:

<link href="css/phone.css“ rel="stylesheet“ type="text/css"

media="screen and (color)" >

-------------------------------------------------------------------------------------------

• Importing modular styles

@import url("phone.css") only screen and (max-width:400px);

-------------------------------------------------------------------------------------------

• Use with @media blocks(inside .css file)

@media only screen and (max-width:400px)

{

#navbar

{

float: none; width: 400px;

}

}


Media query support and features

• Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on most modern smartphones and other screen-based devices

• Features:


Media query support and features(cont’d)

• Some features also accept max and min prefixes, which gives much more flexibility:


width, device-width, and viewport

• What is the difference between width and height and the equivalent values prefixed by device- ?

• In the case of desktop and laptop computers, the difference is easy to understand: width and height refer to the size of the browser viewport, whereas device-width and device-height refer to the dimensions of the monitor

• Mobile browsers fill the available screen, so you might expect width and device-width to be the same


CSS3 Transforms Moving things around


CSS3 Transforms

• The CSS3 transform property lets you translate, rotate, scale, or skew any element on the page.

• We can manipulate an element’s appearance using transform functions.

• The value of the transform property is one or more transform functions, separated by spaces, which will be applied in the order they’re provided.

• There are two types of transforms: 2D and 3D.

• The 2D transform methods: – translate()

– rotate()

– scale()

– skew()

– matrix()


Translation

• Translation functions allow you to move elements left, right, up, or down

• Unlike position:relative, which allows you to position an element either against its current position or against a parent or other ancestor, a translated element can only be moved relative to its current position.

• The translate(x,y) function moves an element by x from the left, and y from the top:

-webkit-transform: translate(45px,-45px); -moz-transform: translate(45px,-45px); -ms-transform: translate(45px,-45px); -o-transform: translate(45px,-45px); transform: translate(45px,-45px);


If you only want to move an element vertically or horizontally, you can use the translateX or translateY functions:

transform: translateX(45px);

transform: translateY(45px);

Note: the WebKit will only allow you to transform block-level elements.

Inline elements are off-limits.

That’s easy enough to fix—we’ll just add

display:inline-block, to our inline elements.

Slide Notes


Scaling

• The scale(x,y) function scales an element by the defined factors horizontally and vertically, respectively.

• If only one value is provided, it will be used for both the x and y scaling

• For example, scale(1) would leave the element the same size, scale(2) would double its proportions, scale(0.5) would halve them, and so on.

-webkit-transform: scale(1.5,0.25); -moz-transform: scale(1.5,0.25); -ms-transform: scale(1.5,0.25); -o-transform: scale(1.5,0.25); transform: scale(1.5,0.25);


Scaling(cont’d)

• As with translate, you can also use the scaleX(x) or scaleY(y) functions

• scaling, like translation, has no impact on the document flow.

• This means that if you scale inline text, text around it won’t reflow to accommodate it


Rotation

• The rotate() function rotates an element around the point of origin (as with scale, by default this is the element’s center) by a specified angle value

• Angles are declared in degrees, with positive degrees moving clockwise and negative moving counter-clockwise

-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -ms-transform:rotate(10deg); -o-transform:rotate(10deg); transform:rotate(10deg);


Skew

• The skew(x,y) function specifies a skew along the X and Y axes

• If the second parameter is omitted, the skew will only occur on the X axis

• As with translate and scale, there are axis-specific versions of the skew transform: skewX() and skewY()

-webkit-transform: skew(15deg, 4deg); -moz-transform: skew(15deg, 4deg); -ms-transform: skew(15deg, 4deg); -o-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);


Changing the Origin of the Transform

• You can control the origin from which your transforms are applied

• This is done using the transform-origin property

• It has the same syntax as the background-position property, and defaults to the center of the object

-webkit-transform-origin: 20px 20px; -moz-transform-origin: 20px 20px; -o-transform-origin: 20px 20px; transform-origin: 20px 20px;


3D Transforms

• CSS3 allows you to format your elements using 3D transforms.

• Internet Explorer 10 and Firefox supports 3D transforms.

• Chrome and Safari requires the prefix -webkit-.

• Opera does not yet support 3D transforms (It supports 2D transforms only).

• With the rotateX() method, the element rotates around its X-axis at a given degree.

• With the rotateY() method, the element rotates around its Y-axis at a given degree


CSS3 Transitions Let your pages feel more dynamic


Transitions

• Transitions allow the values of CSS properties to change over time, essentially

• Animation has certainly been possible for some time with JavaScript, but native CSS transitions require much less processing on the client side

• Transition has a few different properties: – transition-property,

– transition-duration,

– transition-timing-function,

– transition-delay


transition-property

• The transition-property lists the CSS properties of the element that should be transitioned.

• Properties that can be made to transition include background, border, box-model, and many other properties

• You can transition font sizes and weights, but not font families

• You can provide any number of CSS properties to the transition-property declaration, separated by commas

• Alternatively, you can use the keyword all to indicate that every supported property should be animated


transition-property(cont’d)

• To do this, you must specify two things: – Specify the CSS property you want to add an effect to

– Specify the duration of the effect

• Note: If the duration is not specified, the transition will have no effect, because default value is 0

-webkit-transition-property: width; -moz-transition-property: width; -o-transition-property: width; transition-property: width;


transition-duration

• The transition-duration property sets how long the transition will take.

• You can specify this either in seconds (s) or milliseconds (ms)

-webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s;


transition-timing-function

• The transition-timing-function lets you control the ease of the transition

• Do you want your animation to start off slow and get faster, start off fast and end slower

• You can specify one of the key terms ease, linear, ease-in, ease-out, or ease-in-out.

-webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out;


transition-delay

• By using the transition-delay property, it’s possible to introduce a delay before the animation begins.

• Normally, a transition begins immediately, so the default is 0.

• Include the number of milliseconds (ms) or seconds (s) to delay the transition

-webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms;


The transition Shorthand Property

• The transition property is shorthand for the four transition functions described before

• Note that order of the values is important and must be as follows (though you don’t need to specify all four values) like the border property

-webkit-transition: width 0.2s ease-out; -moz-transition: width 0.2s ease-out; -o-transition: width 0.2s ease-out; transition: width 0.2s ease-out;


The transition properties allow for multiple transitions in one call.

You can also specify different durations and timing functions for each property being animated.

Simply include each value in a comma-separated list, using the same order as in your transition-property

transition-property: transform, color;

transition-duration: 0.2s, 0.1s;

transition-timing-function: ease-out, linear;

Slide Notes


CSS3 Animations Let your pages feel more dynamic


Animations

• While transitions animate elements over time, CSS animations allow you to control each step of an animation via keyframes

• If you’ve ever worked with Flash, you’re likely very familiar with the concept of keyframes

• With CSS transitions, we’re essentially limited to defining the first and last keyframes

• CSS animations allow us to add any number of keyframes in between, to guide our animation in more complex ways


Keyframes

• To animate an element in CSS, you first create a named animation, then attach it to an element in that element’s property declaration block

• Animations in themselves don’t do anything; in order to animate an element, you will need to associate the animation with that element

• To create an animation, use the @keyframes rule followed by a name of your choosing, which will serve as the identifier for the animation

@keyframes myAnimation { from {background: red;} to {background: yellow;} }


Animations

• When the animation is created in the @keyframe, bind it to a selector

• Bind the animation to a selector by specifying at least these two CSS3 animation properties: – Specify the name of the animation

– Specify the duration of the animation

div { animation: myAnimation 5s; -webkit-animation: myAnimation 5s; }


What are Animations in CSS3?

• You can change as many styles you want, as many times you want.

• Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.

• 0% is the beginning of the animation, 100% is when the animation is complete.

• For best browser support, you should always define both the 0% and the 100% selectors.

@keyframes myAnimation { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }


CSS3 Animation Properties

Property Description

@keyframes Specifies the animation

animation-name Specifies the name of the @keyframes animation

animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0

animation-timing-function

Describes how the animation will progress over one cycle of its duration. Default "ease"

animation-delay Specifies when the animation will start. Default 0

animation-iteration-count

Specifies the number of times an animation is played. Default 1

animation-direction Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"

animation-play-state Specifies whether the animation is running or paused. Default "running"

animation A shorthand property for all the animation properties, except the animation-play-state property

Learn css3

Technology

Transcript of Learn css3