Membuat long shadow menggunakan javascript

Zulmy Eve       January 31, 2016       Add Comment       Javascript       Tips

Cara membuat long shadow menggunakan javascript - Shadow panjang yang merupakan gaya utama dari flat UI kini dapat memanfaatkan javascript untuk membuatnya dalam sebuah web atau blog. Jadi, tidak hanya menggunakan photoshop, corel draw, maupun adobe ilustrator saja.

Javascript long shadow

Selain tidak ribet, long shadow menggunakan javascript tergolong ringan dan tidak membebankan load pada sebuah web atau blog apalagi jika javascript dikompress dan memproteksinya menggunakan Obfuscator silahkan baca juga cara proteksi file javascript yang tepat. Istilahnya gini tidak harus beresiko meski tampilan menarik, bener gak bro. he he

Seperti contoh misal kita ingin membuat long shadow pada teks kita ambil html sederhana berikut.

<div class='text-shadow'>
  <span>BLOGER IDIOTS<i class="fa fa-check-circle"></i></span>
</div>

Dengan gaya nya seperti ini.

.text-shadow {
  color: #fff;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
}
.text-shadow span {
  display: block;
  background: #f8695f;
  padding: 20px 0;
  border-radius: 5px;
}
.fa-check-circle {
  color: #03a9f4;
  font-size: 40px;
  margin-left: 10px;
  vertical-align: top
}

overflow: hidden = guna agar shadow pada teks tidak keluar jalur di blok teks tersebut.

 Dan javascript nya seperti contoh di bawah ini

<script type='text/javascript'>
    //<![CDATA[
    //long shadow
    var genLongShadow = function (num, color) {
        var value = '';
        for (var i = 1; i < num; i++) {
            value += i + 'px ' + i + 'px 0px ' + color;
            if (i != num - 1) {
                value += ', ';
            }
        }
        return value;
    };
    document
        .querySelector('.text-shadow span')
        .style.textShadow = genLongShadow(80, '#f63f31');
    //]]>
</script>

Keterangan

.text-shadow span: id class pada text

80: silahkan ganti untuk mengatur panjang shadow

#f63f31: warna shadow, gw sarankan jangan memakai warna transparan, seperti 'rgba(0,0,0,01)'

Silahkan di selaraskan sesuai kebutuhan. semoga bermanfaat.

Tambahan

Jika long shadow ingin digunakan pada template blogger, sisipkan javascript nya sebelum kode </body>

Baca juga:

Zulmy Eve

Empat tahun menggeluti dunia pemerograman membuat saya ingin mencoba untuk berbagi.