Berikan efek foto dengan HTML

HTML dan CSS

Hyper Text Markup Language (HTML atau dalam bahasa Spanyol "bahasa tanda hypertext") adalah bahasa penulis umum yang digunakan oleh pengembang web untuk membuat situs web statis. Struktur halaman web dibuat dengan HTML. Meskipun bagus dalam membuat kerangka proyek web Anda, itu tidak begitu baik untuk menggunakannya sebagai gaya atau efek. Untuk ini, cascading style sheets (CSS) digunakan dan dilengkapi dengan HTML Anda, ini memungkinkan Anda untuk menambahkan elemen dan gaya grafis ke halaman web Anda. Misalnya, jika Anda ingin membuat teks tampak tebal di semua judul setiap halaman, Anda dapat melakukannya dengan CSS

Opasitas gambar

Salah satu efek grafis yang paling umum adalah opasitas. Opacity menentukan tingkat transparansi suatu gambar yang ditemukan di situs. Jika Anda ingin meletakkan gambar latar belakang pada halaman web Anda dan Anda perlu mengurangi opacity untuk menciptakan efek yang lebih transparan, Anda dapat melakukannya dengan CSS. Tempatkan kode CSS yang sesuai di tag HTML :

Dalam contoh ini, opacity pada "50" didefinisikan, sehingga mengurangi visibilitas gambar halaman web hingga setengahnya.

"Mouse over" efek

Anda dapat memiliki efek opacity satu langkah lebih jauh dan mengubah opacity foto ketika kursor pengguna melewatinya. Ini adalah efek "mouse-over". Kode ini mirip dengan perubahan opasitas sederhana dan juga ditempatkan di dalam tag HTML . Ini adalah efek yang bagus menggunakan tombol navigasi.

Anda dapat melihat perintah "onmouseout" dan "onmouseover". Saat memuat halaman, kode ini mengurangi opasitas gambar sebesar% 50, ketika Anda meneruskan kursor di atasnya meningkat menjadi% 100, ketika Anda mengambil kursus, gambar dikurangi lagi menjadi% 50.

Float (float)

"Float" adalah efek HTML dan CSS sederhana lainnya untuk sebuah foto. The "float" menentukan di mana gambar akan muncul dalam tabel, sel atau dokumen. Perintah "float" menggunakan properti kiri, kanan, dan tengah. Anda dapat menggunakan ini, baik untuk menempatkan gambar di dalam teks atau untuk membuat serangkaian gambar yang ditempatkan dengan benar di galeri. Anda dapat menentukan ini dalam tag kepala HTML sebagai berikut:

Pada contoh sebelumnya, itu menunjukkan bahwa semua elemen HTML dengan tag melayang ke kiri di dokumen.