Scribd
Upload
70 views

Css Module 13 (Css3)

CSS3 gradients allow creating smooth color transitions without images. There are two gradient styles: linear and radial. Linear gradients transition between two or more colors along a line defined by direction or angle, and can be created using keywords like top to bottom or degrees. Color stops determine the colors at points along the gradient line.

Uploaded by

sufiyan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
70 views

Css Module 13 (Css3)

CSS3 gradients allow creating smooth color transitions without images. There are two gradient styles: linear and radial. Linear gradients transition between two or more colors along a line defined by direction or angle, and can be created using keywords like top to bottom or degrees. Color stops determine the colors at points along the gradient line.

Uploaded by

sufiyan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 42

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;
        /* 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);
    }
</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 {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(left, red, yellow);
/* Standard syntax */
background: linear-gradient(to right, 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;
        /* 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);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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 {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(bottom left, red,
yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(bottom left, red, yellow);
/* Standard syntax */
background: linear-gradient(to top right, red, yellow);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Linear Gradients along Diagonal</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: red;
        /* For Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(bottom left, red, yellow);
        /* For Internet Explorer 10 */
        background: -ms-linear-gradient(bottom left, red, yellow);
        /* Standard syntax */
        background: linear-gradient(to top right, red, yellow);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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 {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(0deg, red, yellow);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(0deg, red, yellow);
/* Standard syntax */
background: linear-gradient(90deg, red, yellow);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Setting Linear Gradients Direction Using Angles</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: red;
        /* For Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(0deg, red, yellow);
        /* For Internet Explorer 10 */
        background: -ms-linear-gradient(0deg, red, yellow);
        /* Standard syntax */
        background: linear-gradient(90deg, red, yellow);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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 {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow, lime);
/* Standard syntax */
background: linear-gradient(red, yellow, lime);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Linear Gradients with Multiple Color Stops</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: red;
        /* For Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(red, yellow, lime);
        /* For Internet Explorer 10 */
        background: -ms-linear-gradient(red, yellow, lime);
        /* Standard syntax */
        background: linear-gradient(red, yellow, lime);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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 {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(red, yellow 30%, lime
60%);
/* For Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow 30%, lime
60%);
/* Standard syntax */
background: linear-gradient(red, yellow 30%, lime 60%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Setting the Color Stops Location</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: red;
        /* For Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
        /* For Internet Explorer 10 */
        background: -ms-linear-gradient(red, yellow 30%, lime 60%);
        /* Standard syntax */
        background: linear-gradient(red, yellow 30%, lime 60%);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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 {
/* Fallback for browsers that don't support gradients */
background: white;
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(black, white
10%, lime 20%);
/* For Internet Explorer 10 */
background: -ms-repeating-linear-gradient(black, white
10%, lime 20%);
/* Standard syntax */
background: repeating-linear-gradient(black, white 10%,
lime 20%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Repeating the Linear Gradients</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: white;
        /* For Safari 5.1 to 6.0 */
        background: -webkit-repeating-linear-gradient(black, white 10%, lime 2
0%);
        /* For Internet Explorer 10 */
        background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
        /* Standard syntax */
        background: repeating-linear-gradient(black, white 10%, lime 20%);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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 {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(red, yellow, lime);
/* Standard syntax */
background: radial-gradient(red, yellow, lime);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Radial Gradients</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: red;
        /* For Safari 5.1 to 6.0 */
        background: -webkit-radial-gradient(red, yellow, lime);
        /* For Internet Explorer 10 */
        background: -ms-radial-gradient(red, yellow, lime);
        /* Standard syntax */
        background: radial-gradient(red, yellow, lime);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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 {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(circle, red, yellow,
lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(circle, red, yellow,
lime);
/* Standard syntax */
background: radial-gradient(circle, red, yellow, lime);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Setting the Shape Radial Gradients</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: red;
        /* For Safari 5.1 to 6.0 */
        background: -webkit-radial-gradient(circle, red, yellow, lime);
        /* For Internet Explorer 10 */
        background: -ms-radial-gradient(circle, red, yellow, lime);
        /* Standard syntax */
        background: radial-gradient(circle, red, yellow, lime);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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 {
/* Fallback for browsers that don't support gradients */
background: red;
/* For Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(left bottom, circle
farthest-side, red, yellow, lime);
/* For Internet Explorer 10 */
background: -ms-radial-gradient(left bottom, circle
farthest-side, red, yellow, lime);
/* Standard syntax */
background: radial-gradient(circle farthest-side at left
bottom, red, yellow, lime);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Setting the Size Radial Gradients</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: red;
        /* For Safari 5.1 to 6.0 */
        background: -webkit-radial-gradient(left bottom, circle farthest-side, 
red, yellow, lime);
        /* For Internet Explorer 10 */
        background: -ms-radial-gradient(left bottom, circle farthest-side, re
d, yellow, lime);
        /* Standard syntax */
        background: radial-gradient(circle farthest-side at left bottom, red, 
yellow, lime);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 

Repeating the Radial Gradients


You can also repeat radial gradients using the repeating-radial-
gradient() function.

Example
.gradient {
/* Fallback for browsers that don't support gradients */
background: white;
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(black, white
10%, lime 20%);
/* For Internet Explorer 10 */
background: -ms-repeating-radial-gradient(black, white
10%, lime 20%);
/* Standard syntax */
background: repeating-radial-gradient(black, white 10%,
lime 20%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Repeating the Size Radial Gradients</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: white;
        /* For Safari 5.1 to 6.0 */
        background: -webkit-repeating-radial-gradient(black, white 10%, lime 2
0%);
        /* For Internet Explorer 10 */
        background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
        /* Standard syntax */
        background: repeating-radial-gradient(black, white 10%, lime 20%);
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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 {
/* Fallback for browsers that don't support gradients */
background: url("images/sky.jpg");
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,
rgba(255,255,255,0), rgba(255,255,255,1)),
url("images/sky.jpg");
/* For Internet Explorer 10 */
background: -ms-linear-gradient(left, rgba(255,255,255,0),
rgba(255,255,255,1)), url("images/sky.jpg");
/* Standard syntax */
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>
<meta charset="utf-8">
<title>Example of Using Transparency with Gradients</title>
<style>      
    .gradient {
        width: 400px;
        height: 300px;
        /* Fallback for browsers that don't support gradients */
        background: url("/examples/images/sky.jpg");
        /* For Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgb
a(255,255,255,1)), url("/examples/images/sky.jpg");
        /* For Internet Explorer 10 */
        background: -ms-linear-gradient(left, rgba(255,255,255,0), rgb
a(255,255,255,1)), url("/examples/images/sky.jpg");
        /* Standard syntax */
        background: linear-gradient(to right, rgba(255,255,255,0), rgb
a(255,255,255,1)), url("/examples/images/sky.jpg");
    }
</style>
</head>
<body>
    <div class="gradient"></div>
</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>
<meta charset="utf-8">
<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>
<meta charset="utf-8">
<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>
<meta charset="utf-8">
<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>
<meta charset="utf-8">
<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>
<meta charset="utf-8">
<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>
<meta charset="utf-8">
<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>
<meta charset="utf-8">
<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>
<meta charset="utf-8">
<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>
<meta charset="utf-8">
<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>
    <div class="container">
        <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>
<meta charset="utf-8">
<title>Example of CSS3 rotate3d() Method</title>
<style>
.container{
    margin: 50px;
    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 */
}
</style>
</head>
<body>
    <h2>Before Rotation:</h2>
    <div class="container">
        <img src="/examples/images/club.jpg" alt="Club Card">
    </div>
    <h2>After Rotation:</h2>
    <div class="container">
        <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>
<meta charset="utf-8">
<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>
    <div class="container">
        <img src="/examples/images/spade.jpg" alt="Club Card">
    </div>
    <h2>After Scaling:</h2>
    <div class="container">
        <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;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.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>
<meta charset="utf-8">
<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>
    <div class="container">
        <img src="/examples/images/heart.jpg" alt="Heart Card">
    </div>
    <h2>After Transform:</h2>
    <div class="container">
        <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.

Function Description

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

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;
/* Standard syntax */
transition-property: background;
transition-duration: 2s;
}
button:hover {
background: #3cc16e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS3 Transition</title>
<style>
    button {
        color: #fff;
        border: none;
        padding: 10px 20px;
        font: bold 18px sans-serif;
        background: #fd7c2a;
        -webkit-transition: background 2s; /* For Safari 3.0 to 6.0 */
        transition: background 2s; /* For modern browsers */
    }
    button:hover {
        background: #3cc16e;
    }
</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 {
background: #fd7c2a;
border: 3px solid #dc5801;
/* For Safari 3.0+ */
-webkit-transition-property: background, border;
-webkit-transition-duration: 1s, 2s;
/* Standard syntax */
transition-property: background, border;
transition-duration: 1s, 2s;
}
button:hover {
background: #3cc16e;
border-color: #288049;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS3 Multiple Transitions</title>
<style>
    button {
        color: #fff;
        padding: 10px 20px;
        font: bold 18px sans-serif;
        background: #fd7c2a;
        border: 3px solid #dc5801;
        /* For Safari 3.0+ */
        -webkit-transition-property: background, border;
        -webkit-transition-duration: 1s, 2s;
        /* Standard syntax */
        transition-property: background, border;
        transition-duration: 1s, 2s;
    }
    button:hover {
        background: #3cc16e;
        border-color: #288049;
    }
</style>
</head>
<body>
    <button type="button">Hover on me</button>
</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 {
background: #fd7c2a;
-webkit-transition: background 2s ease-in 0s; /* For
Safari 3.0+ */
transition: background 2s 0s; /* Standard syntax */
}
button:hover {
background: #3cc16e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS3 Transition Shorthand Property</title>
<style>
    button {
        color: #fff;
        border: none;
        padding: 10px 20px;
        font: bold 18px sans-serif;
        background: #fd7c2a;
        -webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */
        transition: background 2s ease-in 0s; /* Standard syntax */
    }
    button:hover {
        background: #3cc16e;
    }
</style>
</head>
<body>
    <button type="button">Hover on me</button>
</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.

You might also like