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.

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.

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
}

Demo

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.