Tag Archives: Trik CSS

Bagaimana Cara Membuat Zebra Striped Table

APPKALSEL.com | Developer Aplikasi Kalimantan Selatan | Assalamu’alaikum Wr.Wb.

Zebra Striped Table adalah tampilan tabel yang memiliki warna baris silih berganti. Tujuan dari konsep desain tabel dengan warna baris yang silih berganti ini adalah untuk memudahkan pengguna menyusuri data pada setiap baris hingga jauh ke sisi kanan tabel tanpa melenceng ke baris di atas atau di bawahnya.

<table>
	<thead>
		<tr>
			<td>Kolom 1</td>
			<td>Kolom 2</td>
			<td>Kolom 3</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1.</td>
			<td>Baris Pertama Kolom 2</td>
			<td>Baris Pertama Kolom 3</td>
		</tr>
		<tr>
			<td>2.</td>
			<td>Baris Kedua Kolom 2</td>
			<td>Baris Kedua Kolom 3</td>
		</tr>
		<tr>
			<td>3.</td>
			<td>Baris Ketiga Kolom 2</td>
			<td>Baris Ketiga Kolom 3</td>
		</tr>
	</tbody>
</table>

Untuk membuat tampilan tabel dengan warna baris silih berganti (Zebra Striped Table), anda hanya tinggal menambahkan beberapa baris styling CSS.

/* CSS: Tabel Zebra Style */
table tbody tr:nth-child(even){
	background: #CCCCCC; /* = Kita mencoba menggunakan kode warna Abu-abu */
}

Implementasi

Penerapan Trik CSS Membuat Tabel Bermotif Zebra ini dapat dilihat di Link DEMO. Anda juga dapat mencoba sendiri Trik CSS Membuat Tabel Bermotif Zebra ini dengan mengunduh Source Code di Link DOWNLOAD

Untuk membuat Tampilan (User Interface) yang lebih menarik pada Trik CSS Membuat Tabel Bermotif Zebra (Zebra Striped Table) ini, anda dapat memainkan Trik CSS sesuai keinginan anda. Untuk referensi, kami juga membagikan beberapa Trik CSS yang mungkin menarik untuk anda.

• Baca: Tips dan Trik Coding
• Baca: Aplikasi-aplikasi yang telah kami kembangkan
• Baca: Kumpulan Source Code

Penjelasan

Maaf! Saya tidak menberikan penjelasan secara detail tentang Trik CSS Membuat Tabel Bermotif Zebra (Zebra Striped Table) ini. Kita dapat membahasnya sama-sama di Kolom Komentar.

Bagaimana Cara Membuat Background Video

APPKALSEL.com | Developer Aplikasi Kalimantan Selatan | Assalamu’alaikum Wr.Wb.

Cara membuat background video di halaman website atau aplikasi berbasis web, sedikit berbeda dengan membuat background warna atau image. Membuat background video tidak menggunakan style=”background” seperti yang biasa digunakan untuk membuat background warna atau gambar (image URL).

<!-- Background Warna (Merah) -->
<div style="background: #FF0000;">
    <div>Konten</div>
</div>
<!-- Background Image -->
<div style="background: url(nama-file.png);">
    <div>Konten</div>
</div>

Untuk membuat Background video kita menggunakan Tag <video></video>.

<video autoplay muted loop >
	<source src="video.mp4" type="video/mp4">
</video>

Kita berikat sedikit sentuhan CSS untuk Tag <video></video> tersebut

video{
	right: 0;
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
}

Implementasi

Penerapan Trik CSS Membuat Background Video ini dapat dilihat di Link DEMO. Anda juga dapat mencoba sendiri Trik CSS Membuat Background Video ini dengan mengunduh Source Code di Link DOWNLOAD

Untuk membuat Tampilan (User Interface) yang lebih menarik pada Trik CSS Membuat Background Video ini, anda dapat memainkan Trik CSS sesuai keinginan anda. Untuk referensi, kami juga membagikan beberapa Trik CSS yang mungkin menarik untuk anda.

• Baca: Tips dan Trik Coding
• Baca: Aplikasi-aplikasi yang telah kami kembangkan
• Baca: Kumpulan Source Code

Penjelasan

Maaf! Saya tidak menberikan penjelasan secara detail tentang Trik CSS Membuat Background Video ini. Kita dapat membahasnya sama-sama di Kolom Komentar.