Tutorial CSS 9 : Pengaturan Properti Gambar di CSS

0 0 Minggu, 09 Oktober 2016 Edit this post

Tutorial CSS 9 menjelaskan kepada anda bagaimana Pengaturan Properti Gambar di CSS sehingga akan menghasilkan tampilan gambar yang sesuai dengan keinginan.

Tutorial CSS 9 menjelaskan kepada anda bagaimana Pengaturan Properti Gambar di CSS sehingga akan menghasilkan tampilan gambar yang sesuai dengan keinginan.  Gambar memainkan peran penting dalam halaman Web manapun. Meskipun tidak dianjurkan untuk menyertakan banyak gambar, tetapi masih penting untuk menggunakan gambar yang baik di mana pun diperlukan.

CSS memainkan peran yang baik untuk mengontrol tampilan gambar. Anda dapat mengatur properti gambar berikut dengan menggunakan CSS.

  • Properti border digunakan untuk mengatur lebar perbatasan gambar.
  • Properti height digunakan untuk mengatur ketinggian gambar.
  • Properti width digunakan untuk mengatur lebar gambar.
  • Properti moz-opacity digunakan untuk mengatur opacity dari suatu gambar.

Properti Border Gambar

Properti border dari suatu gambar digunakan untuk mengatur lebar border gambar. Properti ini dapat memiliki nilai panjang atau%. Sebuah lebar nol piksel berarti tidak ada batas.

 Berikut adalah contoh -
<html>
   <head>
   </head>
   <body>
      <img style="border:0px;" src="/css/images/logo.png" />
      <br />
      <img style="border:3px dashed red;" src="/css/images/logo.png" />
   </body>
</html>
Ini akan menghasilkan hasil sebagai berikut -

Properti Tinggi Gambar

Properti tinggi suatu gambar digunakan untuk mengatur ketinggian gambar. Properti ini dapat memiliki nilai panjang atau%. Sementara memberikan nilai dalam%, berlaku dalam hal kotak di mana gambar tersedia.
Berikut adalah contoh -
<html>
   <head>
   </head>
   <body>
      <img style="border:1px solid red; height:100px;" src="/css/images/logo.png" />
      <br />
      <img style="border:1px solid red; height:50%;" src="/css/images/logo.png" />
   </body>
</html>
Ini akan menghasilkan hasil sebagai berikut -

Properti Lebar Gambar

Properti width dari suatu gambar digunakan untuk mengatur lebar gambar. Properti ini dapat memiliki nilai panjang atau%. Sementara memberikan nilai dalam%, berlaku dalam hal kotak di mana gambar tersedia.
Berikut adalah contoh :
<html>
   <head>
   </head>
   <body>
      <img style="border:1px solid red; width:150px;" src="/css/images/logo.png" />
      <br />
      <img style="border:1px solid red; width:100%;" src="/css/images/logo.png" />
   </body>
</html>
Ini akan menghasilkan hasil sebagai berikut:

Properti Moz-opacity

Properti moz-opacity dari suatu gambar digunakan untuk mengatur opacity dari suatu gambar. Properti ini digunakan untuk membuat gambar transparan di Mozilla. IE menggunakan filter: alpha (opacity = x) untuk membuat gambar transparan.

 Dalam Mozilla (-moz-opacity: x) x dapat menjadi nilai 0,0-1,0. Sebuah nilai yang lebih rendah membuat elemen lebih transparan (Hal yang sama berlaku untuk sintaks opacity CSS3-valid: x).

 Dalam IE (filter: alpha (opacity = x)) x dapat menjadi nilai dari 0 - 100. Sebuah nilai yang lebih rendah membuat elemen lebih transparan.
Berikut adalah contoh:
<html>
   <head>
   </head>
   <body>
      <img style="border:1px solid red;-moz-opacity:0.4;filter:alpha(opacity=40);" src="/css/images/logo.png" />
   </body>
</html>
Ini akan menghasilkan hasil sebagai berikut:

Label:

SHARE:

Twitter Facebook Google Pinterest

COMMENTS

BLOGGER
DISQUS
Nama

5G,2,8085,4,A Theory of Human Motivation,1,Administrasi Server,40,Adware,1,akuntansi,4,Alat Penguji Software,1,Algoritma,5,Algoritma Genetika,1,alkali tanah,1,Aluminium,1,Analis Kimia,3,Analisis Asimtotik,1,Android,5,Antenna,17,Antivirus,6,Aplikasi,20,Apps,1,Arduino,44,Aresnik,1,Array,1,Arsitektur Komputer,6,Arsitelktur Komputer,1,artikel,3,asam dan basa,2,atom,2,avogadro,1,bandwith,2,bash,2,Berita,10,BinProxy,1,biologi,1,boron,1,Bridge,1,Browser,2,Cahaya,1,catatan Hanibal Wijayanta,5,centos,2,Chrome Vanadium,1,CodeIgniter,7,cpu,1,CSS,18,CSS3,13,dasar akuntansi,4,Dasar Elektronika,23,Dasar Pengalamatan IPV6,8,dasat atom,1,Database,20,dhcp,1,DNS,1,Efek Hall,1,efek tyndall,1,Electrical circuit,1,electronica,1,Elektromagnet,1,Elektromagnetik,1,elektron,1,Elektronika,105,Elektronika Digital,51,elektronika komunikasi,1,energi,1,energi terbarukan,1,English Lecturer,1,enkripsi,1,Excel,10,expressjs,11,Firewall,2,Fisika,9,Forensik Digital,1,game,1,gelombang radio,1,Generator Listrik AC,1,Gerbang Logika,4,germanium,1,Google Chrome,2,grafik excel,1,gzip deflate,1,halogen,1,handbrake,1,Hanibal Wijayanta,7,Hardware,14,Headline,13,Helium,1,Hidrogen,1,hirarki kebutuhan maslow,1,hotspot,3,HTML,1,http,1,https,1,induktansi,2,induktor,4,Informasi,1,Inovasi,1,Internet,9,ipa,1,Iphone,1,ipv6,11,isotop,1,Jaringan Dasar,26,Jaringan Komputer,32,javascript,11,jquery,3,Kajian Islam,1,kalsium,1,Kapasitor,5,kapasitor elektrolit,1,kapasitor polarized,1,Kapasitor-tetap,1,kapasitor-variabel,1,karbon,1,Keamanan Internet,3,Keamanan Jaringan,24,Keamanan Komputer,1,Kemanan Internet,1,Kemanan Komputer,1,kernel,1,Kimia,40,kimia dasar,33,Klinik Virus,1,Komponen Elektronika,1,Komputer,12,Komputer Dasar,1,Komputer Terapan,59,Komunikasi,2,Komunikasi Data,11,kondensator,1,kromosom,1,lapbook,1,Laptop,1,Laptop gaming,1,Laravel,3,layer aplikasi,1,Layer Network,1,linux,9,LTE,4,macbook,1,Makro,6,Malware,6,Manajemen Router,1,mariadb,1,Masri Sitanggang,1,Matematika,1,Media Belajar,1,Media Transmisi,4,Mendikbud,1,merkuri,1,microsoft,1,Mikrokontroller,3,mikroskop elektron,1,Mikrotik,10,Mobile,8,modulasi,1,mojok,13,Mojok Bersama Danang,7,mojok. opini,1,motivasi,5,Multimedia,4,Mysql,19,Nasional,8,nginx,2,Nirkabel,1,nitrogen,2,nukleus,1,oauth,2,Office,5,oksidasi,1,opini,4,oracle,2,pemantulan,1,Pembiasan,1,Pemrograman,14,Pemrograman Android,1,Pemrograman Dasar,11,Pemrograman PHP,9,Pemrograman Shell,8,Pemrograman Web,42,Pendidikan,5,Penistaan,1,Perakitan Komputer,13,Permrograman PHP,1,Persamaan Linier,1,ph,1,PHP,11,PHP Framework,1,Physics,1,Power Supply,1,Pramuka,1,Processor,1,Propagasi,1,proses akuntansi,1,proteksi PDF,1,putty,1,Python,1,Rancang Bangun Jaringan,1,Rancang Bangun Jaringan LAN,2,Rancang Bangun Jaringan WAN,1,ransomware,2,reduksi,1,rehat,1,repository,1,Resistor,5,rip dvd,2,Router,2,s7,1,samsung,1,santai,1,sariroti,1,screencapture,1,sejarah,1,sejarah indonesia,2,Seluler,1,Semikonduktor,3,siklus akuntansi,1,silikon,1,Simulasi Digital,16,Sinyal,5,sirkuit,1,Sirkuit kapasitor,1,Sistem Komputer,8,Sistem Operasi,6,Sistem Operasi Jaringan,21,softskill,5,solar energy,1,spektroskopi,1,Spoofing,1,spu,5,SSH,1,STP,1,Struktur Data,2,Switch,1,switching,1,Teknologi,6,Teknologi Nirkabel,41,telkom,1,TestingWhiz,1,The dude,1,tipe konduktor,1,Tips dan Trik,21,Topologi,1,traffic light,1,transformator,4,Troubleshooting,1,Ubuntu,3,Unix,12,unsur,2,update,2,upgrade routeros,1,user manager,1,userman,1,Vanadium,1,variabel,1,variabel-kapasitor,1,VBA,7,vicon,1,video,1,Video Conference,1,virus,1,vlan,2,vlc,1,vpn,1,Wannacry,1,Warna,1,Webcam,1,Webmaster,51,webserver,1,wifi,1,Windows,11,WIndows 10,14,windows apps,1,Windows Explorer,1,Wireless,17,Wordpress,2,XII,1,XIITKJ,98,XITKJ,86,XTKJ,94,ybc,1,yum,1,
ltr
item
MasAgungLearning: Tutorial CSS 9 : Pengaturan Properti Gambar di CSS
Tutorial CSS 9 : Pengaturan Properti Gambar di CSS
Tutorial CSS 9 menjelaskan kepada anda bagaimana Pengaturan Properti Gambar di CSS sehingga akan menghasilkan tampilan gambar yang sesuai dengan keinginan.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIQBtxEybpmUHdSbRpPL2_33rteboZdFwbWI7ke3WZ_TmiQYbTaY7PSG2fr7mtO3ciFsz3evCMOvrKXB1vf605VKI6Jmub8B7XipoPSDHYRv6IyVl3phfZ6y8aGfEH0PDh8_RyQQ_dNz6/s320/CSS3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIQBtxEybpmUHdSbRpPL2_33rteboZdFwbWI7ke3WZ_TmiQYbTaY7PSG2fr7mtO3ciFsz3evCMOvrKXB1vf605VKI6Jmub8B7XipoPSDHYRv6IyVl3phfZ6y8aGfEH0PDh8_RyQQ_dNz6/s72-c/CSS3.png
MasAgungLearning
https://masagunglearning.blogspot.com/2016/10/pengaturan-properti-gambar-di-css.html
https://masagunglearning.blogspot.com/
https://masagunglearning.blogspot.com/
https://masagunglearning.blogspot.com/2016/10/pengaturan-properti-gambar-di-css.html
true
3233199725437061161
UTF-8
Load Semua Posting Tidak ditemukan satupun LIHAT SEMUA Baca Lanjut Ulang Gagalkan Mengulang Hapus Oleh Home HALAMAN POSTING Lihat Semua DIREKOMENDASIKAN ANDA KATEGORI ARSIP PENCARIAN SEMUA POSTING Tidak ditemukan post apapun yang sesuai dari yang anda minta Kembali Ke Beranda Minggu Senin Selasa Rabu Kamis Jum'at Saturday Sun Mon Tue Wed Thu Fri Sat Januari Februari Maret April Mei Juni Juli Agustus September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy