Scribd Logo
Upload

Welcome to Scribd!

  • CSS3 PDF

    Uploaded by

    Mdv Prasad
    103 views5 pages

    Original Title

    CSS3.PDF

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    103 views5 pages

    CSS3 PDF

    Uploaded by

    Mdv Prasad

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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