Learn css3

mos.bayomi@gmail.com
Mostafa Bayomi

Mostafa Bayomi
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(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.

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 val-

Mostafa Bayomi
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

Mostafa Bayomi
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:

Mostafa Bayomi

 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

Mostafa Bayomi
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.

Mostafa Bayomi
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.

Mostafa Bayomi
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.

Mostafa Bayomi
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).

Mostafa Bayomi
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

Mostafa Bayomi
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)

Mostafa Bayomi

 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

Mostafa Bayomi
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.

Mostafa Bayomi
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.

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 (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.

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(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.

Mostafa Bayomi
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.

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 hasn’t
been finalized.
• The CSS browser prefixes are:
– Android: -webkit-
– Chrome: -webkit-
– Firefox: -moz-
– Internet Explorer: -ms-
– iOS: -webkit-
– Opera: -o-
– Safari: -webkit-

Mostafa Bayomi

 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

Mostafa Bayomi

 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

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.
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

Mostafa Bayomi
 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

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, padding-
box, 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 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;

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-style-
type
• 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
• 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.

Mostafa Bayomi
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/

Mostafa Bayomi

 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

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(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

Mostafa Bayomi

 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

Mostafa Bayomi

 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

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(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
{
}
• 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 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+

Mostafa Bayomi
Using Bold Text
• You must add another @font-face rule containing descriptors for bold
text:
@font-face
{
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 ResponsiveWebDesign

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”(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

Mostafa Bayomi
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

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

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(cont’d)
• 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 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()

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
 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

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(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

Mostafa Bayomi
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);

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 transition-
property declaration, separated by commas
• Alternatively, you can use the keyword all to indicate that every
supported property should be animated

Mostafa Bayomi
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;

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, 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;

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 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;

Mostafa Bayomi

 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

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

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

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

Recommended

More Related Content

What's hot (20)

Similar to Learn css3 (20)

Recently uploaded (20)

Learn css3