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:


Perintah berikutnya adalah dengan cara menciptakan kode css yang nantinya akan kita applikasikan di website kita masing – masing.
Pasanglah kode css dibawah ini diatas </header> web atau blog anda

<style>
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>
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 class="line"/>
<i class="line-in"/>
Selesai tutorial saya saat ini. Jika ada pertanyaan, silahkan tanya pada kotak komentar dibawah ini. Terimakasih!

Belum ada Komentar untuk "Tutorial css dan html cara membuat garis dengan gambar"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel