Membuat gambar blur dan text menggunakan css

Selamat sore wahai para blogger dari seluruh penjuru dunia :) apa kabar kalian?

Pada kesempatan kali ini saya akan membuat Tutorial cara membuat effec blur pada sebuah gambar dan text seperti apa?


DEMO
Sentuh untuk melihat gambar


DEMO
Sentuh untuk melihat Text

Demo Teks blur cara membuatnya pun sangat mudah

Itu dia demo yang akan saya search kali ini Langsung sajah pertama kalian wajib masuk ke seting HTML pada template blog kalian lalu tempelkan css di bawah ini tepat di atas code ]]></b:skin>

biasanya untuk template AMP code ]]></b:skin> tidak ada karna sudah di parse  sebagai gantinya Pengguna AMP bisa menempatkanya di atas code </style>

/* css blur webcensar */
 .cs {
  filter: blur(➜ 20px) grayscale(.100);
  transition-property: filter;
  transition-duration:➜ .9s;
}
.cs:hover, 
.cs:focus {
  filter: blur(0px) grayscale(0);
}

PENTING!
Yang saya beri tanda panah merah 20px itu adalah filter blur kalian bisa mengaturnya ke tingkat paling rendah atau lebih tinggi,Dan untuk .9s adalah waktu untuk menampilkan objek dari blur ke normal

Kemudian jika kalian ingin menggunkan di sebuah postingan kalian gunakan contoh di bawah ini

Untuk gambar

<amp-img alt="" class="cs " height="250" layout="responsive" src="Url gambar" width="900">

Untuk text

<div class="cs ">Text Anda di sini..</div>

Kesimpulanya begini,
setelah kalian memasang css yang telah saya berikan di atas kemudian kalian ingin menerapkannya pada sebuah objek yang ingin di buat blur kalian harus memberikan sebuah class seperti ini ➜ class"cs"

Gampang banget kan hanya saja saya yang terlalu bertele tele menulisnya

Baca juga