بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
PELANGI teks dalam sebuah blog adalah teks yang memiliki background pelangi. Background itu bisa berupa gambar diam dan ada juga yang background bergerak atau animasi. Warna-warna pelangi Merah, Cyan, Biru, Kuning, Hijau, Orange menjadi satu dalam perpaduan warna. Sehingga perpaduan warna itu menghasilkan bermacam warna yang disebut pelangi.
Pernah melihat pelangi khan? nah warna warni tersebut dapat kita aplikasikan sebagai aksesoris sebuah teks sehingga tampilan teks itu akan semakin berbeda dan tentunya unik tentu saja dengan tampilan warna warninya yang indah. Bila tertarik saya akan memberikan tutorialnya berikut ini dibawah beserta demonya. Kalian tinggal praktekkan saja.
Oh iya, siapa yang suka utak-atik nih. Bagi yang suka utak-atik template, penempatan teks pelangi ini bisa dilakukan di header, post body, sidebar maupun footer. Karena kalian nanti tinggal membubuhkan saja dalam tags yang ada. Misal header biasanya di #header-wrapper, bila ingin tampil di post ya disini .post-body dan sebagainya. Bila ingin ditampilkan di dalam artikel tinggal diberikan antara <p> dan </p>.
Sehingga jadi seperti ini Misal :
<p> ALIFACODE </p>
Baca Juga :
Untuk tutorialnya langsung saja ya
Tutorial Membuat Background Teks Pelangi Gradient Animasi
1. Masuk ke Dashboard Blogger
2. Klik Tema terus pilih Sesuaikan : Edit HTML
3. Setelah masuk ke Template kemudian cari kode ]]></b:skin>
4. Tempelkan kode dibawah ini di atas kode ]]></b:skin> ini kodenya
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
p {
font-size: 15vw;
margin: 0;
color: white;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
background-image: linear-gradient(
to right,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered);
background-size: 110vw;
animation: sliding 30s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes sliding {
to {
background-position: -2000vw;
}}Setelah itu terpasang, tinggal aplikasikan ke tulisan. Nanti jadinya akan seperti yang ada pada demo dibawah ini.
Nah sudah terlihat khan itu teks pelanginya. Terima kasih ya yang sudah kesini. Bila ada waktu akan saya tulis tutorial yang lainnya disela-sela waktu saya. Maaf karena kerjaan utama saya di Rumah Sakit. Jadi ngeblog ini sebagai sampingan saya, tapi tetap saya maksimalkan, bukan karena sampingan ya. Yang jelas bisa berbagi ilmu ke kalian semua. Karena ilmu tidak akan habis kita bagi. Tapi ilmu akan bertambah bila kita bagi. Tapi, ilmu saja tidak cukup ya teman-teman, utamakan adab/tingkah laku sopan santun terutama kepada orang yang lebih tua dari kita.
Sekarang lanjut lagi tutorial untuk background teks berupa strip atau garis-garis seperti hewan zebra. Terus bagaimana membuatnya. Simak tutorial berikut ini.
Tutorial Membuat Background Teks Bergaris seperti Zebra
1. Masuk ke Dashboard Blogger
2. Klik Tema terus pilih Sesuaikan : Edit HTML
3. Setelah masuk ke Template kemudian cari kode ]]></b:skin>
4. Tempelkan kode dibawah ini di atas kode ]]></b:skin> ini kodenya
@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%);
}Untuk menampilkan di dalam display blog, maka kalian mesti menambahkan kode HTML seperti ini :
<div class="box-with-text">alifacode</div>
Nah udah selesai juga pekerjaan kita. Saatnya kamu praktekkan. Semoga berhasil. Salam.
Label Postingan :
CSS
,
Javascript
,
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Tutorial Membuat Background Teks Pelangi Gradient Animasi . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
