Sedikit Info Seputar
5 Trik CSS yang Berguna untuk Desain Responsive
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul 5 Trik CSS yang Berguna untuk Desain Responsive, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel CSS, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
5 Trik CSS yang Berguna untuk Desain Responsive
Terbaru
link: 5 Trik CSS yang Berguna untuk Desain Responsive
Berbagi 5 Trik CSS yang Berguna untuk Desain Responsive Terbaru dan Terlengkap 2017
5 Trik CSS yang Berguna untuk Desain Responsive - Membuat desain untuk menjadi responsive sangat mudah seperti yang ditunjukkan dalam Desain Responsive saya hari ini, tetapi menjaga unsur-unsur untuk melihat estetis seimbang pada semua layout breakpoint adalah seni.
Hari ini Fajri Andaviar akan berbagi 5 Trik CSS yang Berguna untuk Desain Responsive, dengan contoh kasus untuk pengkodean desain responsive. Mereka adalah properti CSS sederhana seperti min-width, max-width, overflow, dan relative value - tapi sifat ini memainkan peranan penting dalam desain responsive.
Berikut CSS nya :
Max-Width Container
Dalam contoh di bawah ini, saya menentukan wadah untuk menampilkan pada 800px jika mungkin, tetapi tidak boleh melebihi 90% dari lebar batas.
Responsive Image (Gambar)
Sobat dapat membuat gambar otomatis mengubah ukuran dengan lebar maksimum batas dengan menggunakan max-width:100% dan height:auto.
Responsive gambar CSS di atas bekerja pada IE7 dan IE9, tetapi tidak bekerja pada IE8. Untuk memperbaikinya, tambahkan width:auto. Sobat dapat menerapkan CSS bersyarat khusus untuk IE8 atau gunakan IE hack di bawah ini:
Min-Width
Min-width berlawanan dengan max-width. Ini menentukan lebar minimum dari elemen. Dalam contoh bentuk di bawah ini, min-width digunakan pada bidang teks masukan untuk mencegah masukan dari pendapatan yang sangat kecil ketika skala bawah.
Relative Margin
Di bawah ini adalah contoh dari daftar komentar yang dimana margin kiri relative digunakan untuk ruang keluar komentar threaded. Alih-alih menggunakan nilai tetap pixel, saya menggunakan nilai persentase untuk ruang keluar sub-lists. Seperti ditunjukkan pada sisi kiri layar, kotak konten dalam sub-daftar menjadi sangat kecil pada resolusi mobile jika margin pixel kiri digunakan.
Relative Font Size
Dengan nilai relative (eg em Atau %), ukuran font, line-height dan jarak margin dapat diwariskan. Misalnya, saya dapat mengubah ukuran font pada semua elemen keturunan dengan hanya mengubah ukuran font pada elemen induk.
Relative Padding
Screenshot di bawah ini menunjukkan lebih baik menggunakan persentase padding relative dibandingkan dengan padding fixed pixel. Kotak di sebelah kiri menunjukkan ruang padding tidak seimbang jika pixel padding digunakan. Kotak dengan persentase padding di sebelah kanan menunjukkan bahwa daerah konten dimaksimalkan.
Hanya itu saja yang dapat saya bagikan hari ini, kurang lebihnya mohon maaf, Wassalam.
Hari ini Fajri Andaviar akan berbagi 5 Trik CSS yang Berguna untuk Desain Responsive, dengan contoh kasus untuk pengkodean desain responsive. Mereka adalah properti CSS sederhana seperti min-width, max-width, overflow, dan relative value - tapi sifat ini memainkan peranan penting dalam desain responsive.
1. Responsive Video
Video CSS trik responsive ini ditemukan oleh tjkdesign.com. Itu membuat embed video memperluas lebar penuh untuk batas.Berikut CSS nya :
.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%;
}2. Min & Max Width
Properti max-width memungkinkan Sobat untuk mengatur lebar max elemen. Tujuan max-width ini untuk mencegah elemen dari memperluas batasannya.Max-Width Container
Dalam contoh di bawah ini, saya menentukan wadah untuk menampilkan pada 800px jika mungkin, tetapi tidak boleh melebihi 90% dari lebar batas.
.container {
width: 800px;
max-width: 90%;
}Responsive Image (Gambar)
Sobat dapat membuat gambar otomatis mengubah ukuran dengan lebar maksimum batas dengan menggunakan max-width:100% dan height:auto.
img {
max-width: 100%;
height: auto;
}Responsive gambar CSS di atas bekerja pada IE7 dan IE9, tetapi tidak bekerja pada IE8. Untuk memperbaikinya, tambahkan width:auto. Sobat dapat menerapkan CSS bersyarat khusus untuk IE8 atau gunakan IE hack di bawah ini:
@media \0screen {
img {
width: auto; /* for ie 8 */
}
}Min-Width
Min-width berlawanan dengan max-width. Ini menentukan lebar minimum dari elemen. Dalam contoh bentuk di bawah ini, min-width digunakan pada bidang teks masukan untuk mencegah masukan dari pendapatan yang sangat kecil ketika skala bawah.
 |
| Ilustrasi min-width |
3. Relative Value
Dalam desain responsif, mengetahui kapan harus menggunakan nilai relative dapat menyederhanakan CSS dan memaksimalkan hasil tata letak yang terbaik. Berikut adalah beberapa contoh.Relative Margin
Di bawah ini adalah contoh dari daftar komentar yang dimana margin kiri relative digunakan untuk ruang keluar komentar threaded. Alih-alih menggunakan nilai tetap pixel, saya menggunakan nilai persentase untuk ruang keluar sub-lists. Seperti ditunjukkan pada sisi kiri layar, kotak konten dalam sub-daftar menjadi sangat kecil pada resolusi mobile jika margin pixel kiri digunakan.
 |
| Ilustrasi margin-left pada baris daftar komentar |
Relative Font Size
Dengan nilai relative (eg em Atau %), ukuran font, line-height dan jarak margin dapat diwariskan. Misalnya, saya dapat mengubah ukuran font pada semua elemen keturunan dengan hanya mengubah ukuran font pada elemen induk.
 |
| Ilustrasi Relative Font Size |
Relative Padding
Screenshot di bawah ini menunjukkan lebih baik menggunakan persentase padding relative dibandingkan dengan padding fixed pixel. Kotak di sebelah kiri menunjukkan ruang padding tidak seimbang jika pixel padding digunakan. Kotak dengan persentase padding di sebelah kanan menunjukkan bahwa daerah konten dimaksimalkan.
 |
| Ilustrasi Relative Padding |
4. Trik Overflow:Hidden
Trik ini sangat berguna, Sobat dapat menghapus float dari elemen sebelumnya dan menyimpan konten berjalan dalam wadah(container) dengan menerapkan overflow:hidden. |
| Ilustrasi Overflow:Hidden |
5. Word-Break (Menjeda Kata)
Disini Saya juga berbicara tentang properti word-wrap sebelumnya. Anda dapat memaksa teks unbreaking (misalnya. Panjang URL teks) untuk membungkus bukan berjalan dalam satu baris..break-word {
word-wrap: break-word;
} |
| Ilustrasi Word-Break |
Hanya itu saja yang dapat saya bagikan hari ini, kurang lebihnya mohon maaf, Wassalam.
Itulah sedikit Artikel 5 Trik CSS yang Berguna untuk Desain Responsive terbaru dari kami
Semoga artikel 5 Trik CSS yang Berguna untuk Desain Responsive yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca 5 Trik CSS yang Berguna untuk Desain Responsive