Scribd Logo
Upload

Welcome to Scribd!

  • Kode Huruf Bergelombang Website

    Uploaded by

    siti romlah
    7 views2 pages

    Original Title

    kode huruf bergelombang website

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, 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 TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views2 pages

    Kode Huruf Bergelombang Website

    Uploaded by

    siti romlah

    Copyright:

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

    <html>

    <head>
    <title> - Membuat Efek Gelombang Pada Teks Menggunakan Clip-Path HTML Dan CSS3
    </title>
    <style>
    * {
    font-family: 'Microsoft Yahei', sans-serif;
    }
    .panel {
    overflow: auto;
    width: 200%;
    height: 70vh;
    position: relative;
    background: radial-gradient(circle, #0e0e0e 15%, #010101);
    }
    .wow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 10vmin;
    color: #fff;
    line-height: .85;
    text-transform: uppercase;
    background-image: url(/uploads/161001/lighten2.jpg);
    background-size: contain;
    -webkit-text-fill-color: rgb(223 236 17 / 10%);
    -webkit-background-clip: text;
    z-index: 10;
    }
    .wow:before {
    content: 'www.daarurrahmah.com';
    display: table;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5vmin;
    color: white;
    -webkit-text-fill-color: white;
    -webkit-background-clip: none;
    background-color: #04671e;
    padding: 3px;
    }
    .wow + .wow {
    -webkit-text-fill-color: #045814;
    z-index: 20;
    animation: meh 3s ease-out infinite alternate;
    }
    @keyframes meh {
    from {
    clip-path: polygon(100% 0, 100% 100%, 20% 100%, 61% 91%, 94% 47%);
    }
    50% {
    clip-path: polygon(100% 0, 100% 100%, 20% 100%, 59% 52%, 74% 13%);
    }
    to {
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 85%, 87% 41%);
    }
    }
    .jj span {
    display: block;
    }
    body {
    margin: 0;
    }
    </style>
    <body>
    <div class="panel">
    <h1 class="wow">
    <span>PON PES</span>
    <span>DARURRAHMAH YAPIDA</span>
    </h1>
    <h1 class="wow">
    <span>PON PES</span>
    <span>DARURRAHMAH YAPIDA</span>
    </h1>
    </div>
    </body>
    </head>
    </html>

    You might also like