Css Module 13 (Css3)

CSS3
Gradients
The CSS3 gradient feature allows you to create a gradient from one color to
another without using any images.
Using CSS3 Gradients

The CSS3 gradient feature provides a flexible solution to generate smooth
transitions between two or more colors. Earlier, to achieve such effect we had
to use the images. Using CSS3 gradients you can reduce the download time
and saves the bandwidth usages. The elements with gradients can be scaled
up or down to any extent without losing the quality, also the output will
render much faster because it is generated by the browser.
Gradients are available in two styles: linear and radial.
Creating CSS3 Linear Gradients

To create a linear gradient you must define at least two color stops. However
to create more complex gradient effects you can define more 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 which the
gradient effect is applied. The basic syntax of creating the linear gradients
using the keywords can be given with:
linear-gradient(direction, color-stop1, color-stop2, ...)
Linear Gradient - Top to Bottom

The following example will create a linear gradient from top to bottom. This is
default.
Example
.gradient {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow);
/* Standard syntax */
background: linear-gradient(red, yellow);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Linear Gradients from Top to Bottom</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>
Linear Gradient - Left to Right

The following example will create a linear gradient from left to right.
Example
.gradient {
background: red;
background: -webkit-linear-gradient(left, red, yellow);
background: -ms-linear-gradient(left, red, yellow);
background: linear-gradient(to right, red, yellow);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Linear Gradients from Top to Bottom</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: red;
}
</style>
</head>
<body>
</body>
</html>
Linear Gradient - Diagonal

You can also create a gradient along the diagonal direction. The following
example will create a linear gradient from the bottom left corner to the top
right corner of the element's box.
Example
.gradient {
background: red;
background: -webkit-linear-gradient(bottom left, red,
yellow);
background: -ms-linear-gradient(bottom left, red, yellow);
background: linear-gradient(to top right, red, yellow);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Linear Gradients along Diagonal</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: red;
background: -webkit-linear-gradient(bottom left, red, yellow);
background: -ms-linear-gradient(bottom left, red, yellow);
background: linear-gradient(to top right, red, yellow);
}
</style>
</head>
<body>
</body>
</html>
Setting Direction of Linear Gradients Using

Angles
If you want more control over the direction of the gradient, you can set the
angle, instead of the predefined keywords. The angle 0deg creates a bottom to
top gradient, and positive angles represent clockwise rotation, that means the
angle 90deg creates a left to right gradient. The basic syntax of creating the
linear gradients using angle can be given with:
linear-gradient(angle, color-stop1, color-stop2, ...)
The following example will create a linear gradient from left to right using
angle.
Example
.gradient {
background: red;
background: -webkit-linear-gradient(0deg, red, yellow);
background: -ms-linear-gradient(0deg, red, yellow);
background: linear-gradient(90deg, red, yellow);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Setting Linear Gradients Direction Using Angles</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: red;
background: -webkit-linear-gradient(0deg, red, yellow);
background: -ms-linear-gradient(0deg, red, yellow);
background: linear-gradient(90deg, red, yellow);
}
</style>
</head>
<body>
</body>
</html>
Creating Linear Gradients Using Multiple

Color Stops
You can also create gradients for more than two colors. The following example
will show you how to create a linear gradient using multiple color stops. All
colors are evenly spaced.
Example
.gradient {
background: red;
background: -webkit-linear-gradient(red, yellow, lime);
background: -ms-linear-gradient(red, yellow, lime);
background: linear-gradient(red, yellow, lime);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Linear Gradients with Multiple Color Stops</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: red;
background: -webkit-linear-gradient(red, yellow, lime);
background: -ms-linear-gradient(red, yellow, lime);
background: linear-gradient(red, yellow, lime);
}
</style>
</head>
<body>
</body>
</html>
Setting the Location Color Stops

Color stops are points along the gradient line that will have a specific color at
that location. The location of a color stop can be specified either as a
percentage, or as an absolute length. You may specify as many color stops as
you like to achieve the desired effect.
Example
.gradient {
background: red;
background: -webkit-linear-gradient(red, yellow 30%, lime
60%);
background: -ms-linear-gradient(red, yellow 30%, lime
60%);
background: linear-gradient(red, yellow 30%, lime 60%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Setting the Color Stops Location</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: red;
background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
background: -ms-linear-gradient(red, yellow 30%, lime 60%);
background: linear-gradient(red, yellow 30%, lime 60%);
}
</style>
</head>
<body>
</body>
</html>
Note: While setting the color-stops location as a percentage, 0% represents the

starting point, while 100% represents the ending point. However, you can use
values outside of that range i.e. before 0% or after 100% to get the effect you
want.
Repeating the Linear Gradients
You can repeat linear gradients using the repeating-linear-gradient() function.
Example
.gradient {
background: white;
background: -webkit-repeating-linear-gradient(black, white
10%, lime 20%);
background: -ms-repeating-linear-gradient(black, white
10%, lime 20%);
background: repeating-linear-gradient(black, white 10%,
lime 20%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Repeating the Linear Gradients</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: white;
background: -webkit-repeating-linear-gradient(black, white 10%, lime 2
0%);
background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
background: repeating-linear-gradient(black, white 10%, lime 20%);
}
</style>
</head>
<body>
</body>
</html>
Creating CSS3 Radial Gradients
In a radial gradient color emerge from a single point and smoothly spread
outward in a circular or elliptical shape rather than fading from one color to
another in a single direction as with linear gradients. The basic syntax of
creating a radial gradient can be given with:
radial-gradient(shape size at position, color-stop1, color-stop2, ...);
The arguments of the radial-gradient() function has the following meaning:
 position — Specifies the starting point of the gradient, which can be

specified in units (px, em, or percentages) or keyword (left, bottom, etc).
 shape — Specifies the shape of the gradient's ending shape. It can be
circle or ellipse.
 size — Specifies the size of the gradient's ending shape. The default
is farthest-side.
The following example will show you create a radial gradient with evenly
spaced color stops.
Example
.gradient {
background: red;
background: -webkit-radial-gradient(red, yellow, lime);
background: -ms-radial-gradient(red, yellow, lime);
background: radial-gradient(red, yellow, lime);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Radial Gradients</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: red;
background: -webkit-radial-gradient(red, yellow, lime);
background: -ms-radial-gradient(red, yellow, lime);
background: radial-gradient(red, yellow, lime);
}
</style>
</head>
<body>
</body>
</html>
Setting the Shape of Radial Gradients

The shape argument of the radial-gradient() function is used to define the
ending shape of the radial gradient. It can take the value circle or ellipse.
Here's is an example:
Example
.gradient {
background: red;
background: -webkit-radial-gradient(circle, red, yellow,
lime);
background: -ms-radial-gradient(circle, red, yellow,
lime);
background: radial-gradient(circle, red, yellow, lime);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Setting the Shape Radial Gradients</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: red;
background: -webkit-radial-gradient(circle, red, yellow, lime);
background: -ms-radial-gradient(circle, red, yellow, lime);
background: radial-gradient(circle, red, yellow, lime);
}
</style>
</head>
<body>
</body>
</html>
Note: If the shape argument is omitted or not specified, the ending shape
defaults to a circle if the size is a single length, otherwise an ellipse.
Setting the Size of Radial Gradients

The size argument of the radial-gradient() function is used to define the size of
the gradient's ending shape. Size can be set using units or the
keywords: closest-side, farthest-side, closest-corner, farthest-corner.
Example
.gradient {
background: red;
background: -webkit-radial-gradient(left bottom, circle
farthest-side, red, yellow, lime);
background: -ms-radial-gradient(left bottom, circle
farthest-side, red, yellow, lime);
background: radial-gradient(circle farthest-side at left
bottom, red, yellow, lime);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Setting the Size Radial Gradients</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: red;
background: -webkit-radial-gradient(left bottom, circle farthest-side,
red, yellow, lime);
background: -ms-radial-gradient(left bottom, circle farthest-side, re
d, yellow, lime);
background: radial-gradient(circle farthest-side at left bottom, red,
yellow, lime);
}
</style>
</head>
<body>
</body>
</html>
Repeating the Radial Gradients

You can also repeat radial gradients using the repeating-radial-
gradient() function.
Example
.gradient {
background: white;
background: -webkit-repeating-radial-gradient(black, white
10%, lime 20%);
background: -ms-repeating-radial-gradient(black, white
10%, lime 20%);
background: repeating-radial-gradient(black, white 10%,
lime 20%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Repeating the Size Radial Gradients</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: white;
background: -webkit-repeating-radial-gradient(black, white 10%, lime 2
0%);
background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
background: repeating-radial-gradient(black, white 10%, lime 20%);
}
</style>
</head>
<body>
</body>
</html>
CSS3 Transparency and Gradients

CSS3 gradients also support transparency. You can use this to create fading
effects on background images when stacking multiple backgrounds.
Example
Try this code »
.gradient {
background: url("images/sky.jpg");
background: -webkit-linear-gradient(left,
rgba(255,255,255,0), rgba(255,255,255,1)),
url("images/sky.jpg");
background: -ms-linear-gradient(left, rgba(255,255,255,0),
rgba(255,255,255,1)), url("images/sky.jpg");
background: linear-gradient(to right, rgba(255,255,255,0),
rgba(255,255,255,1)), url("images/sky.jpg");
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Using Transparency with Gradients</title>
<style>
.gradient {
width: 400px;
height: 300px;
background: url("/examples/images/sky.jpg");
background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgb
a(255,255,255,1)), url("/examples/images/sky.jpg");
background: -ms-linear-gradient(left, rgba(255,255,255,0), rgb
background: linear-gradient(to right, rgba(255,255,255,0), rgb
}
</style>
</head>
<body>
</body>
</html>
CSS3 Text Overflow
When a string of text overflows the boundaries of a container it can make a
mess of your whole layout. Here’s a cool trick to handle text overflow by
truncating long strings with a CSS ellipsis.
Text Overflow (with a CSS Ellipsis)
Our Overflowing Text Demo

During this quick tip we’ll use the following demo to show how text overflow
works:
When Text is Too Long

Long text strings, which don’t have spaces and are contained within
something that’s not as wide, will naturally overflow beyond the boundaries
of the container (like this email address in the screenshot below):
As you can see, it makes a real mess.
Add the CSS Overflow Property

With one simple property we can clean this up. By adding overflow:
hidden; to the paragraph which holds the email address, we will hide
anything which doesn’t fit the container:
Solved! We’ve successfully truncated the long text.

Better Truncation with CSS Ellipsis
Our layout looks better, but it isn’t as practical. We’ve actually made the
emails display inaccurately, effectively giving misinformation to the user.
However, by adding the text-overflow: ellipsis; rule to our email string
we’ll get the following:
he ellipsis is the 3 dots ... Now the user can see the layout properly and
thanks to the CSS ellipsis they’re aware that there’s more to the email
addresses than is being shown.
Note: this works only when the overflow and text-overflow properties are
used together.
Other text-overflow Values

There are other values you can use instead of ellipsis:
clip (which is the default value) effectively cuts the string short, and will
cut strings mid-character too:
fade (which sounds amazing, but isn’t remotely supported by any
browsers).
" " (an empty string) appends the truncated string with whatever’s defined
and prevents it being cut off mid-character. This could be "-" for example,
or even text-overflow: " ✁";
Note: browser support for these alternative values isn’t as good as

with ellipsis . The screenshots above are from Firefox, but Chrome
defaults to clip in these cases.
CSS3 Drop Shadows
With CSS3, you can apply drop shadow to an element.
Using CSS3 Drop Shadows

The CSS3 gives you ability to add drop shadow effects to the elements like
you do in Photoshop without using any images. Prior to CSS3, sliced images
are used for creating the shadows around the elements that was quite
annoying.
The following section will describe you how to apply the shadow on text and
elements.
CSS3 box-shadow Property
The box-shadow property can be used to add shadow to the element's boxes.
You can even apply more than one shadow effects using a comma-separated
list of shadows. The basic syntax of creating a box shadow can be given with:
box-shadow: offset-x offset-y blur-radius color;
The components of the box-shadow property have the following meaning:
 offset-x — Sets the horizontal offset of the shadow.

 offset-y — Sets the vertical offset of the shadow.
 blur-radius — Sets the blur radius. The larger the value, the bigger the
blur and more the shadow's edge will be blurred. Negative values are not
allowed.
 color — Sets the color of the shadow. If the color value is omitted or
not specified, it takes the value of the color property.
See the CSS3 box-shadow property to learn more about the other possible

values.
Example
.box{
width: 200px;
height: 150px;
background: #ccc;
box-shadow: 5px 5px 10px #999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Box Shadow Effect</title>
<style>
.box{
width: 200px;
height: 150px;
background: #ccc;
box-shadow: 5px 5px 10px #999;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Note: When adding the box-shadow, if the value for the blur-radius

component is not specified, or set to zero (0), the edges of the shadow will be
sharp.
Similarly, you can add the multiple box shadow using a comma-separated list:
Example
.box{
width: 200px;
height: 150px;
background: #000;
box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Multiple Box Shadow Effects</title>
<style>
.box{
width: 200px;
height: 150px;
background: #000;
box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS3 text-shadow Property
You can use the text-shadow property to apply the shadow effects on text.
You can also apply multiple shadows to text using the same notation as box-
shadow.
Example
Try this code »
h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Text Shadow Effect</title>
<style>
h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
CSS3 2D Transforms
The CSS3 2D transform feature allows elements to be transformed in 2D space.
2D Transformation of Elements
With CSS3 2D transform feature you can perform basic transform
manipulations such as move, rotate, scale and skew on elements in a two-
dimensional space.
2D Transform Functions
The following table provides a brief overview of all the 2D transformation
functions.
Function Description
translate(tx,ty) Moves the element by the given amount along the X and Y-axis.
translateX(tx) Moves the the element by the given amount along the X-axis.
translateY(ty) Moves the the element by the given amount along the Y-axis.
rotate(a) Rotates the element by the specified angle around the origin of the element, as
defined by the transform-origin property.
scale(sx,sy) Scale the width and height of the element up or down by the given amount. The
function scale(1,1) has no effect.
scaleX(sx) Scale the width of the element up or down by the given amount.
scaleY(sy) Scale the height of the element up or down by the given amount.
skew(ax,ay) Skews the element by the given angle along the X and Y-axis.
skewX(ax) Skews the element by the given angle along the X-axis.
skewY(ay) Skews the element by the given angle along the Y-axis.
matrix(n,n,n,n,n,n Specifies a 2D transformation in the form of a transformation matrix comprised

) of the six values.
Using CSS Transform and Transform
Functions
The CSS3 transform property uses the transform functions to manipulate the
coordinate system used by an element in order to apply the transformation
effect.
The following section describes these transform functions:
The translate() Function
Moves the element from its current position to a new position along the X and
Y axes. This can be written as translate(tx, ty). If ty isn't specified, its value is
assumed to be zero.
Example
img {
-webkit-transform: translate(200px, 50px); /* Chrome,
Safari, Opera */
-moz-transform: translate(200px, 50px); /* Firefox */
-ms-transform: translate(200px, 50px); /* IE 9 */
transform: translate(200px, 50px); /* Standard syntax
*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 translate() Method</title>
<style>
img {
-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera *
/
-moz-transform: translate(200px, 50px); /* Firefox */
-ms-transform: translate(200px, 50px); /* IE 9 */
transform: translate(200px, 50px); /* Standard syntax */
}
.box{
margin: 50px;
width:153px;
height:103px;
background: url("/examples/images/tortoise-transparent.png") no-
repeat;
}
</style>
</head>
<body>
<div class="box">
<img src="/examples/images/tortoise.png" alt="Tortoise">
</div>
</body>
</html>
The function translate(200px, 50px) moves the image 200 pixels horizontally

along the positive x-axis, and 50 pixels vertically along the positive y-axis.
The rotate() Function
The rotate() function rotates the element around its origin (as specified by
the transform-origin property) by the specified angle. This can be written
as rotate(a).
Example
img {
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera
*/
-moz-transform: rotate(30deg); /* Firefox */
-ms-transform: rotate(30deg); /* IE 9 */
transform: rotate(30deg); /* Standard syntax */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 rotate() Method</title>
<style>
img {
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(30deg); /* Firefox */
-ms-transform: rotate(30deg); /* IE 9 */
transform: rotate(30deg); /* Modern Browsers */
}
.box{
margin: 50px;
width:120px;
height:110px;
background: url("/examples/images/star-fish-transparent.png") no-
repeat;
}
</style>
</head>
<body>
<div class="box">
<img src="/examples/images/star-fish.png" alt="Star Fish">
</div>
</body>
</html>
The function rotate(30deg) rotates the image in clockwise direction about its

origin by the angle 30 degrees. You can use negative values to rotate the
element counter-clockwise.
The scale() Function
The scale() function increases or decreases the size of the element. It can be
written as scale(sx, sy). If sy isn't specified, it is assumed to be equal to sx.
Example
img {
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
-moz-transform: scale(1.5); /* Firefox */
-ms-transform: scale(1.5); /* IE 9 */
transform: scale(1.5); /* Modern Browsers */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 scale() Method</title>
<style>
img {
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
-moz-transform: scale(1.5); /* Firefox */
-ms-transform: scale(1.5); /* IE 9 */
transform: scale(1.5); /* Modern Browsers */
opacity: 0.5;
}
.box{
margin: 50px;
width:103px;
height:130px;
background: url("/examples/images/octopus.png") no-repeat;
}
</style>
</head>
<body>
<div class="box">
<img src="/examples/images/octopus.png" alt="Octopus">
</div>
</body>
</html>
The function scale(1.5) proportionally scale the width and height of the

image 1.5 times to its original size. The function scale(1) or scale(1, 1) has no
effect on the element.
The skew() Function
The skew() function skews the element along the X and Y axes by the specified
angles. It can be written as skew(ax, ay). If ay isn't specified, its value is assumed
to be zero.
Example
img {
-webkit-transform: skew(-40deg, 15deg); /* Chrome, Safari,
Opera */
-moz-transform: skew(-40deg, 15deg); /* Firefox */
-ms-transform: skew(-40deg, 15deg); /* IE 9 */
transform: skew(-40deg, 15deg); /* Modern Browsers */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 skew() Method</title>
<style>
img {
-webkit-transform: skew(-40deg, 15deg); /* Chrome, Safari, Opera */
-moz-transform: skew(-40deg, 15deg); /* Firefox */
-ms-transform: skew(-40deg, 15deg); /* IE 9 */
transform: skew(-40deg, 15deg); /* Modern Browsers */
}
.box{
margin: 50px;
width:153px;
height:103px;
background: url("/examples/images/snail-transparent.png") no-repeat;
}
</style>
</head>
<body>
<div class="box">
<img src="/examples/images/snail.png" alt="Snail">
</div>
</body>
</html>
The function skew(-40deg, 15deg) skews the element -40 degree horizontally

along the
x-axis, and 15 degree vertically along the y-axis.
when performing more than one transformation at once, it is more convenient

to use the individual transformation function and list them in order, like this:
Example
img {
-webkit-transform: translate(200px, 50px) rotate(180deg)
scale(1.5) skew(0, 30deg); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px) rotate(180deg)
scale(1.5) skew(0, 30deg); /* Firefox */
-ms-transform: translate(200px, 50px) rotate(180deg)
scale(1.5) skew(0, 30deg); /* IE 9 */
transform: translate(200px, 50px) rotate(180deg)
scale(1.5) skew(0, 30deg); /* Standard syntax */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Multiple 2D Transformation</title>
<style>
img {
-webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) sk
ew(0, 30deg); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) sk
ew(0, 30deg); /* Firefox */
-ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) sk
ew(0, 30deg); /* IE 9 */
transform: translate(200px, 50px) rotate(180deg) scale(1.5) sk
ew(0, 30deg); /* Modern Browsers */
}
.box{
margin: 50px;
width: 108px;
height: 136px;
background: url("/examples/images/mushroom-transparent.png") no-
repeat;
}
</style>
</head>
<body>
<div class="box">
<img src="/examples/images/mushroom.png" alt="Mushroom">
</div>
</body>
</html>
CSS3 3D Transforms
The CSS3 3D transform feature allows elements to be transformed in 3D space.
3D Transformation of Elements
With CSS3 3D transform feature you can perform basic transform
manipulations such as move, rotate, scale and skew on elements in a three-
dimensional space.
A transformed element doesn't affect the surrounding elements, but can

overlap them, just like the absolutely positioned elements. However, the
transformed element still takes space in the layout at its default (un-
transformed) location.
Using CSS Transform and Transform
Functions
The CSS3 transform property uses the transform functions to manipulate the
coordinate system used by an element in order to apply the transformation
effect.
The following section describes the 3D transform functions:
The translate3d() Function
Moves the element from its current position to a new position along the X, Y
and Z-axis. This can be written as translate(tx, ty, tz). Percentage values are
not allowed for third translation-value parameter (i.e. tz).
Example
.container {
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
}
.transformed {
-webkit-transform: translate3d(25px, 25px, 50px); /*
Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px); /* Standard
syntax */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 translate3d() Method</title>
<style>
.container{
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
margin: 30px;
}
.transformed {
-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera
*/
transform: translate3d(25px, 25px, 50px); /* Standard syntax */
}
</style>
</head>
<body>
<h2>Before Translation:</h2>
<div class="container">
<img src="/examples/images/diamond.jpg" alt="Diamond Card">
</div>
<h2>After Translation:</h2>
<img src="/examples/images/diamond.jpg" class="transformed" alt="Diamo
nd Card">
</div>
</body>
</html>
The function translate3d(25px, 25px, 50px) moves the image 25 pixels along the

positive X and Y-axis, and the 50 pixels along the positive Z-axis.
The 3D transform however uses the three-dimensional coordinate system, but

movement along the Z-direction is not always noticeable because the
elements exist on a two-dimensional plane (a flat surface) and have no depth.
The perspective and perspective-origin CSS properties can be used to add a

feeling of depth to a scene by making the elements higher on the Z-axis i.e.
closer to the viewer appear larger, and those further away to the viewer
appear smaller.
Note: If you apply 3D transformation to an element without setting the
perspective the resulting effect will not appear as three-dimensional.
The rotate3d() Function
The rotate3d() function rotates the element in 3D space by the specified angle
around the [x,y,z] direction vector. This can be written as rotate(vx, vy, vz,
angle).
Example
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome,
Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 rotate3d() Method</title>
<style>
.container{
margin: 50px;
width: 125px;
height: 125px;
perspective: 300px;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */
}
</style>
</head>
<body>
<h2>Before Rotation:</h2>
<img src="/examples/images/club.jpg" alt="Club Card">
</div>
<h2>After Rotation:</h2>
<img src="/examples/images/club.jpg" class="transformed" alt="Club Car
d">
</div>
</body>
</html>
The function rotate3d(0, 1, 0, 60deg) rotates the image along the Y-axis by the

angle 60 degrees. You can use negative values to rotate the element in
opposite direction.
The scale3d() Function
The scale3d() function changes the size of an element. It can be written
as scale(sx, sy, sz). The effect of this function is not evident unless you use it
in combination with other transform functions such as rotate and the
perspective, as shown in the example below.
Example
.container{
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #6486ab;
background: #e9eef3;
}
.transformed {
-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0,
60deg); /* Chrome, Safari, Opera */
transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /*
Standard syntax */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 scale3d() Method</title>
<style>
.container{
margin: 50px;
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #6486ab;
background: #e9eef3;
}
.transformed {
-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, S
afari, Opera */
transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Standard syntax *
/
}
</style>
</head>
<body>
<h2>Before Scaling:</h2>
<img src="/examples/images/spade.jpg" alt="Club Card">
</div>
<h2>After Scaling:</h2>
<img src="/examples/images/spade.jpg" class="transformed" alt="Club Ca
rd">
</div>
</body>
</html>
The function scale3d(1, 1, 2) scales the elements along the Z-axis and the
function rotate3d(1, 0, 0, 60deg) rotates the image along the X-axis by the
angle 60 degrees.
when performing more than one transformation at once, it is more convenient
to use the individual transformation function and list them in order, like this:
Example
.container{
width: 125px;
height: 125px;
perspective: 300px;
}
.transformed {
-webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1,
0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */
transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0,
-60deg) scale3d(1, 1, 2); /* Standard syntax */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Multiple 3D Transformation</title>
<style>
.container{
margin: 50px;
width: 125px;
height: 125px;
perspective: 300px;
border: 4px solid #d14e46;
background: #fddddb;
}
.transformed {
-webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale
3d(1, 1, 2); /* Chrome, Safari, Opera */
transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1,
1, 2); /* Standard syntax */
}
</style>
</head>
<body>
<h2>Before Transform:</h2>
<img src="/examples/images/heart.jpg" alt="Heart Card">
</div>
<h2>After Transform:</h2>
<img src="/examples/images/heart.jpg" class="transformed" alt="Heart C
ard">
</div>
</body>
</html>
3D Transform Functions
The following table provides a brief overview of all the 3D transformation
functions.
translate3d(tx,ty,tz) Moves the element by the given amount

along the X, Y & Z-axis.
translateX(tx) Moves the element by the given amount

along the X-axis.
translateY(ty) Moves the element by the given amount

along the Y-axis.
translateZ(tz) Moves the element by the given amount

along the Z-axis.
rotate3d(x,y,z, a) Rotates the element in 3D space by the

angle specified in the last parameter,
around the [x,y,z] direction vector.
rotateX(a) Rotates the element by the given angle

around the X-axis.
rotateY(a) Rotates the element by the given angle

around the Y-axis.
rotateZ(a) Rotates the element by the given angle

around the Z-axis.
scale3d(sx,sy,sz) Scales the element by the given amount

along the X, Y and Z-axis. The
function scale3d(1,1,1) has no effect.
scaleX(sx) Scales the element along the X-axis.
scaleY(sy) Scales the element along the Y-axis.
scaleZ(sz) Scales the element along the Z-axis.
matrix3d(n,n,n,n,n,n, Specifies a 3D transformation in the form of

n,n,n,n,n,n,n,n,n,n) a 4×4 transformation matrix of 16 values.
perspective(length) Defines a perspective view for a 3D

transformed element. In general, as the
value of this function increases, the
element will appear further away from the
viewer.
CSS3 Transitions
The CSS3 transition feature allows the changes in CSS property values to occur
smoothly over a specified duration.
Understanding CSS3 Transitions

Normally when the value of a CSS property changes, the rendered result is
instantly updated. A common example is changing the background color of a
button on mouse hover. In a normal scenario the background color of the
button is changes immediately from the old property value to the new
property value when you place the cursor over the button.
CSS3 introduces a new transition feature that allows you to animate a property
from the old value to the new value smoothly over time. The following
example will show you how to animate the background-color of an HTML button
on mouse hover.
Example
button {
background: #fd7c2a;
/* For Safari 3.0+ */
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
transition-property: background;
transition-duration: 2s;
}
button:hover {
background: #3cc16e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Transition</title>
<style>
button {
color: #fff;
border: none;
padding: 10px 20px;
font: bold 18px sans-serif;
-webkit-transition: background 2s; /* For Safari 3.0 to 6.0 */
transition: background 2s; /* For modern browsers */
}
button:hover {
}
</style>
</head>
<body>
<button type="button">Hover on me</button>
</body>
</html>
To make the transition occur, you must specify at least two things — the name
of the CSS property to which you want to apply the transition effect using
the transition-property CSS property, and the duration of the transition effect
(greater than 0) using the transition-duration CSS property. However, all the
other transition properties are optional, as their default values don't prevent a
transition from happening.
Note: Not all CSS properties are animatable. In general, any CSS property that
accepts values that are numbers, lengths, percentages, or colors is animatable.
Performing Multiple Transitions

Each of the transition properties can take more than one value, separated by
commas, which provides an easy way to define multiple transitions at once
with different settings.
Example
button {
border: 3px solid #dc5801;
-webkit-transition-property: background, border;
-webkit-transition-duration: 1s, 2s;
transition-property: background, border;
transition-duration: 1s, 2s;
}
button:hover {
border-color: #288049;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Multiple Transitions</title>
<style>
button {
color: #fff;
padding: 10px 20px;
border: 3px solid #dc5801;
-webkit-transition-property: background, border;
-webkit-transition-duration: 1s, 2s;
transition-property: background, border;
transition-duration: 1s, 2s;
}
button:hover {
border-color: #288049;
}
</style>
</head>
<body>
</body>
</html>
Transition Shorthand Property

There are many properties to consider when applying the transitions.
However, it is also possible to specify all the transition properties in one single
property to shorten the code.
The transition property is a shorthand property for setting all the individual

transition properties (i.e., transition-property, transition-duration,
and transition-delay) at once in the listed order.
It's important to stick to this order for the values, when using this property.
Example
button {
-webkit-transition: background 2s ease-in 0s; /* For
Safari 3.0+ */
transition: background 2s 0s; /* Standard syntax */
}
button:hover {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 Transition Shorthand Property</title>
<style>
button {
color: #fff;
border: none;
padding: 10px 20px;
-webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */
transition: background 2s ease-in 0s; /* Standard syntax */
}
button:hover {
}
</style>
</head>
<body>
</body>
</html>
Note: If any value is missing or not specified, the default value for that
property will be used instead. That means, if the value for transition-
duration property is missing, no transition will occur, because its default value
is 0.
CSS3 Transition Properties

The following table provides a brief overview of all the transition properties:
Property Description
transition A shorthand property for setting all the four individual transition properties in a single
declaration.
transition-delay Specifies when the transition will start.
transition-duration Specifies the number of seconds or milliseconds a transition animation should take to
Property Description
complete.
transition-property Specifies the names of the CSS properties to which a transition effect should be
applied.

Css Module 13 (Css3)

Uploaded by

Copyright:

Available Formats

Css Module 13 (Css3)

Uploaded by

Document Information

Original Description:

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

Css Module 13 (Css3)

Uploaded by

Copyright:

Available Formats

CSS3

Using CSS3 Gradients

Gradients are available in two styles: linear and radial.

Creating CSS3 Linear Gradients

Linear Gradient - Top to Bottom

Linear Gradient - Left to Right

Linear Gradient - Diagonal

Setting Direction of Linear Gradients Using

Creating Linear Gradients Using Multiple

Setting the Location Color Stops

Note: While setting the color-stops location as a percentage, 0% represents the

The arguments of the radial-gradient() function has the following meaning:

 position — Specifies the starting point of the gradient, which can be

Setting the Shape of Radial Gradients

Setting the Size of Radial Gradients

Repeating the Radial Gradients

CSS3 Transparency and Gradients

Text Overflow (with a CSS Ellipsis)

Our Overflowing Text Demo

When Text is Too Long

Add the CSS Overflow Property

Solved! We’ve successfully truncated the long text.

Other text-overflow Values

Note: browser support for these alternative values isn’t as good as

Using CSS3 Drop Shadows

The components of the box-shadow property have the following meaning:

 offset-x — Sets the horizontal offset of the shadow.

See the CSS3 box-shadow property to learn more about the other possible

Note: When adding the box-shadow, if the value for the blur-radius

matrix(n,n,n,n,n,n Specifies a 2D transformation in the form of a transformation matrix comprised

The following section describes these transform functions:

The function translate(200px, 50px) moves the image 200 pixels horizontally

The function rotate(30deg) rotates the image in clockwise direction about its

The function scale(1.5) proportionally scale the width and height of the

The function skew(-40deg, 15deg) skews the element -40 degree horizontally

when performing more than one transformation at once, it is more convenient

A transformed element doesn't affect the surrounding elements, but can

The following section describes the 3D transform functions:

The function translate3d(25px, 25px, 50px) moves the image 25 pixels along the

The 3D transform however uses the three-dimensional coordinate system, but

The perspective and perspective-origin CSS properties can be used to add a

The function rotate3d(0, 1, 0, 60deg) rotates the image along the Y-axis by the

translate3d(tx,ty,tz) Moves the element by the given amount

translateX(tx) Moves the element by the given amount

translateY(ty) Moves the element by the given amount

translateZ(tz) Moves the element by the given amount

rotate3d(x,y,z, a) Rotates the element in 3D space by the

rotateX(a) Rotates the element by the given angle

rotateY(a) Rotates the element by the given angle

rotateZ(a) Rotates the element by the given angle

scale3d(sx,sy,sz) Scales the element by the given amount

scaleX(sx) Scales the element along the X-axis.

scaleY(sy) Scales the element along the Y-axis.

scaleZ(sz) Scales the element along the Z-axis.

matrix3d(n,n,n,n,n,n, Specifies a 3D transformation in the form of

perspective(length) Defines a perspective view for a 3D

Understanding CSS3 Transitions

Performing Multiple Transitions