Scribd
Upload
285 views

CSS3 PDF

CSS3 is a style sheet language used for describing the look and formatting of documents. It has several modules including selectors, box model, backgrounds, and text effects. CSS3 allows adding rounded corners to elements using border-radius, adding images as borders using border-image, applying multiple backgrounds to elements, rotating elements in 2D and 3D, animating elements on hover, truncating overflowing text, styling boxes, and displaying content in multiple columns.

Uploaded by

Mdv Prasad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
285 views

CSS3 PDF

CSS3 is a style sheet language used for describing the look and formatting of documents. It has several modules including selectors, box model, backgrounds, and text effects. CSS3 allows adding rounded corners to elements using border-radius, adding images as borders using border-image, applying multiple backgrounds to elements, rotating elements in 2D and 3D, animating elements on hover, truncating overflowing text, styling boxes, and displaying content in multiple columns.

Uploaded by

Mdv Prasad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Cascading Style Sheets3 (CSS3)

1. It is a style sheet language used for describing the look and formatting of a document written
in a markup language.
3. CSS3 is a latest of CSS.

CSS3 modules
CSS3 modules list
Selectors 2D Transformations
Box Model 3D Transformations
Backgrounds Animations
Image Values and Replaced Content Multiple Column Layout
Text Effects User Interface

CSS3 - Rounded Corners


<html>
<head>
<title>CSS3-Round Corners</title>
<style type="text/css">
#roundcorner
{
border-radius: 25px;
border: 2px solid yellow;
background: pink;padding: 20px;
width: 200px; height: 150px;
}
</style>
Check for Border Radius
</head>
1. 15px 50px 30px 5px;
<body>
2. 15px 50px 30px;
<p id="roundcorner">Rounded corners!</p>
3. 15px 50px;
</body>
</html>

Image
<html>
<head>
<title>CSS3-Image</title>
<style type="text/css">
#image1
{
border: 10px solid transparent;
padding: 90px;
border-image-source:
url(file:///C:/Users/MDV%20PRASAD/Desktop/css3/rose.jpg);
border-image-repeat: round ;
border-image-width: 200px;
</style>
</head>
<body>
<p id="image1">Image boarder.</p></body></html>
Multi Back Ground
<html>
<head>
<title>CSS3-
Imagemultibackground</title>
<style>
div
{
padding: 10px;
opacity: 0.7;
text-align: center;
}

#abs1 {
z-index: 5;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
left: 10px;
}

#rel1 {
z-index: 3;
height: 100px;
position: relative;
top: 30px;
margin: 0px 50px 0px 50px;
left: 0px;
width: 326px;
}

</style></head>
<body>
<div id="abs1"><img src="logo2.png"
/></div>

<div id="rel1"><img src="logo3.png"


/></div>

<br /> <br /> <br /> <br />


<br /> <br /> <br /> <br />

DIV #1-position: absolute; -z-


index: 5;</br>
DIV #2-position: relative;-z-index:
3;

</body>
</html>
2D - Rotation
<html>
<head>
<title>CSS#-Rotate</title>
</head>

<style type="text/css">
div {
width: 300px;
height: 100px;
background-color: Green;
border: 1px solid black;
}

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

-webkit-transform: rotate(20deg); /*
Safari */

transform: rotate(20deg); /* Standard


syntax */
}
</style>

<body>
<div>Rotate</div>
<div id="myDiv">Rotate</div>
</body>
</html>

3D- Rotation
<html>
<head>
<title>CSS3-3D-Rotate</title>
</head>
<style type="text/css">
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
transform: rotateX(150deg); /* Safari */
}
</style>

<body>
<div>tutorials point.com</div>
<p>Rotate X-axis</p>
<div id="myDiv">tutorials point.com.</div>
</body>
</html>
Animation
<html>
<head>
<title>CSS3-Animation</title>
</head>
<style type="text/css">
.rotatingimg{transition: transform 2s;}
.rotatingimg:hover{transform:rotate(360deg);}
</style>

<body>
<img id="logo2" src="logo2.png" It (Image) Rotates.
class="rotatingimg" width="150" height="150" />
</body>
</html>

Text
<html>
<head>
<title>CSS3-Text</title>

<style type="text/css">
p.text1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>

<b>Original Text:</b>

<p class="text1">123456789 abcdefgh


123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh </p>
<b>Text overflow</b>

</body>
</html>
Box
<html>
<head>
<title>CSS3-Text</title>
</head>

<style type="text/css">
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
</style>

<body>
<div class="div1">Box Text</div></br>
</body>
</html>

Multi Columns
<html>
<head>
<title>CSS3-MultiColumns</title>
</head>
<style type="text/css">
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;

/* Column gap property */


-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
<body>
<div class="multi">
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh 123456789 abcdefgh
123456789 abcdefgh
</div></body></html>

You might also like