Scribd
Upload
61 views66 pages

CSS3 and Its Properties

CSS

Uploaded by

Kusuma N
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
61 views66 pages

CSS3 and Its Properties

CSS

Uploaded by

Kusuma N
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/ 66

CSS3 and its properties

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
 CSS saves a lot of work.
 It can control the layout of multiple web pages all at once.
 External style sheets are stored in CSS files.

Properties of CSS3

CSS Rounded Corners

 CSS border-radius property, gives any element "rounded


corners".
 The CSS border-radius property defines the radius of an
element's corners.
1. Rounded corners for an element with a specified
background color:

2. Rounded corners for an element with a border:

3. Rounded corners for an element with a background image:


EX:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background
color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>

CSS border-radius - Specify Each Corner

 The border-radius property can have from one to four values.

Four values - border-radius: 15px 50px 30px 5px;


 First value applies to top-left corner
 Second value applies to top-right corner.
 Third value applies to bottom-right corner.
 Fourth value applies to bottom-left corner.
Three values - border-radius: 15px 50px 30px

 First value applies to top-left corner.


 Second value applies to top-right and bottom-left corners.
 Third value applies to bottom-right corner.

Two values - border-radius: 15px 50px;


 First value applies to top-left and bottom-right corners.
 Second value applies to top-right and bottom-left corners.

One value - border-radius: 15px;

 The value applies to all four corners, which are rounded equally

EX:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Four values - border-radius: 15px 50px 30px
5px:</p>
<p id="rcorners1"></p>
<p>Three values - border-radius: 15px 50px
30px:</p>
<p id="rcorners2"></p>
<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>
<p>One value - border-radius: 15px:</p>
<p id="rcorners4"></p>
</body>
</html>

CSS Border Images


 The CSS border-image property allows you to specify an image
to be used instead of the normal border around an element.

The property has three parts:

1. The image to use as the border


2. Where to slice the image
3. Define whether the middle sections should be repeated or
stretched

 The border-image property takes the image and slices it into


nine sections, like a tic-tac-toe board.
 It then places the corners at the corners, and the middle sections
are repeated or stretched as you specify.

<!DOCTYPE html>

<html>

<head>

<style>

#borderimg {

border: 10px solid transparent;

padding: 15px;

border-image: url(border.png) 30 round;

</style>

</head>

<body>
<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are repeated to create


the border:</p>

<p id="borderimg">border-image: url(border.png) 30 round;</p>

<p>Here is the original image:</p><img src="border.png">

<p><strong>Note:</strong> Internet Explorer 10, and earlier


versions, do not support the border-image property.</p>

</body>

</html>

 Different slice values completely changes the look of the border:


CSS Multiple Backgrounds

 CSS allows you to add multiple background images for an


element, through the background-image property.
 The different background images are separated by commas, and
the images are stacked on top of each other, where the first
image is closest to the viewer.
 The contain keyword scales the background image to be as large
as possible (but both its width and its height must fit inside the
content area).
 The cover keyword scales the background image so that the
content area is completely covered by the background image
(both its width and height are equal to or exceed the content
area).
 The background-size property also accepts multiple values for
background size (using a comma-separated list).

CSS background-origin Property

The CSS background-origin property specifies where the background image is


positioned.
The property takes three different values:

 border-box - the background image starts from the upper left corner of
the border
 padding-box - (default) the background image starts from the upper left
corner of the padding edge
 content-box - the background image starts from the upper left corner of
the content

CSS background-clip Property

The CSS background-clip property specifies the painting area of the


background.

The property takes three different values:

 border-box - (default) the background is painted to the outside edge of


the border
 padding-box - the background is painted to the outside edge of the
padding
 content-box - the background is painted within the content box

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

background-image: url(logo.png), url(playground.jpg);


background-position: right bottom, left top;

background-repeat: no-repeat,repeat ;

//background-size: 100px 80px;

//background-size: 100px,80px,auto;

//background-size:contain;

// background-size:cover;

background-origin: border-box;

background-origin: Content-box;

padding: 15px;

border: 10px dotted black;

background: yellow;

background-clip: padding-box;

background-clip: Content-box;

</style>

</head>

<body>
<h1>Multiple Backgrounds</h1>

<p>The following div element has two background images:</p>

<div id="example1">

<h1>Welcome to National College Jayanagar</h1>

<p>The National Degree College, Jayanagar, Bangalore, an autonomous


college, is one of the fifteen institutions, being managed by the National
Education Society of Karnataka. The Society was established in 1917
with nationalist ideals as the driving force. The College was started in
1965 with a humble strength of 110 in the Pre- University Course and
now it has grown into a leading institution of higher learning in General
Education. The College has several achievements to its credit in the
academic field as well as extracurricular activities.

</p>

<p>The College offers courses in B.A, B.Sc. B.Com and B.C.A. It has
well equipped laboratories, a good computerized library and a vast sports
field. Opportunities are provided to students to express their talents in
Fine Arts and Popular Science.</p>

</div>

</body>

</html>
Full Size Background Image

Now we want to have a background image on a website that covers


the entire browser window at all times.

The requirements are as follows:

 Fill the entire page with the image (no white space)
 Scale image as needed
 Center image on page
 Do not cause scrollbars

<!DOCTYPE html>

<html>

<head>

<style>

html {

background: url(playground.jpg) no-repeat center fixed;

background-size: cover;

body {
color: white;

</style>

</head>

<body>

<h1>Full Page Background Image</h1>

<p>Welcome to National College Jayanagar</p>

</body>

</html>

Hero Image
You could also use different background properties on a <div> to create a hero
image (a large image with text), and place it where you want.

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width,


initial-scale=1">

<style>

body {
margin: 0;

font-family: Arial, Helvetica, sans-serif;

.hero-image {

background: url(download.jpg) no-repeat center;

background-size: cover;

height: 500px;

position: relative;

.hero-text {

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: white;

}
</style>

</head>

<body>

<div class="hero-image">

<div class="hero-text">

<h1 style="font-size:50px">I am John Doe</h1>

<h3>And I'm a Photographer</h3>

<button>Hire me</button>

</div>

</div>

<p>Page content..</p>

</body>

</html>

CSS Colors
 CSS supports 140+ color names, HEX values, RGB values, RGBA
values, HSL values, HSLA values, and opacity.
RGBA Colors

 RGBA color values are an extension of RGB color values with


an alpha channel - which specifies the opacity for a color.
 An RGBA color value is specified with: rgba(red, green, blue,
alpha). The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (fully opaque).

Opacity

 The CSS opacity property sets the opacity for the whole element
(both background color and text will be opaque/transparent).
 The opacity property value must be a number between 0.0 (fully
transparent) and 1.0 (fully opaque).

<!DOCTYPE html>

<html>

<head>

<style>

#p1 {background-color:rgb(255,0,0);

opacity=0.6%;}

#p2 {background-color:rgba(0,255,0,0.3);}

#p3 {background-color:rgba(0,0,255,0.3);}

#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}

#p6 {background-color:rgba(255,0,255,0.3);}

</style>

</head>

<body>

<h1>Define Colors With RGBA Values</h1>

<p id="p1">Red</p>

<p id="p2">Green</p>

<p id="p3">Blue</p>

<p id="p4">Grey</p>

<p id="p5">Yellow</p>

<p id="p6">Cerise</p>

</body>

</html>

HSL Colors

 HSL stands for Hue, Saturation and Lightness.

An HSL color value is specified with: hsl(hue, saturation, lightness).


1. Hue is a degree on the color wheel (from 0 to 360):
o 0 (or 360) is red
o 120 is green
o 240 is blue
2. Saturation is a percentage value: 100% is the full color.
3. Lightness is also a percentage; 0% is dark (black) and 100% is
white.

HSLA Colors

 HSLA color values are an extension of HSL color values with


an alpha channel - which specifies the opacity for a color.
 An HSLA color value is specified with: hsla(hue, saturation,
lightness, alpha), where the alpha parameter defines the opacity.
 The alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (fully opaque).

<!DOCTYPE html>

<html>

<head>

<style>

#p1 {background-color:hsl(120,100%,50%);}

#p2 {background-color:hsl(120,100%,75%);}

#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}

#p5 {background-color:hsl(290,100%,50%);}

#p6 {background-color:hsl(290,60%,70%);}

#p7 {background-color:hsla(290,60%,70%,0.3);}

</style>

</head>

<body>

<h1>Define Colors With HSL Values</h1>

<p id="p1">Green</p>

<p id="p2">Light green</p>

<p id="p3">Dark green</p>

<p id="p4">Pastel green</p>

<p id="p5">Violet</p>

<p id="p6">Pastel violet</p>

<p id="p7">Pastel Violet</p>

</body>

</html>
CSS Gradients

 CSS gradients let you display smooth transitions between two or


more specified colors.

Linear Gradients

 To create a linear gradient, at least two color stops have


to be defined.
 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, c
olor-stop2, ...);

Direction - Top to Bottom (this is default)

 Shows a linear gradient that starts at the top.

Direction - Left to Right


 Shows a linear gradient that starts from the left.

Direction - Diagonal

 You can make a gradient diagonally by specifying both


the horizontal and vertical starting positions.
 EX:
<!DOCTYPE html>

<html>

<head>
<style>
#grad1 {
height: 200px;
background-color: red;
background-image: linear-gradient(red, yellow);
background-image: linear-gradient(to right, red ,
yellow);

background-image: linear-gradient(to bottom right,


red, yellow);

}}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top,
transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>

Using Angles

 If you want more control over the direction of the


gradient, you can define an angle.
 A value of 0deg is equivalent to "to top".
 A value of 90deg is equivalent to "to right".
 A value of 180deg is equivalent to "to bottom".

Syntax

background-image:linear-gradient(angle, color-stop1, colo


r-stop2);

Ex:

<!DOCTYPE html>

<html>
<head>

<style>

#grad1 {

height: 100px;

background-color: red;

background-image: linear-gradient(0deg, red, yellow);

#grad2 {

height: 100px;

background-color: red;

background-image: linear-gradient(90deg, red, yellow);

#grad3 {

height: 100px;

background-color: red;

background-image: linear-gradient(180deg, red, yellow);


}

#grad4 {

height: 100px;

background-color: red;

background-image: linear-gradient(-90deg, red, yellow);

</style>

</head>

<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>

<div id="grad2" style="text-align:center;">90deg</div><br>

<div id="grad3" style="text-align:center;">180deg</div><br>

<div id="grad4" style="text-align:center;">-90deg</div>

</body>

</html>
Using Multiple Color Stops

 Shows a linear gradient (from top to bottom) with


multiple color stops.

Repeating a linear-gradient

 The repeating-linear-gradient() function is used to repeat


linear gradients.

Ex:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

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

background-image: linear-gradient(red, yellow, green);

background-image:repeating-linear-gradient(red, yellow
10%, green 20%);

#grad2 {

height: 200px;

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


support gradients */

background-image: linear-gradient(red, orange, yellow,


green, blue, indigo, violet);

#grad3 {

height: 200px;

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


support gradients */
background-image: linear-gradient(red 10%, green
85%, blue 90%);

</style>

</head>

<body>

<h1>Linear Gradients - Multiple Color Stops</h1>

<p><strong>Note:</strong> Color stops are spaced


evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>

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

<h2>7 Color Stops (evenly spaced):</h2>

<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>

<div id="grad3"></div>
</body>

</html>

CSS Shadow Effects


 With CSS you can add shadow to text and to elements.

CSS Text Shadow


 The CSS text-shadow property applies shadow to text.
 You can only specify the horizontal shadow (2px) and the
vertical shadow (2px):

 We can add a color to the shadow.


 We can add a blur effect to the shadow.
 To add more than one shadow to the text, you can add a comma-
separated list of shadows.
 You can also use the text-shadow property to create a plain
border around some text (without shadows).

Ex:

<!DOCTYPE html>

<html>

<head>

<style>
h1 {

text-shadow: 2px 2px;

text-shadow: 2px 2px red;

text-shadow: 2px 2px 5px red;

text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

h2 {

color: white;

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0


5px darkblue;

h3 {

color: yellow;

text-shadow: -1px 0 black, 0 1px black, 1px 0


black, 0 -1px black;

</style>
</head>

<body>

<h1>Text-shadow effect!</h1>

<h2>Text-shadow</h2>

<h3>Hello!</h3>

</body>

</html>

CSS box-shadow Property


 The CSS box-shadow property applies shadow to elements.
 You can only specify the horizontal shadow and the vertical
shadow.
 You can add a color to the shadow.
 You can add a blur effect to the shadow.

<!DOCTYPE html>

<html>

<head>

<style>

div {
width: 300px;

height: 100px;

padding: 15px;

background-color: yellow;

box-shadow: 10px 10px;

box-shadow: 10px 10px grey;

box-shadow: 10px 10px 5px grey;

</style>

</head>

<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>

</html>

 You can also use the box-shadow property to create paper-


like cards:
EX:

<!DOCTYPE html>

<html>

<head>

<style>

div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0


6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

div.header {

background-color: #4CAF50;

color: white;

padding: 10px;

font-size: 40px;

}
div.container {

padding: 10px;

</style>

</head>

<body>

<h2>Cards</h2>

<p>The box-shadow property can be used to


create paper-like cards:</p>

<div class="card">

<div class="header">

<h1>1</h1>

</div>

<div class="container">

<p>January 1, 2016</p>

</div>

</div>
</body>

</html>

EX:

<!DOCTYPE html>

<html>

<head>

<style>

div.polaroid {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0,


0, 0.19);

text-align: center;

}
div.container {

padding: 10px;

</style>

</head>

<body>

<h2>Polaroid Images / Cards</h2>

<p>The box-shadow property can be used to create paper-like


cards:</p>

<div class="polaroid">

<img src="download.jpg" alt="Norway" style="width:100%">

<div class="container">

<p>Hardanger, Norway</p>

</div>

</div>

</body>
</html>

CSS Text Effects


CSS Text Overflow

 The CSS text-overflow property specifies how overflowed


content that is not displayed should be signalled to the
user.
 It can be clipped.

 Or it can be rendered as an ellipsis (...).

 You can display the overflowed content when hovering over the
element.

<!DOCTYPE html>
<html>

<head>

<style>

p.test1 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

}
div.test {

white-space: nowrap;

width: 200px;

overflow: hidden;

border: 1px solid #000000;

div.test:hover {

overflow: visible;

</style>

</head>

<body>

<h1>The text-overflow Property</h1>

<p>The following two paragraphs contains a long text that will


not fit in the box.</p>

<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the
box</p>

<h2>text-overflow: ellipsis:</h2>

<p class="test2">This is some long text that will not fit in the
box</p>

<h3>text-overflow:clip:</h3>

<div class="test">This is some long text that will not fit in the
box</div>

</body>

</html>

CSS Word Wrapping


 The CSS word-wrap property allows long words to be able to be
broken and wrap onto the next line.
 If a word is too long to fit within an area, it expands outside:
 The word-wrap property allows you to force the text to wrap -
even if it means splitting it in the middle of a word:

<!DOCTYPE html>

<html>

<head>

<style>

p.test {

width: 11em;

border: 1px solid #000000;

word-wrap: break-word;

</style>

</head>
<body>

<h1>The word-wrap Property</h1>

<p class="test"> This paragraph contains a very long word:


thisisaveryveryveryveryveryverylongword. The long word will
break and wrap to the next line.</p>

</body>

</html>

CSS Word Breaking


 The CSS word-break property specifies line breaking rules.

<html>

<head>

<style>
p.test1 {

width: 140px;

border: 1px solid #000000;

word-break: keep-all;

p.test2 {

width: 140px;

border: 1px solid #000000;

word-break: break-all;

</style>

</head>

<body>

<h1>The word-break Property</h1>

<p class="test1">This paragraph contains some text. This


line will-break-at-hyphens.</p>
<p class="test2">This paragraph contains some text. The
lines will break at any character.</p>

</body>

</html>

CSS Writing Mode

 The CSS writing-mode property specifies whether lines of text


are laid out horizontally or vertically.

<!DOCTYPE html>

<html>

<head>

<style>

p.test1 {

writing-mode: horizontal-tb;

span.test2 {

writing-mode: vertical-rl;

}
p.test2 {

writing-mode: vertical-rl;

</style>

</head>

<body>

<h1>The writing-mode Property</h1>

<p class="test1">Some text with default writing-mode.</p>

<p>Some text with a span element with a <span


class="test2">vertical-rl</span> writing-mode.</p>

<p class="test2">Some text with writing-mode: vertical-rl.</p>

</body>

</html>

CSS 2D Transforms
 CSS transforms allow you to move, rotate, scale, and skew
elements.
The translate() Method

 The translate() method moves an element from its current


position.

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

-ms-transform: translate(50px,100px); /* IE 9 */

transform: translate(50px,100px); /* Standard syntax */


}

</style>

</head>

<body>

<h1>The translate() Method</h1>

<p>The translate() method moves an element from its current


position:</p>

<div>

This div element is moved 50 pixels to the right, and 100 pixels
down from its current position.

</div>

</body>

</html>

The rotate() Method


 The rotate() method rotates an element clockwise or counter-
clockwise according to a given degree.

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

div#myDiv {

-ms-transform: rotate(20deg); /* IE 9 */

transform: rotate(20deg); /* Standard syntax */

div#myDiv1 {
-ms-transform: rotate(-20deg); /* IE 9 */

transform: rotate(-20deg); /* Standard syntax */

</style>

</head>

<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or


counter-clockwise.</p>

<div>

This a normal div element.

</div>

<div id="myDiv">

This div element is rotated clockwise 20 degrees.

</div>

<div>

This a normal div element.


</div>

<div id="myDiv1">

This div element is rotated counter-clockwise 20 degrees.

</div>

</body>

</html>

The scale() Method

 The scale() method increases or decreases the size of an element

<html>

<head>

<style>

div {

margin: 150px;

width: 200px;
height: 100px;

background-color: yellow;

border: 1px solid black;

-ms-transform: scale(2,3); /* IE 9 */

transform: scale(2,3); /* Standard syntax */

</style>

</head>

<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an


element.</p>

<div>

This div element is two times of its original width, and three times of
its original height.

</div>

</body>
</html>

The scaleX() Method

 The scaleX() method increases or decreases the width of an


element.

transform: scaleX(2)

or

div {
transform: scaleX(0.5);
}

The scaleY() Method


The scaleY() method increases or decreases the height of an element.

div {
transform: scaleY(3);
}

The skewX() Method


The skewX() method skews an element along the X-axis by the given
angle.
div {
transform: skewX(20deg);
}

The skewY() Method


The skewY() method skews an element along the Y-axis by the given
angle.

div {
transform: skewY(20deg);
}

The skew() Method


The skew() method skews an element along the X and Y-axis by the
given angles.

div {
transform: skew(20deg,10deg);
}

If the second parameter is not specified, it has a zero value.

The matrix() Method


 The matrix() method combines all the 2D transform methods
into one.
 The matrix() method take six parameters, containing mathematic
functions, which allows you to rotate, scale, move (translate),
and skew elements.
 The parameters are as follows:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),trans
lateY())

div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

CSS 3D Transforms

 With the CSS transform property you can use the


following 3D transformation methods:

rotateX()
rotateY()
rotateZ()

The rotateX() Method

 The rotateX() method rotates an element around its X-


axis at a given degree.
#myDiv {
transform: rotateX(150deg);
}

The rotateY() Method

 The rotateY() method rotates an element around its Y-


axis at a given degree:

#myDiv {
transform: rotateY(130deg);
}

The rotateZ() Method

 The rotateZ() method rotates an element around its Z-


axis at a given degree:

#myDiv {
transform: rotateZ(90deg);
}
CSS Transitions
 CSS transitions allow you to change property
values smoothly, over a given duration.

To create a transition effect, you must specify two


things:

 The CSS property you want to add an effect to.


 The duration of the effect.

 If the duration part is not specified, the transition


will have no effect, because the default value is 0.
 Notice that when the cursor moves out of the
element, it will gradually change back to its
original style.

Specify the Speed Curve of the


Transition
 The transition-timing-function property specifies the
speed curve of the transition effect.
 The transition-timing-function property can have the
following values:
 ease - specifies a transition effect with a slow start, then
fast, then end slowly (this is default)
 linear - specifies a transition effect with the same speed
from start to end.
 ease-in - specifies a transition effect with a slow start
 ease-out - specifies a transition effect with a slow end
 ease-in-out - specifies a transition effect with a slow start
and end

#div1 {transition-timing-function: linear;}


#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Delay the Transition Effect


 The transition-delay property specifies a delay (in
seconds) for the transition effect.

div {
transition-delay: 1s;
}
Transition + Transformation
div {
transition: width 2s, height 2s,
transform 2s;
}

CSS Tooltip
A tooltip is often used to specify extra information about something when the
user moves the mouse pointer over an element

Basic Tooltip
Create a tooltip that appears when the user moves the mouse over an
element:

Ex:

<!DOCTYPE html>

<html>

<style>

.tooltip {

position: relative;

display: inline-block;
border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1;

.tooltip:hover .tooltiptext {

visibility: visible;

</style>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>


<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>

</body>

</html>

 Use a container element (like <div>) and add

the "tooltip" class to it.

 When the user mouse over this <div>, it will show the

tooltip text.

 The tooltip text is placed inside an inline element (like

<span>) with class="tooltiptext".

 The tooltip class use position:relative, which is needed to

position the tooltip text (position:absolute).

 The tooltiptext class holds the actual tooltip text.

 It is hidden by default, and will be visible on hover.


 We have also added some basic styles to it: 120px width,

black background color, white text color, centered text,

and 5px top and bottom padding.

 The CSS border-radius property is used to add rounded

corners to the tooltip text.

 The :hover selector is used to show the tooltip text when

the user moves the mouse over the <div>

with class="tooltip".

Positioning Tooltips
 The tooltip is placed to the right (left:105%) of the
"hoverable" text (<div>).
 Also top:-5px is used to place it in the middle of its
container element.
 We use the number 5 because the tooltip text has a top
and bottom padding of 5px.
 If you increase its padding, also increase the value of
the top property to ensure that it stays in the middle.
 The same applies if you want the tooltip placed to the
left.

Right Tooltip
.tooltip.tooltiptext {

top: -5px;

left: 105%;

Left Tooltip
.tooltip.tooltiptext {

top: -5px;

right: 105%;

Top Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the
width (120/2 = 60), to center the tooltip */
}

Bottom Tooltip
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
}

CSS Multiple Columns


The CSS multi-column layout allows easy definition of multiple columns of
text - just like in newspapers:

div {
column-count: 3;
}

CSS Specify the Gap Between


Columns
The column-gap property specifies the gap between the columns.

div {
column-gap: 40px;
}

CSS Column Rules


The column-rule-style property specifies the style of the rule between
columns:

div {
column-rule-style: solid;
}

The column-rule-width property specifies the width of the rule between


columns:

div {
column-rule-width: 1px;
}

The column-rule-color property specifies the color of the rule between


columns:

div {
column-rule-color: lightblue;
}
Specify How Many Columns an
Element Should Span
The column-span property specifies how many columns an element should
span across.

h2 {
column-span: all;
}

Specify The Column Width


The column-width property specifies a suggested, optimal width for the
columns.

div {
column-width: 100px;
}

You might also like