Tutorial css dan html cara membuat garis dengan gambar
POST: Tutorial css dan html cara membuat garis dengan gambar
Tutorial ini merupakan tutorial yang sangat simple dan mudah dikuasai asalkan kita dapat menguasai css dengan baik karena disini yang kita pakai adalah tahap menggunakan garis bewarna warni yang akan kita gunakan sebagai pengganti kode <hr /> pada umumnya.
Penerapan kode ini sudah ada kita temukan contohnya di evomag blogger template serta pada halaman google account. Disana kita akan menemukan garis yang serupa. Contoh lain ada pada halaman google bantuan, perhatikan pada bagian footer maka anda akan menemukan line yang ditampilkan memakai gambar warna warni.
Untuk tahap selanjutnya, saya kita anda dapat menerapkannya dirumah dengan bimbingan awal dari sini. Namun tahap pertama yang harus anda cari adalah link url gambar yang akan dijadikan gambar untuk line. Carilah gambar yang berbentuk garis memanjang namun tidak lebar.Contoh gambar yang saya temukan adalah seperti gambar dibawah ini:
Pasanglah kode css dibawah ini diatas </header> web atau blog anda
<style>Tahap berikutnya adalah dengan cara memasang kode berikut ini dihalaman yang anda inginkan untuk pembuatan line/ garis didalam kode sesudah <body> dan sebelum </body> baik di web atau blog anda.
i.line{
background: url(<strong><span style="color: #ff0000;">URL GAMBAR ANDA</span></strong>)0px;
width: 100%;
height: 5px;
display:block;
}
i.line-in
{
background: url(<span style="color: #ff0000;"><strong>URL GAMBAR ANDA</strong></span>) no-repeat 0px 0px;
width: 13px;
height: 500px;
display:block;
position:absolute;
top: 0;
right: -1.2%;
}
</style>
<i class="line"/>Selesai tutorial saya saat ini. Jika ada pertanyaan, silahkan tanya pada kotak komentar dibawah ini. Terimakasih!
<i class="line-in"/>
Posting Komentar untuk "Tutorial css dan html cara membuat garis dengan gambar"
Berkomentar dengan sopan, dan Dilarang menanamkan Link pada komentar