Modifikasi Kode HTML & CSS Gambar / Image pada blog jadi lebih keren dan menarik

Hi brother. kali ini saya akan coba memberikan tutorial / Cara memasukan gambar ke dalam artikel / blog dengan kode HTML dan Mengedit Gambar pada artikel / postingan dengan CSS

langsung ajah yah,
cara nya simple kok

[

<img src="URL_GAMBAR" Title="keterangan gambar" alt="tag gambar"/>

]

Contoh Gambar

Nah bagaimana untuk mengedit / memodifikasi gambar agar lebih menarik lewat CSS ?
mari simak yah baik-baik Tutorial yang akan saya sampaikan di sini.
[post_ads]

[

/* dalam tag IMAGE atau img ada beberapa perintah yang bisa kita gunakan untuk modifikasi gambar
-------------------------*/

img {
border: 0px solid #666; /* ini untuk mengatur tepi gambar atau bentuk gambar mau persegi atau lingkaran*/
box-shadow:0px 0px 0px #666;/* bayangan pada gambar*/

/*filter*/
-webkit-filter:blur(1px)grayscale(0.4) sepia(0.5) brightness(0.6) contrast(0.6) hue-rotate(313deg) invert(0.4) saturate(2.8) drop-shadow(0px 0px 12px #808080);

/*transform*/
transform:rotate(66deg);
-ms-transform:rotate(66deg); /* IE 9 */
-webkit-transform:rotate(66deg); /* Opera, Chrome, and Safari */

}

]

Dari kode CSS di atas kita bisa merubah tampilan gambar sesuka hati kita
Nah .. untuk lebih jelas nya kita coba satu persatu kode nya dengan mengedit CSS nya yah ..

[post_ads_2]
Gambar di atas merupakan contoh Image yang kita edit melalui CSS, lalu bagaimana cara mengedit Gambar tanpa melalui CSS / langsung lewat HTML ?
mu0ngkin sebagian kakak merasa malas untuk mengedit css padahal lewat css kan lebih cepat dan simple sih sebenar nya 😀 cuma kalau kita lewat HTML kita bisa mengubah / memodifikasi gambar (IMG) pada artikel sesuka hati kita dengan tampilan yang berbeda cuma lumayan memakan waktu sih 😀
sebenar nya untuk memodifikasi gambar melalui HTML ini sangat lah mudah kita hanya perlu menambahkan perintah Style pada Tag <img agar lebih jelas lihat penulisan kode nya

[


/*kode tag Img default */

<img alt="" src="url_gambar" title="" /> /* biasakan untuk menambahkan Title dan Alt pada Tag IMG*/

/* modifikasi Img dengan menggunakan Style */

<img alt="" src="URL_gambar" style="background: #code_warna; border: 1px solid #blue; filter: Sepia(0.4); margin: 0; padding: 0;" title="" widht="20px" />

/* Intinya pada style itu kita bisa menambahkan semua perintah yang kita gunakan pada css / contoh gambar di atas. untuk lebih jelas nya silahkan di coba-coba lagi yah */

]

Bagaimana sudah paham kah cara memodifikasi kode HTML & CSS Gambar / Image (img) Pada Blog
Kalau masih bingun atau ada yang ingin di tanyakan silahkan beri komentar di bawah yah 😀

Labels: Blogger