CSS Dimensi

Fitur CSS Dimensi berfungsi untuk mengontrol tinggi dan lebar suatu elemen seperti gambar dan paragraf teks. Baik Mengatur tinggi dari suatu elemen dengan menggunakan persen, Mengatur lebar suatu elemen menggunakan nilai piksel, Mengatur tinggi dan lebar maksimum atau minimum suatu elemen.

Berikut contoh penggunaan Fitur CSS Dimensi pada gambar :

<style type="text/css">
img.normal {height:auto;}
img.kecil {height:10%;width:10%;}
img.besar {height:150px;width:150px;}
</style>

<img class="normal" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmm8ADl6qbfNe_G6Q8ncXBWckAksTPvAt4dIQkaBJv2W3jAP6GIACBddo59b8f7HhDD0JdMSS_LlObSb5bCTiOsOao5W7D6Z9bJWePWosa77PNDr6858Yx3sBzEXYcZ7V2jRyYc1qPj_uv/s100/css.jpg" />

<img class="kecil" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmm8ADl6qbfNe_G6Q8ncXBWckAksTPvAt4dIQkaBJv2W3jAP6GIACBddo59b8f7HhDD0JdMSS_LlObSb5bCTiOsOao5W7D6Z9bJWePWosa77PNDr6858Yx3sBzEXYcZ7V2jRyYc1qPj_uv/s100/css.jpg" />

<img class="besar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmm8ADl6qbfNe_G6Q8ncXBWckAksTPvAt4dIQkaBJv2W3jAP6GIACBddo59b8f7HhDD0JdMSS_LlObSb5bCTiOsOao5W7D6Z9bJWePWosa77PNDr6858Yx3sBzEXYcZ7V2jRyYc1qPj_uv/s100/css.jpg"/>

Berikut hasilnya :

Catatan : Untuk satuan nilai bisa menggunakan Pixel ataupun % , dan Ulr image silahkan anda ganti dengan milik anda.

Berikut contoh penggunaan Fitur CSS Dimensi pada Teks :

1. Lebar Maksimum

<style type="text/css">
div.Teks
{

max-width:150px;

}
</style>

<div class="Teks">Pada contoh ini teks menggunakan pengaturan lebar maksimum 150px, sehingga ruang yang digunakan teks ini tidak lebih dari 150px</div>

 Berikut hasilnya :

Pada contoh ini teks menggunakan pengaturan lebar maksimum 150px, sehingga ruang yang digunakan teks ini tidak lebih dari 150px

2. Tinggi Maksimum

<style type="text/css">
div.Teks-B
{
max-height:50px;
}
</style>

<div class="Teks">Pada contoh ini teks menggunakan pengaturan tinggi maksimum 50px, sehingga ruang yang digunakan teks ini tidak lebih dari 50px</div>

Berikut hasilnya :

Pada contoh ini teks menggunakan pengaturan tinggi maksimum 50px, sehingga ruang yang digunakan teks ini tidak lebih dari 50px.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Judul: CSS Dimensi; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Cara buat gallery dengan efek hover zoomingTambah lagi koleksi cara buat gallery. Berbeda dengan yang lalu, anda bisa lihat DISINI. Gallery yang ini lebih menarik dan cara kerjanya juga lebih enak dipandang. ... readmore
• Cara membuat TooltipTooltip adalah sebuah tool yang melekat pada sebuah link dan berfungsi memberikan keterangan atau petunjuk kepada pengunjung mengenai isi suatu dokumen atau sebuah ... readmore
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• Cara membuat efek shadow pada kotak dan gambar Penggunaan css3 memang menajubkan. Css3 merupakan pengembangan dari css 1 dan css 2. Keunggulan CSS3 memiliki banyak fitur. seperti shadow, transparansi, gradiasi ... readmore
• Edit Widget Popular Post Dengan Efek Melayang Modifikasi widget popular posts dengan efek tooltip pada ringkasan atau summary postnya. Trick ini saya dapat dari blognya MDF , dan saya mencoba untuk menshare ... readmore