Scribd Logo
Upload

Welcome to Scribd!

  • IT Codes

    Uploaded by

    Sumit Jatiya
    7 views7 pages
    H

    Original Title

    IT codes

    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
    H

    Copyright:

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

    IT Codes

    Uploaded by

    Sumit Jatiya
    H

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    IT CODES

    CSS border-image Property


    <!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>

    <!DOCTYPE html>
    <html>

    <head>

    <style>

    #borderimg1 {

     border: 10px solid transparent;


     padding: 15px;

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


    }

    #borderimg2 {
     border: 10px solid transparent;
     padding: 15px;
     border-image: url(border.png) 20% round;
    }

    #borderimg3 {
     border: 10px solid transparent;
     padding: 15px;
     border-image: url(border.png) 30% round;
    }
    </style>
    </head>
    <body>

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

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


    <p id="borderimg2">border-image: url(border.png) 20% round;</p>
    <p id="borderimg3">border-image: url(border.png) 30% round;</p>

    <p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support


    the border-image property.</p>

    </body>
    </html>

    CSS Flex Box Properties


    flex direction

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .flex-container {
     display: flex;
     flex-direction: column;
     background-color: DodgerBlue;
    }

    .flex-container > div {


     background-color: #f1f1f1;
     width: 100px;
     margin: 10px;
     text-align: center;
     line-height: 75px;
     font-size: 30px;
    }
    </style>
    </head>
    <body>

    <h1>The flex-direction Property</h1>

    <p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):
    </p>

    <div class="flex-container">
     <div>1</div>
     <div>2</div>
     <div>3</div>  
    </div>

    </body>
    </html>
    CSS Multiple Backgrounds

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #example1 {
     background-image: url(img_flwr.gif), url(paper.gif);
     background-position: right bottom, left top;
     background-repeat: no-repeat, repeat;
     padding: 15px;
    }
    </style>
    </head>
    <body>

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

    <div id="example1">
     <h1>Lorem Ipsum Dolor</h1>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
     <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>

    </body>
    </html>

    Define Sizes of Multiple Background Images


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #example1 {
     background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-
    repeat, url(paper.gif) left top repeat;
     padding: 15px;
     background-size: 50px, 130px, auto;
    }
    </style>
    </head>
    <body>

    <div id="example1">
     <h1>Lorem Ipsum Dolor</h1>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
     <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>

    </body>
    </html>

    Full Size Background Image


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    html {
     background: url(img_man.jpg) no-repeat center fixed;
     background-size: cover;
    }

    body {
     color: white;
    }
    </style>
    </head>
    <body>

    <h1>Full Page Background Image</h1>


    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
    veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
    commodo consequat.</p>
    </body>
    </html>

    Basic Button Styling

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button {
     background-color: #4CAF50;
     border: none;
     color: white;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     cursor: pointer;
    }
    </style>
    </head>
    <body>

    <h2>CSS Buttons</h2>

    <button>Default Button</button>
    <a href="#" class="button">Link Button</a>
    <button class="button">Button</button>
    <input type="button" class="button" value="Input Button">

    </body>
    </html>

    CSS Styling Images
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img {
     border-radius: 8px;
    }
    </style>
    </head>
    <body>

    <h2>Rounded Image</h2>

    <p>Use the border-radius property to create rounded images:</p>

    <img src="paris.jpg" alt="Paris" width="300" height="300">

    </body>
    </html>

    You might also like