Hallo sobat! sebelumnya kita sudah melihat bagaimana Cara Membuat Border Pelangi Hanya Dengan CSS dan pada kesempatan yang baik ini saya akan berbagi bagaimana membuat tulisan gradient dalam postingan.
Tutorial ini cukup menarik sebab kita bisa membuat postingan blog kita terlihat lebih menarik, apalagi untuk kamu yang suka ala-ala tulisan gradient maka tutorial ini bisa kamu coba terapkan pada postingan blog kamu..
Baiklah tanpa panjang lebar langsung saja kita ke langakah penerapannya sebagai berikut:
Pertama letakan kode ini tepat di atas ]]></b:skin>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);.box-with-text {background-image: linear-gradient(#D64541 50%, white 50%);background-repeat: repeat; background-position: 0 0;background-size: 10% 50px; -webkit-text-fill-color: transparent;-webkit-background-clip: text; animation: stripes 2s linear infinite;}@keyframes stripes {100% {background-position: 0 -50px;}}body {overflow: hidden;background: #000; color: #FFF;}.box-with-text { position: absolute;top: 50%; left: 50%;white-space: nowrap;text-align: center;text-transform: uppercase;font: bold 15vmax/.8 Open Sans, Impact;transform: translateX(-50%) translateY(-50%);}Selanjutnya kita gunakan kode ini untuk menampilkan dalam postingan blog anda
<div class="box-with-text">ricods.com</div>Kalian tinggal ubah tulisan ricods.com dan selesai! Bagaimana mudah bukan? Selamat mencoba!!