Efek Judul Artikel Memudar di Ujung seperti Google Play

Artikel kali ini menjelaskan bagaimana cara membuat artikel yang di ujungnya atau akhir terlihat memudar atau semakin kabur dan menghilang. Saya temukan efek ini di halaman Google Play. Coba sobat perhatikan judul-judul aplikasi di halaman Google Play seperti yang terlihat dalam screenshot di bawah ini.
judul Google Play

Saya tertarik dengan itu kemudian mempelajarinya. Efek memudar itu hanya menggunakan CSS saja dan sudah saya terapkan di blog ini (jelasinblog dengan template hitam). Perhatikan screenshot di bawah ini.
judul artikel jelasinblog

Anda tertarik? Inilah kode HTML dan CSS untuk membuat efek memudar di ujung atau akhir artikel seperti Google Play.

Anda butuh HTML berikut,
<div class="card">
    <div class="card-content">
        <div class="cover">
            <div class="cover-image-container">
                <div class="cover-outer-align">
                    <div class="cover-inner-align">
                        <img class="cover-image" alt="RE-VOLT 2 : MULTIPLAYER" src="https://lh3.ggpht.com/1dfAvz8Q5XZ5iwplTkEjyvsEfzjZiIOjsr6RsDOAtJJTvmUBD5Ob-A98gGTkzY9Fhuo=w170" />
                    </div>
                </div>
            </div>
        </div>
        <div class="details">
             <h2> <a class="title" href="/" title="RE-VOLT 2 : MULTIPLAYER">    RE-VOLT 2 : MULTIPLAYER JELASINBLOG <span class="paragraph-end"></span> </a> </h2> 
        </div>
    </div>
</div>

dan CSS di bawah ini.
.card {
    font-family:Arial;
    display:inline-block;
    margin:5px;
    position:relative;
    text-align:left;
    vertical-align:top;
    white-space:normal;
    -webkit-backface-visibility:hidden;
    width:200px
}
.card-content {
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5);
    box-shadow:0 2px 4px rgba(0, 0, 0, 0.5);
    background:#fff;
    height:100%;
}
.card .cover {
    -webkit-border-radius:2px 2px 0 0;
    -moz-border-radius:2px 2px 0 0;
    border-radius:2px 2px 0 0;
    background-color:#cacaca;
}
.card .cover-image-container {
    height:110%;
    left:-5%;
    position:relative;
    top:-5%;
    width:110%
}
.card .cover-outer-align {
    display:table;
    height:100%;
    width:100%
}
.card .cover-inner-align {
    display:table-cell;
    text-align:center;
    vertical-align:middle
}
.card .cover-image {
    max-height:92%;
    max-width:92%;
    padding:5px 0 1px 0;
}
.card .jelasinblog-container .paragraph-end {
    left:-10px;
    height:20px;
    right:auto;
    width:10px
}
.card .details {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    display:block;
    overflow:hidden;
    padding:0 10px 0;
    position:relative
}
.card .title {
    color:#333;
    display:block;
    font-size:16px;
    line-height:18px;
    max-height:36px;
    min-height:18px;
    overflow:hidden;
    text-decoration:none;
    position:relative;
    white-space:nowrap
}
.card .title:hover {
    cursor:pointer;
    text-decoration:underline
}
.card .title .paragraph-end {
    height:19px;
    width:45px
}
.paragraph-end {
    background-image:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    background-image:-webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-image:-moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-image:-ms-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-image:-o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background:linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#00ffffff', EndColorStr='#ffffff');
    bottom:0;
    height:25px;
    max-height:100%;
    position:absolute;
    right:0;
    width:60px
}



Agar lebih mudah mempraktikkannya silahkan sobat baca terlebih dahulu artikel CSS Text-Overflow.
Silahkan di utak-atik.

Kunci efek memudar itu adalah penerapan background-image.

Comments

  1. Replies
    1. Ganti saja HTML judul artikel punya abang..

      Delete
    2. oke bang, terimakasih ya bang penjelasannya :)

      Delete
  2. gan tolong clonningkan template jalantikus

    ReplyDelete
  3. Um, Mohon bantuannya, cara buat halaman kayak begini http://www.apkbaru.net/p/download.html

    Salam dari Mks

    ReplyDelete
  4. Sekarang sudah jarang update ya kang

    ReplyDelete
  5. terimakasih banyak gan... sangat membantu nih...

    http://herbalkuacemaxs.com/

    ReplyDelete

Post a Comment

Popular posts from this blog

Perbedaan JavaScript dan jQuery Beserta Contoh

Cara Menggunakan :before dan :after

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template