Learncss3 130509124150 Phpapp02

Mostafa Bayomi
mos.bayomi@gmail.com
What is CSS3?
History
Mostafa Bayomi
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.
Mostafa Bayomi
CSS3 History(contd)
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.
Mostafa Bayomi
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
Mostafa Bayomi
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/

Mostafa Bayomi
CSS3 Selectors
The heart of CSS
Mostafa Bayomi
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.
Mostafa Bayomi
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.
Mostafa Bayomi
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 valMostafa Bayomi
Attribute Selectors(contd)
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
Mostafa Bayomi
Pseudo-classes
Its likely that youre 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 werent 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:
Mostafa Bayomi
Slide Notes
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 users 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.
Mostafa Bayomi
Pseudo-classes(contd)
class
:enabled :disabled
Description
A user interface element thats enabled. Conversely, a user interface element thats disabled
:checked
:target :valid :invalid
Radio buttons or checkboxes that are selected or ticked

the element that is the target of the currently active intrapage anchor Applies to elements that are valid, based on the type or pattern attributes Applies to empty required elements, and elements failing to match the requirements defined by the type or pattern attributes.
Mostafa Bayomi
Pseudo-classes(contd)
class
:in-range
Description
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 :optional Applies to form controls that have the required attribute set. Applies to all form controls that do not have the required attribute.
:read-only
:read-write
Mostafa Bayomi
Applies to elements whose contents are unable to be altered by the user

Applies to elements whose contents are user-alterable, such as text input fields.
Structural Pseudo-classes
So far, weve 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 pseudoclasses.
Mostafa Bayomi
Structural Pseudo-classes(contd)
class
:root E F:nth-child(n)
E F:nth-last-child(n) Description
The root element, which is always the html element. The element F that is the nth child of its parent E 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)
E:nth-last-of-type(n)
The element that is the nth element of its type in a given parent element
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).
Mostafa Bayomi
class
E:last-child
Description
The element E that is the last child E of its parent, same as: nth-last-child(1)
E:first-of-type
E:last-of-type E:only-child E:only-of-type E:empty
Same as: nth-of-type(1).

Same as: nth-last-of-type(1) An element thats the only child of its parent An element thats the only one of its type inside its parent element An element that has no children; this includes text nodes, so <p>hello</p> will not be matched
Mostafa Bayomi
class
E:lang(en) E:not(exception)
Description
An element in the language denoted by the two-letter abbreviation (en). it will select elements that dont 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 whats to the right of the colon. You can string several :not pseudo-classes together. h2:not(header >h2):not(.logo)
Mostafa Bayomi
Slide Notes
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.
Mostafa Bayomi
Pseudo-elements and Generated Content

CSS gives us access to pseudo-elements. Pseudo-elements allow you to target text thats 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.
Mostafa Bayomi
Generated Content
The ::before and ::after pseudo-elements dont 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 doesnt 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 links target.
Mostafa Bayomi
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; }
Mostafa Bayomi
CSS3 Colours
New ways of describing colours
Mostafa Bayomi
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 (0255) 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.
Mostafa Bayomi
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.
Mostafa Bayomi
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.
Mostafa Bayomi
HSL and HSLA(contd)

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.
Mostafa Bayomi
HSL and HSLA(contd)

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.
Mostafa Bayomi
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!
Mostafa Bayomi
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 hasnt been finalized. The CSS browser prefixes are:
Android: -webkitChrome: -webkitFirefox: -mozInternet Explorer: -msiOS: -webkitOpera: -oSafari: -webkitmos.bayomi@gmail.com
Mostafa Bayomi
Slide Notes
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;
Mostafa Bayomi
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/
Mostafa Bayomi
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.
blur color left top div { box-shadow: 10px 10px 5px #888888; }
To include more than one box shadow on an element, define a commaseparated 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.
Mostafa Bayomi
Slide Notes
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.
Mostafa Bayomi
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;
Mostafa Bayomi
CSS3 Backgrounds
A new way to set Backgrounds
Mostafa Bayomi
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;
Mostafa Bayomi
Background-origin
The background-origin property specifies the positioning area of the background images. The background image can be placed within the content-box, paddingbox, or border-box area.
background-origin:content-box;
Mostafa Bayomi
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
Mostafa Bayomi
CSS3 Text Effects

New text features
Mostafa Bayomi
Text-shadow
CSS3 contains several new text features as text-shadow The syntax of the text-shadow property is very similar to boxshadow, 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;
Mostafa Bayomi
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; }
Mostafa Bayomi
CSS3 Gradients
Decorative styling features
Mostafa Bayomi
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-styletype
Though for now the most consistent support is for background images.
Mostafa Bayomi
Linear Gradients
Lineargradients are those where colors transition across a straight line Heres 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.
Mostafa Bayomi
Linear Gradients(contd)
John Allsops is a tool that enables you to create gradients with color stops http://www.westciv.com/tools/gradients/
Mostafa Bayomi
Slide Notes
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 wont fade, but will stop and start on a hard line. This is a way to create a striped background effect, like the one shown
Mostafa Bayomi
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
Mostafa Bayomi
Radial Gradients(contd)
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)
80px 90px
Mostafa Bayomi
Slide Notes
For the size, you can use one of the following values: closest-side:
The gradients 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 gradients 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).
Mostafa Bayomi
Slide Notes
farthest-corner:
The gradients 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.
Mostafa Bayomi
CSS3 Embedded Fonts

The @font-face
Mostafa Bayomi
@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
Mostafa Bayomi
@font-face rule(contd)
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.
Mostafa Bayomi
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
WOFF (Web Open Font Format) font
Browser Support IE 9+
TTF (True Type) OTF (OpenType)

SVG fonts/shapes
EOT (Embedded OpenType) Mostafa Bayomi
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
Mostafa Bayomi
CSS3 Multiple Columns

Laying out text
Mostafa Bayomi
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
Mostafa Bayomi
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
Mostafa Bayomi
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; }
Mostafa Bayomi
CSS3 Media Queries

The way to Responsive Web Design
Mostafa Bayomi
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
Mostafa Bayomi
What is Media Queries(contd)

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
Mostafa Bayomi
Media Queries syntax

<link href="css/phone.css rel="stylesheet" type="text/css" media="screen and (color)"
media type
expression
>
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.
Mostafa Bayomi
Media Queries syntax (contd)

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; } }
Mostafa Bayomi
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:
Mostafa Bayomi
Media query support and features(contd)

Some features also accept max and min prefixes, which gives much more flexibility:
Mostafa Bayomi
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
Mostafa Bayomi
CSS3 Transforms
Moving things around
Mostafa Bayomi
CSS3 Transforms
The CSS3 transform property lets you translate, rotate, scale, or skew any element on the page. We can manipulate an elements 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 theyre provided.
There are two types of transforms: 2D and 3D.
The 2D transform methods:

translate() rotate() scale() skew() matrix()
Mostafa Bayomi
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); Mostafa Bayomi
Slide Notes
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. Thats easy enough to fixwell just add display:inline-block, to our inline elements.
Mostafa Bayomi
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);
Mostafa Bayomi
Scaling(contd)
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 wont reflow to accommodate it
Mostafa Bayomi
Rotation
The rotate() function rotates an element around the point of origin (as with scale, by default this is the elements 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);
Mostafa Bayomi
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);
Mostafa Bayomi
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;
Mostafa Bayomi
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
Mostafa Bayomi
CSS3 Transitions
Let your pages feel more dynamic
Mostafa Bayomi
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
Mostafa Bayomi
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 transitionproperty declaration, separated by commas
Alternatively, you can use the keyword all to indicate that every supported property should be animated
Mostafa Bayomi
transition-property(contd)
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;
Mostafa Bayomi
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;
Mostafa Bayomi
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;
Mostafa Bayomi
transition-delay
By using the transition-delay property, its 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;
Mostafa Bayomi
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 dont 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;
Mostafa Bayomi
Slide Notes
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;
Mostafa Bayomi
CSS3 Animations
Let your pages feel more dynamic
Mostafa Bayomi
Animations
While transitions animate elements over time, CSS animations allow you to control each step of an animation via keyframes If youve ever worked with Flash, youre likely very familiar with the concept of keyframes With CSS transitions, were 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
Mostafa Bayomi
Keyframes
To animate an element in CSS, you first create a named animation, then attach it to an element in that elements property declaration block Animations in themselves dont 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;} }
Mostafa Bayomi
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; }

Mostafa Bayomi
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;} }
Mostafa Bayomi
CSS3 Animation Properties

Property
@keyframes animation-name animation-duration
Description Specifies the animation Specifies the name of the @keyframes animation Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0
animation-timingfunction
animation-delay animation-iterationcount
Describes how the animation will progress over one cycle of its duration. Default "ease"
Specifies when the animation will start. Default 0 Specifies the number of times an animation is played. Default 1
animation-direction
animation-play-state
Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"
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
Mostafa Bayomi

Learncss3 130509124150 Phpapp02

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learncss3 130509124150 Phpapp02

Uploaded by

Copyright:

Available Formats

Mostafa Bayomi

CSS3 Browser support

Or this site: http://caniuse.com/

Child (E > F):

Adjacent Sibling (E + F):

General Sibling (E ~ F):

Radio buttons or checkboxes that are selected or ticked

Applies to elements whose contents are unable to be altered by the user

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

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

Pseudo-elements and Generated Content

HSL and HSLA

HSL and HSLA(contd)

HSL and HSLA(contd)

CSS Vendor Prefixes

CSS3 Border Image

Multiple Background Images

CSS3 Text Effects

The above three declarations are functionally identical

CSS3 Embedded Fonts

TTF (True Type) OTF (OpenType)

EOT (Embedded OpenType) Mostafa Bayomi

Using Bold Text

CSS3 Multiple Columns

CSS3 Multiple Columns

Specify the Gap Between Columns:

CSS3 Column Rules

CSS3 Media Queries

What is Media Queries

What is Media Queries(contd)

Media Queries syntax

Media Queries syntax (contd)

------------------------------------------------------------------------------------------ Importing modular styles

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

Media query support and features

Media query support and features(contd)

width, device-width, and viewport

The 2D transform methods:

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

Changing the Origin of the Transform

Internet Explorer 10 and Firefox supports 3D transforms.

Transition has a few different properties:

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

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

The transition Shorthand Property

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

What are Animations in CSS3?

CSS3 Animation Properties

You might also like