Scribd
Upload
11 views

CSS3 Media Types

Uploaded by

dhruvv324
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

CSS3 Media Types

Uploaded by

dhruvv324
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

CSS3 Media Types

Value Description
All Used for all media type devices
Print Used for printers
Used for computer screens, tablets, smart-phones
Screen
etc.

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: pink;

@media screen and (min-width: 480px) {

body {

background-color: lightgreen;

</style>

</head>

<body>

<h1>Resize the browser window to see the effect!</h1>

<p>The media query will only apply if the media type is screen and the viewport is 480px wide or
wider.</p>

</body>

</html>
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-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning to
yellow:

#grad {
background-image: linear-gradient(red, yellow);
}

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background-color: red; /* For browsers that do not support gradients */

background-image: linear-gradient(red, yellow); /* Standard syntax (must be last) */

}
</style>

</head>

<body>

<h1>Linear Gradient - Top to Bottom</h1>

<p>This linear gradient starts at the top. It starts red, transitioning to yellow:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

#grad {
background-image: linear-gradient(to right, red , yellow);
}

#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}

#grad {
background-image: linear-gradient(-90deg, red, yellow);
}

#grad {
background-image: linear-gradient(red, yellow, green);
}
Using Transparency
CSS gradients also support transparency, which can be used to create
fading effects.

To add transparency, we use the rgba() function to define the color


stops. The last parameter in the rgba() function can be a value from 0 to
1, and it defines the transparency of the color: 0 indicates full
transparency, 1 indicates full color (no transparency).
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 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, shape is ellipse, size is farthest-corner, and position is center.

#grad {
background-image: radial-gradient(red, yellow, green);
}

#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Rounded Corners
The border-radius property can be used to add a corner to each corner of a box.

#marilyn {
background: #fff;
width: 100px;
height: 100px;
border-radius: 20px;
}

Shadows
You can give parts of your page “pop” by applying shadows both to boxes and to text.

Box Shadows
box-shadow is the standard CSS property to get you going and it can have a value comprising
several parts:

box-shadow: 5px 5px 3px 1px #999

 The first value is the horizontal offset — how far the shadow is nudged to the right (or
left if it’s negative)
 The second value is the vertical offset — how far the shadow is nudged downwards (or
upwards if it’s negative)
 The third value is the blur radius — the higher the value the less sharp the shadow. (“0”
being absolutely sharp). This is optional — omitting it is equivalent of setting “0”.
 The fourth value is the spread distance — the higher the value, the larger the shadow
(“0” being the inherited size of the box). This is also optional — omitting it is equivalent
of setting “0”.
 The fifth value is a color. That’s optional, too.

Inner shadows

You can also apply shadows to the inside of a box by adding “inset” to the list:

box-shadow: inset 0 0 7px 5px #ddd;


Text Shadows

text-shadow: -2px 2px 2px #999;

CSS Transition

The CSS transitions are effects that are added to change the element gradually from one style to
another, without using flash or JavaScript.

You should specify two things to create CSS transition.

The CSS property on which you want to add an effect.

The time duration of the effect.

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div{
 width: 100px;
 height: 100px;
 background: orange;
 -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
 transition: width 1s;
 }
 div:hover {
 width: 300px;
 }
 </style>
 </head>
 <body>
 <div></div>
 <p>Move the cursor over the div element above, to see the transition effect.</p>
 </body>
 </html>

CSS Multiple Transition Effect


It is used to add transition effect for more than one CSS property. If you want to add transition
effect on more than one property, separate those properties with a comma.

Let's take an example. Here, the transition effects on width, height and transformation.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div {
6. padding:15px;
7. width: 150px;
8. height: 100px;
9. background: violet;
10. -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */

11. transition: width 2s, height 2s, transform 2s;


12. }
13. div:hover {
14. width: 300px;
15. height: 200px;
16. -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
17. transform: rotate(360deg);
18. }
19. </style>
20. </head>
21. <body>
22. <div><p> (Move your cursor on me to see the effect)</p></div>
23. </body>
24. </html>
CSS Animation

CSS Animation property is used to create animation on the webpage. It can be used as a
replacement of animation created by Flash and JavaScript.

CSS3 @keyframes Rule


The animation is created in the @keyframe rule. It is used to control the intermediate steps in a
CSS animation sequence.

What animation does


An animation makes an element change gradually from one style to another. You can add as
many as properties you want to add. You can also specify the changes in percentage.0% specify
the start of the animation and 100% specify its completion.

How CSS animation works


When the animation is created in the @keyframe rule, it must be bound with selector; otherwise
the animation will have no effect.

The animation could be bound to the selector by specifying at least these two properties:

 The name of the animation


 The duration of the animation

CSS animation example: changing background color


1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div {
6. width: 100px;
7. height: 100px;
8. background: red;
9. -webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */
10. animation: myfirst 5s;
11. }
12. /* Chrome, Safari, Opera */
13. @-webkit-keyframes myfirst {
14. from {background: red;}
15. to {background: green;}
16. }
17. /* Standard syntax */
18. @keyframes myfirst {
19. from {background: red;}
20. to {background: green;}
21. }
22. </style>
23. </head>
24. <body>
25. <p><b>Note:</b> The IE 9 and earlier versions don't support CSS3 animation property.
</p>
26. <div></div>
27. </body>
28. </html>

CSS animation example: Moving Rectangle


Let's take another example to display animation with percentage value.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div {
6. width: 100px;
7. height: 100px;
8. background: red;
9. position: relative;
10. -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
11. animation: myfirst 5s;
12. }
13. /* Chrome, Safari, Opera */
14. @-webkit-keyframes myfirst {
15. 0% {background:red; left:0px; top:0px;}
16. 25% {background:yellow; left:300px; top:0px;}
17. 50% {background:blue; left:200px; top:300px;}
18. 75% {background:green; left:0px; top:200px;}
19. 100% {background:red; left:0px; top:0px;}
20. }
21. /* Standard syntax */
22. @keyframes myfirst {
23. 0% {background:red; left:0px; top:0px;}
24. 25% {background:yellow; left:300px; top:0px;}
25. 50% {background:blue; left:300px; top:200px;}
26. 75% {background:green; left:0px; top:200px;}
27. 100% {background:red; left:0px; top:0px;}
28. }
29. </style>
30. </head>
31. <body>
32. <p><b>Note:</b> The Internet Explorer 9 and its earlier versions don't support this exam
ple.</p>
33. <div></div>
34. </body>
35. </html>

The @keyframes
Here we'll set the animation stages. Our @keyframes properties are:

 A name of our choosing (testFade in this case).


 Stages: 0%-100%; from (equal to 0%) and to (equal to 100%).
 CSS styles: the style that you would like to apply for each stage.

For example:

1
@keyframes testFade {
2 0% {

3 opacity: 1;

4 }

5 100% {

6 opacity: 0;

}
7
}
8

or:

1 @keyframes testFade {
2
from {
3 opacity: 1;

4 }

5 to {

6 opacity: 0;

}
7
}
8

or the shorthand:

1 @keyframes testFade {

2 to {

3 opacity: 0;

4 }

}
5

The code above will apply a transition to the opacity of an


element, from opacity: 1 to opacity: 0 . Each of the approaches above will
achieve the same end result.

The Animation
The animation property is used to call @keyframes inside a CSS selector.
Animation can have multiple properties:

 animation-name : name (remember we chose testFade).


@keyframes
 animation-duration : the timeframe length, the total duration of the
animation from start to the end.
 animation-timing-function : sets the animation speed ( linear | ease |
ease-in | ease-out | ease-in-out | cubic-bezier ).
 animation-delay : the delay before our animation will start.
 animation-iteration-count : how many times it will iterate through
animation.
 animation-direction : gives you the ability to change the loop direction,
from start to end ,or from end to start, or both.
 animation-fill-mode : specifies which styles will be applied to the
element when our animation is finished ( none | forwards | backwards |
both )

For example:

1
.element {
2 animation-name: testFade;

3 animation-duration: 4s;

4 animation-delay: 1s;

5 animation-iteration-count: infinite;

6 animation-timing-function: linear;

animation-direction: alternate;
7
}
8

or shorthand:

1 .element {

2 animation: testFade 4s 1s infinite linear alternate;

3 }

The code above will create a blinking effect, with a 1 second animation delay,
a 4 second total animation duration, with alternate direction and infinite linear
loop iterations.

Multiple Animations
.element {
animation: tutsFade 4s 1s infinite linear alternate,
tutsRotate 4s 1s infinite linear alternate;
}
@keyframes tutsFade {
to {
opacity: 0;
}
}
@keyframes tutsRotate {
to {
transform: rotate(180deg);
}
}

Square to Circle
@keyframes square-to-circle {
0% {
border-radius:0 0 0 0;
background:coral;
transform:rotate(0deg);
}
25% {
border-radius:50% 0 0 0;
background:darksalmon;
transform:rotate(45deg);
}
50% {
border-radius:50% 50% 0 0;
background:indianred;
transform:rotate(90deg);
}
75% {
border-radius:50% 50% 50% 0;
background:lightcoral;
transform:rotate(135deg);
}
100% {
border-radius:50%;
background:darksalmon;
transform:rotate(180deg);
}
}

Apply the Animation


div {
width: 200px;
height: 200px;
background-color: coral;
animation: square-to-circle 2s 1s infinite alternate;
}
CSS Opacity
The CSS opacity property is used to specify the transparency of an element. In simple word, you
can say that it specifies the clarity of the image.

In technical terms, Opacity is defined as degree in which light is allowed to travel through an
object.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. img.trans {
6. opacity: 0.4;
7.
8. }
9. </style>
10. </head>
11. <body>
12. <p>Normal Image</p>
13. <img src="rose.jpg" alt="normal rose">
14. <p>Transparent Image</p>
15. <img class="trans" src="rose.jpg" alt="transparent rose">
16. </body>
17. </html>

CSS Overflow

The CSS overflow property specifies how to handle the content when it overflows its block
level container.

CSS Overflow property values


Value Description

It specifies that overflow


is not clipped. it renders
Visible outside the element's
box. this is a default
value.

Hidden It specifies that the


overflow is clipped, and
rest of the content will
be invisible.

It specifies that the


overflow is clipped, and
Scroll
a scroll bar is used to see
the rest of the content.

It specifies that if
overflow is clipped, a
Auto scroll bar is needed to
see the rest of the
content.

<!DOCTYPE html>

<html>

<head>

<style>

div.scroll {

background-color: #00ffff;

width: 100px;

height: 100px;

overflow: scroll;

div.hidden {

background-color: #00FF00;
width: 100px;

height: 170px;

overflow: hidden;

</style>

</head>

<body>

<p>The overflow property specifies what to do if th


e content of an element exceeds the size of the elem
ent's box.</p>

<p>overflow:scroll</p>

<div class="scroll">You can use the overflow prope


rty when you want to have better control of the layo
ut.

The default value is visible.</div>

<p>overflow:hidden</p>

<div class="hidden">You can use the overflow prop


erty when you want to have better control of the lay
out.

The default value is visible.</div>

</body>

</html>
CSS Table

We can apply style on HTML tables for better look


and feel. There are some CSS properties that are
widely used in designing table using CSS:

border

border-collapse

padding

width

height

text-align

color

background-color

CSS Table Border

We can set border for the table, th and td tags using


the CSS border property.

<style>

table, th, td {

border: 1px solid black;

}
</style>

CSS Table Border Collapse

By the help of border-collapse property, we can


collapse all borders in one border only.

<style>

table, th, td {

border: 2px solid black;

border-collapse: collapse;

</style>

CSS Table Padding

We can specify padding for table header and table


data using the CSS padding property.

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {
padding: 10px;

</style>

CSS Table: Styling even and odd cells

We can style even and odd table cells for better look
and feel. In this code, we are displaying different
background colors on even and odd cells. Moreover,
we have changed the background-color and color of
<th> tag.

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 10px;

tr:nth-child(even) {

background-color: #eee;

}
tr:nth-child(odd) {

background-color: #fff;

th {

color: white;

background-color: gray;

</style>

CSS - z-index
The z-index sets the stacking level of an element.
<html>
<head>
</head>

<body>
<div style = "background-
color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>

<div style = "background-


color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>

<div style = "background-


color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>
</html>

You might also like