إنضم لنا

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
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail