5 Trik Menarik untuk Responsive Design
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.
Responsive Video
Trik CSS responsif untuk video ini pertama kali disampaikan oleh tjkdesign.com.
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
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.
.container {
width: 800px;
max-width: 90%;
}
Responsive Image
Anda dapat membuat auto resize pada sebuah gambar dengan menentukan batas lebar maksimum dengan menggunakan max-width: 100% dan height: auto
img {
max-width: 100%;
height: auto;
}
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:
@media \0screen {
img {
width: auto; /* for ie 8 */
}
}
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.
.break-word {
word-wrap: break-word;
}
Sumber: http://webdesignerwall.com
lumayan nih buat tambah skill css
bookmark dulu
keren mastah, makasihnya udah ngasih triknya. wow responsive