5 Trik Menarik untuk Responsive DesignBy Arul Ajeh - Hay berjumpa lagi sahabat setia ATC Arul Ajeh, Pada Artikel kali ini dengan judul 5 Trik Menarik untuk Responsive DesignBy Arul Ajeh, kami telah menyiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi artikel Artikel Web Programming, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : 5 Trik Menarik untuk Responsive DesignBy Arul Ajeh
link : 5 Trik Menarik untuk Responsive DesignBy Arul Ajeh

5 Trik Menarik untuk Responsive DesignBy Arul Ajeh

Membuat desain menjadi responsif sangatlah mudah, tetapi menjaga elemen agar terlihat seimbang pada semua layout merupakan seni tersendiri. Pada artikel ini saya akan berbagi 5 trik CSS yang umum digunakan beserta contoh kasus untuk koding desain responsif. Trik ini memerlukan properti-properti CSS yang sederhana seperti min-width, max-width, overflow, dan nilai relatif – tetapi properti ini memainkan peranan penting dalam desain responsif.

DEMO

Responsive Video

Trik CSS responsif untuk video ini pertama kali disampaikan oleh tjkdesign.com.

01

.video {

02	position: relative;

03	padding-bottom: 56.25%;

04	height: 0;

05	overflow: hidden;

06

}

07

08	.video iframe,

09	.video object,

10	.video embed {

11	position: absolute;

12

top: 0;

13

left: 0;

14	width: 100%;

15	height: 100%;

16

}

Min & Max Width

Properti max-width memungkinkan Anda untuk mengatur lebar maksimal dari elemen. Tujuannya adalah untuk mencegah elemen melewati batas maksimal yang ditentukan.
Max-Width Container
Pada contoh di bawah ini, kita menentukan container untuk menampilkan lebar 800px jika memungkinkan, tapi tidak melebihi 90% dari lebar dari parent element-nya.

1	.container {

2	width: 800px;

3	max-width: 90%;

4

}

Responsive Image
Anda dapat membuat auto resize pada sebuah gambar dengan menentukan batas lebar maksimum dengan menggunakan max-width: 100% dan height: auto

1

img {

2	max-width: 100%;

3	height: auto;

4

}

CSS responsif untuk gambar di atas bekerja pada IE7 dan IE9, tetapi tidak pada IE8. Untuk memperbaikinya, tambahkan width: auto. Anda dapat menerapkan conditional comment untuk IE8 atau menggunakan hack di bawah ini:

1	@media \0screen {

2

img {

3	width: auto; /* for ie 8 */

4

}

5

}

Min-Width
Min-width merupakan kebalikan dari max-width. Property ini digunakan untuk menentukan lebar minimum dari suatu elemen. Dalam contoh di bawah, min-width digunakan pada input teks untuk mencegah lebar yang terlalu kecil pada layar sempit.

Relative Values

Dalam desain responsif, menggunakan nilai relatif dapat menyederhanakan CSS dan memaksimalkan hasil layout yang baik. Berikut beberapa contohnya:
Relative Margin
Di bawah ini adalah contoh dari daftar komentar yang menggunakan nilai relatif untuk margin setiap komentar.

Relative Font Size
Dengan nilai relatif (misalnya em atau%), ukuran font, line-height dan margin dapat digunakan untuk mempermudah pengaturan setiap child elemen. Sebagai contoh, kita bisa mengubah ukuran font pada semua child element dengan hanya mengubah font-size pada parent elemennya.

Relative Padding
Screenshot di bawah ini menunjukkan penggunaan padding dengan nilai relatif lebih baik dibandingkan dengan menggunakan ukuran pixel. Kotak di sebelah kiri menunjukkan padding yang tidak seimbang jika ukuran pixel digunakan. Sedangkan kotak denga padding bernilai relatif di sebelah kanan menunjukkan bahwa area konten dapat dimaksimalkan.

Trik Overflow:hidden

Anda dapat menghilangkan sifat float hanya dengan properti overflow: hidden.

Word-break

Anda bisa memotong teks yang terlalu panjang dalam baris lain dengan properti break-word.

1	.break-word {

2	word-wrap: break-word;

3

}

Sumber: http://webdesignerwall.com

Selesai deh Artikel 5 Trik Menarik untuk Responsive DesignBy Arul Ajeh

Sekian dulu ya artikel 5 Trik Menarik untuk Responsive DesignBy Arul Ajeh kali ini, Semoga bisa memberi manfaat untuk kalian semua. Oke, sampai berjumpa lagi di artikel lainnya.

Anda saat ini membaca artikel 5 Trik Menarik untuk Responsive DesignBy Arul Ajeh dengan url http://advancedteamcode.blogspot.com/2014/04/5-trik-menarik-untuk-responsive.html

Tweet