CSS 3
A CSS selector selects the HTML element(s) you want to style.
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you
want to style.
Types:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or
attribute value)
CSS3 is the latest standard for CSS.
CSS3 is completely backwards-compatible
with earlier versions of CSS.
CSS3 includes the following concepts-
CSS3 Borders
CSS3 Backgrounds
CSS3 Gradients
CSS3 Text Effects
CSS3 2D Transform
CSS3 3D Transforms
CSS3 Transitions
CSS3 Animations
CSS3 Multiple Columns
CSS 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 following border properties:
• border-radius
• box-shadow
• border-image
Css3 Border-Image
border-image: url(border.png) 30 30 round
CSS3 Border-Radius Property
CSS3 box-shadow
The box-shadow property attaches one or more drop-shadows to the box.
box-shadow: 10px 10px 5px #888888;
CSS3 Backgrounds
CSS3 contains several new backgrounds which allow greater control of the
background element
• CSS3 background-clip Property
• CSS3 background-origin Property
• CSS3 background-size Property
• CSS3 Background-image
• CSS3 Backgroud-Attachment
• CSS3 Background-position
• CSS3 Multiple Background Image
Property.
CSS3 background-clip
The background-clip property specifies the painting area of the background.
CSS Syntax
background-clip: border-box|padding-box|content-box|initial|inherit;
Property Values
Value Description
border-box Default value. The background is clipped to the border box
padding-box The background is clipped to the padding box
content-box The background is clipped to the content box
Example:
div {
background-color: yellow;
background-clip: content-box;
}
CSS3 background-origin Property
The background-origin property specifies what the background-position property should
be relative to.
CSS Syntax
background-origin: padding-box|border-box|content-box|initial|inherit;
Property Values
Value Description
padding-box Default value. The background image is positioned relative to the padding box
border-box The background image is positioned relative to the border box
content-box The background image is positioned relative to the content box
Example:
div {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: left;
background-origin: content-box;
• Example:
• div {
• background-image: url('smiley.gif');
• background-repeat: no-repeat;
• background-position: left;
• background-origin: content-box;
•}
CSS3 background-size
The background-size property specifies the size of the background images. CSS Syntax
background-size: auto|length|cover|contain|initial|inherit;
Property Values
Value Description
auto Default value. The background-image contains its width and height
Sets the width and height of the background image. The first value sets the width,
length The second value sets the height. If only one value is given, the second is set
to"auto"
percentage Sets the width and height of the background image in percent of the parent
element. The first value sets the width, the second value sets the height. If only one value is
given, the second is set to "auto"
Example:
div {
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
CSS3 Multiple Background Images
CSS3 allows you to use several background images for an element.
Example
Set two background images for the <body> element:
body {
background: url(img_tree.gif), url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
CSS3 Text Effects
CSS3 contains several new text features.They are
• text-shadow
• word-wrap
CSS3 Text-Shadow
CSS3 Text-Shadow:
You specify the horizontal shadow, the vertical shadow, the blur distance, and
the
CSS Syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
CSS3 Text-Shadow:
CSS3 Text-Shadow:
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow.
CSS Syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Property
Values
Value Description
h-shadow Required. The position of the horizontal shadow. Negative values are allowed
v-shadow Required. The position of the vertical shadow. Negative values are allowed
blur-radius Optional. The blur radius. Default value is 0
color Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible
color values
none Default value. No shadow
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
CSS3 Word Wrapping
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
CSS Syntax
word-wrap: normal|break-word|initial|inherit;
Property Values
Value Description
normal Break words only at allowed break points. This is default
break-word Allows unbreakable words to be broken
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
CSS3 Gradients
• CSS gradients let you display smooth transitions between two or more
specified colors.
• CSS defines two types of gradients:
• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
CSS Linear Gradients
• To create a linear gradient you must define at least two color stops. Color
stops are the colors you want to render smooth transitions among. You can
also set a starting point and a direction (or an angle) along with the
gradient effect.
Syntax-
• background: linear-gradient(direction, color-stop1, color-stop2, …);
Types of Linear Gradients:
Linear Gradient – Top to Bottom
Syntax: background-image: linear-gradient(red, yellow);
Linear Gradient – Left to Right:
Syntax:background-image: linear-gradient(to right, red , yellow);
Linear Gradient – Diagonal
Syntax:background: linear-gradient(to bottom right, pink, green);
Linear Gradient-Using Angles
Syntax:background-image: linear-gradient(angle, color-stop1, color-stop2);
Linear Gradient-Using Multiple Color Stops
Syntax:background-image: linear-gradient(color-stop1, color-stop2,........);
Linear Gradient-Using Transparency
Syntax:background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));[0
indicates full transparency, 1 indicates full color (no transparency).
Linear Gradient-Repeating a linear-gradient:
Syntax:background-image: repeating-linear-gradient(color-stop1, color-stop2 10%, color-stop2
20%);
CSS Radial Gradients
A radial gradient is defined by its center. To create a radial gradient you
must also define at least two color stops.
Syntax-
background-image: radial-gradient(shape size at position, start-color, ...,
last-color);
By default, the shape is an ellipse, size is farthest-corner, and position is
center.
Radial Gradient – Evenly Spaced Color Stops (this is default)
Syntax:background: radial-gradient(red, yellow, green);
Radial Gradient – Differently Spaced Color Stops
Syntax:background-image: radial-gradient(red 5%, yellow 15%, green 60%);
Radial Gradient – Setting the Shapes
Syntax:background-image: radial-gradient(circle, red, yellow, green);
Radial Gradient – Using different size keywords
The size parameter defines the size of the gradient. It can take four values:
• closest-side
• farthest-side
• closest-corner
• farthest-corner
Syntax:background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
Radial Gradient – Repeating a Radial Gradient
Syntax:background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
CSS3 2D Transforms
• With CSS3 transform, we can move, scale, turn, spin, and stretch
elements.
• A transformation is an effect that lets an element change shape, size
and position.
CSS3 2D Transforms
2d transform methods:
• translate()
• rotate()
• scale()
• skew()
• matrix()
The translate() Method
With the translate() method, the element moves from its current position, depending on the parameters given
for the left (X-axis) and the top (Y-axis) position:
The rotate() Method
With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and
rotates the element counter-clockwise.
The scale() Method
With the scale() method, the element increases or decreases the size, depending on the parameters given for
the width (X-axis) and the height (Y-axis):
The skew() Method
With the skew() method, the element turns in a given angle, depending on the parameters given for the
horizontal (X-axis) and the vertical (Y-axis) lines:
The matrix() Method
The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale,
move (translate), and skew elements.
2d Transform Methods
Function Description
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis
translateY(n) Defines a 2D translation, moving the element along the Y-axis
Defines a 2D scale transformation, changing the elements width and
scale(x,y)
height
scaleX(n) Defines a 2D scale transformation, changing the element's width
scaleY(n) Defines a 2D scale transformation, changing the element's height
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis
CSS3 3D Transforms
CSS3 allows you to format your elements using 3D transforms.
3D transform methods:
· rotateX()
· rotateY()
RotataeX():
With the rotateX() method, the element rotates around its X-axis at a given degree.
RotateY():
With the rotateY() method, the element rotates around its Y-axis at a given degree.
3d Transform Methods
Function Description
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,
Defines a 3D transformation, using a 4x4 matrix of 16 values
n,n)
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element
CSS3 Transitions
CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, specify two things:
· the CSS property you want to add an effect to
· the duration of the effect
Example:transition: width 2s, height 2s, transform 2s;
CSS3 Animations
CSS3 animations can replace animations created by Flash and JavaScript in existing web pages.
CSS3 @keyframes Rule
The @keyframes rule is where the animation is created.
Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the
new style.
CSS3 Animation
When an animation is created in the @keyframe rule, you must bind it to a selector, otherwise the animation will
have no effects.
#animation{ @keyframes myfirst {
animation-name: myfirst; 0% {background:red; left:0px; top:0px;}
animation-duration: 5s; 25% {background:yellow; left:200px; top:0px;}
animation-timing-function: linear; 50% {background:blue; left:200px; top:200px;}
animation-delay: 2s; 75% {background:green; left:0px; top:200px;}
animation-iteration-count: infinite; 100% {background:red; left:0px; top:0px;}
animation-direction: alternate;
animation-play-state: running;}
The transition-timing-function property specifies the speed curve of the transition
effect.
The transition-timing-function property can have the following values:
ease - specifies a transition effect with a slow start, then fast, then end slowly
(this is default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
