Membuat image placeholder dengan css - Ramai Beud

Image placeholder atau biasa kita sebut sebagai gambar cadangan ketika gambar yang sesungguhnya terlihat. Untuk pemaknaan dari mage placeholder tentu saya yakin anda sudah paham, jadi tidak perlu di jelasin lagi ya. Kali ini kita langsung saja membahas tentang bagaimana cara membuat image placeholder itu sendiri.



Untuk pembuatanya sendiri sebenarnya ada banyak cara, dari mulai membuat khusus dengan editor gambar atau dengan css. Nah kali ini kita akan buat image placeholder tersebut menggunakan css, agar tidak terlalu berat ketika halaman blog kita di load.

Langsung saja ya,

Membuat Image Placeholder dengan CSS

Untuk cara menerapkannya saya mengasumsikan bahwa anda sudah paham tentang CSS dan HTML. karena kalau anda belum paham tidak mungkin juga mencari tutorial tentang placeholder CSS, bukan begitu ?

Oke, baiklah, langsung ke contoh CSS nya :

.image-placeholder {
    background-color: #eee;
    display: flex;
    height: 180px;
    margin: 5px;
    width: 260px;
}

.image-placeholder > h4 {
    align-self: center;
    text-align: center;
    width: 100%;
}

Kemudian cara penerapannya seperti ini :

<div class="image-placeholder">
    <h4>image placeholder text</h4>
</div>

Dah gitu saja, mudah kan ? Biar tidak makin penasaran silahkan anda coba di blog anda. Demikianlah dan semoga artikel pendek tentang Cara membuat image placeholder dengan css bermanfaat buat kita semua.