Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Code snippets for CSS effects

    Încărcat de

    Hareesh K V
    8 vizualizări11 pagini
    HTML for bloggers

    Titlu original

    Simple HTML for bloggers

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    HTML for bloggers

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    8 vizualizări11 pagini

    Code snippets for CSS effects

    Încărcat de

    Hareesh K V
    HTML for bloggers

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 11

    BELOW CODE IS FOR HIGHLIGHTING EFFECT

    <!DOCTYPE html>
    <html>
    <body>

    <div style="background-color:grey;color:white;padding:20px;">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
    metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history
    going back to its founding by the Romans, who named it Londinium.</p>
    </div>

    </body>
    </html>
    BELOW CODE IS FOR BLINKING EFFECT
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style>
    .blink {
    animation: blinker 1.5s linear infinite;
    color: #1c87c9;
    font-size: 30px;
    font-weight: bold;
    font-family: sans-serif;
    }
    @keyframes blinker {
    50% { opacity: 0; }
    }
    .blink-one {
    animation: blinker-one 1s linear infinite;
    }
    @keyframes blinker-one {
    0% { opacity: 0; }
    }
    .blink-two {
    animation: blinker-two 1.4s linear infinite;
    }
    @keyframes blinker-two {
    100% { opacity: 0; }
    }
    </style>
    </head>
    <body>
    <p class="blink">Blinking text</p>
    <p class="blink blink-one">CSS blinking effect for opacity starting with 0%</p>
    <p class="blink blink-two">CSS blinking effect for opacity starting with 100%</p>
    </body>
    </html>

    Simple Button

    <button type="button">Click Me!</button>
    BELOW CODE IS FOR BLINKING EFFECT ONE LINE
    ONLY
    <style>
    .blink {
    animation: blinker 1.5s linear infinite;
    color: #1c87c9;
    font-size: 30px;
    font-weight: bold;
    font-family: sans-serif;
    }
    @keyframes blinker {
    50% { opacity: 0; }
    </style>
    <p class="blink">Blinking text</p>
    BELOW CODE IS FOR BLINKING EFFECT WITH
    BUTTON
    <style>
    .blink {
    animation: blinker 1.5s linear infinite;
    color: #1c87c9;
    font-size: 16px;
    font-weight: bold;
    font-family: sans-serif;
    }
    @keyframes blinker {
    50% { opacity: 0; }
    </style>
    <BUTTON <p class="blink">CLICK HERE</p> </button>
    BELOW CODE IS FOR SHOWING STATIC CIRCLES
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    }
    </style>
    </head>
    <body>

    <div style="text-align:center">
    <h1>Round Dots / Circles</h1>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    </div>

    </body>
    </html>
    BELOW CODE IS FOR CENTERED HORIZONTALLY
    AND VERTICALLY BUTTON
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .center {
    display: flex;
    justify-content: center;
    align-items: center;

    }
    </style>
    </head>
    <body>

    <div class="center">
    <button>Centered Button</button>
    </div>

    </body>
    </html>
    BULLETS WITHOUT COLOUR
    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>

    <ul style="list-style-type:square;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>
    Table

    <table>
    <tr>
    <td>question 1</td>
    <td>answer 1</td>
    </tr>
    <tr>
    <td>question 2</td>
    <td>answer 2</td>
    </tr>
    </table>

    S-ar putea să vă placă și