Membuat Avatar Otomatis Menurut Inisial Ala Gmail Mobile
Hey ho, pada pembahasan kali ini aku ingin membahas perihal bagaimana cara menciptakan avatar secara otomatis memakai inisial text. avatar inisial sendiri sanggup kau lihat pada aplikasi gmail mobile. Jika masih belum ada citra seputar avatar inisial text, monggo eksklusif saja lirik gambar di bawah ini.
Terlihat pada gambar di atas, avatar pada list email memakai inisial dari email itu sendiri.
Di pembahasan kali ini aku akan memakai sebuat jquery plugin sebagai alat pendukung, namanya yaitu initial JS.
Initial JS merupakan jquery plugin sederhana untuk menciptakan avatar text untuk gambar profile, Avatar ini sanggup ditingkatkan untuk banyak sekali ukuran sebab berbasis SVG. Seperti yang sudah aku jelaskan sebelumnya, teladan penggunaan initial JS sanggup kau lihat pada aplikasi mobile gmail.
Fitur :
Library :
Html :
Kode Jquery :
Kode lengkap :
Penjelasan singkat :
Selain itu, kau juga sanggup memodifikasi beberapa hal :
Github : Melesat ke github
Semoga bermanfaat,
Thanks
Sumber http://www.kang-cahya.com
Terlihat pada gambar di atas, avatar pada list email memakai inisial dari email itu sendiri.
Di pembahasan kali ini aku akan memakai sebuat jquery plugin sebagai alat pendukung, namanya yaitu initial JS.
Initial JS merupakan jquery plugin sederhana untuk menciptakan avatar text untuk gambar profile, Avatar ini sanggup ditingkatkan untuk banyak sekali ukuran sebab berbasis SVG. Seperti yang sudah aku jelaskan sebelumnya, teladan penggunaan initial JS sanggup kau lihat pada aplikasi mobile gmail.
Fitur :
- Scalable untuk ukuran
- Hanya 1.2 KB (untuk versi minified)
- Chrome
- Firefox
- IE 9+
- Opera 9+
- Safari 3.2+
- iOS Safari 3.2+
- Android Browser 3+
Cara memakai :
Library :
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="initial.js"></script> Html :
<img data-name="Steve" class="profile"/> Kode Jquery :
$('.profile').initial(); Kode lengkap :
<html> <head> <title>Initial JS</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="initial.js"></script> </head> <body> <img data-name="Kang Cahya" class="profile"/> Kang Cahya <script> $('.profile').initial(); </script> </body> </html> Penjelasan singkat :
Selain itu, kau juga sanggup memodifikasi beberapa hal :
- data-name , attribut ini berfungsi untuk mengidentifikasi inisial dari sebuah text.
- data-height , attribut ini berfungsi untuk mengatuh tinggi avatar. default-nya 100px.
- data-width , attribut ini berfungsi untuk mengatur lebar avatar. default-nya 100px.
kau juga sanggup memodifikasi hal lainnya seperti, ketebalan text pada avatar, warna text avatar dan lain-lain. Lengkapnya lihat saja di official web nya yah :D
Untuk mengatur bentuk avatar, kau sanggup modif memakai CSS.
Web : Initial JS
Github : Melesat ke github
Semoga bermanfaat,
Thanks
Sumber http://www.kang-cahya.com
0 Response to "Membuat Avatar Otomatis Menurut Inisial Ala Gmail Mobile"
Posting Komentar