Membuat avatar otomatis berdasarkan inisial ala gmail mobile

byNicht Menschen - 4
Hey ho, pada pembahasan kali ini saya ingin membahas tentang bagaimana cara membuat avatar secara otomatis menggunakan inisial text. avatar inisial sendiri dapat kamu lihat pada aplikasi gmail mobile. Jika masih belum ada gambaran seputar avatar inisial text, monggo langsung saja lirik gambar di bawah ini.

Membuat avatar otomatis berdasarkan inisial ala gmail mobile

Terlihat pada gambar di atas, avatar pada list email menggunakan inisial dari email itu sendiri.

Di pembahasan kali ini saya akan menggunakan sebuat jquery plugin sebagai alat pendukung, namanya adalah initial JS.

Initial JS merupakan jquery plugin sederhana untuk membuat avatar text untuk gambar profile, Avatar ini dapat ditingkatkan untuk berbagai ukuran karena berbasis SVG. Seperti yang sudah saya jelaskan sebelumnya, contoh penggunaan initial JS dapat kamu lihat pada aplikasi mobile gmail.

Fitur :
  • Scalable untuk ukuran 
  • Hanya 1.2 KB (untuk versi minified)
Kompatibilitas browser :

  • Chrome
  • Firefox
  • IE 9+
  • Opera 9+
  • Safari 3.2+
  • iOS Safari 3.2+
  • Android Browser 3+
Cara menggunakan :

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, kamu juga bisa 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.
kamu juga bisa 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, kamu bisa modif menggunakan CSS.

Web : Initial JS

Github : Melesat ke github



Semoga bermanfaat,
Thanks

Tags

Diposting oleh Nicht Menschen

4/Post a Comment/Comments

Posting Komentar

Lebih baru Lebih lama