Photo Images Layout

Ada beberapa aturan dalam memposting gambar dengan HTML agar nampak lebih menarik.

Standard Image (no lightbox)

Rumah kayu di tepi kanal di Amsterdam

Lightbox

Menambahkan Fitur lightbox yang berkerja secara tomatis dengan cara overlay yang menutupi halaman web utama dengan blur, sehingga pengguna dapat melihat gambar dengan jelas

Lightbox ini hanya berkerja didalam class Parent Element biasa disebut (elemen induk) saya membuat beberapa class elemen induk untuk postingan gambar sebagai berikut: lbx, separator, psImg, btImg, galWrp, tr-caption-container yang memiliki gaya letak yang berbeda-beda

    <div class="lbx">
      <img alt="image_caption" class="full c n sz" src="image_link" />
    </div>
   

Child Element

Dalam HTML, class elemen anak adalah elemen yang berada di dalam class elemen induk. Elemen induk adalah elemen yang menampung elemen anak.

• Menambahkan class c pada tag img akan menampilkan nilai alt sebagai caption Gambar dalam lightbox.
• Menambahkan class sz "Size" pada tag img berfungsi untuk mengubah ukuran gambar saat lightbox dimuat atau gambar diklik.
• Menambahkan class full pada tag img akan menghilangkan margin antara gambar dan layar, sehingga tetrlihat penuh pada payar, hanya berlaku untuk tampilan mobile.
• Menambahkan class n pada tag img untuk menonaktifkan nilai alt gambar dan menonaktifkan caption dalam lightbox.

Pigure Small Images(psImg)

Gambar ini dibungkus dengan Elemen Induk figure didalamnya ada class psImg lalu ditambahkan property figcaption untuk menampilkan keterangan gambar yang diletakkan di samping elemen gambar

<figure class="psImg">
  <img class="c" src="link_images.jpg" alt="caption">
  <figcaption>deskripsi_images</figcaption>
</figure>

Herengracht maupun Prinsengracht adalah dua dari tiga kanal di Amsterdam. Kanal-kanal ini dibangun pada abad ke-17 pada masa Zaman Keemasan Belanda.

Standar Images Separator (Lightbox)

lightbox tr-caption-container + Full c sz

Westermoskee Ayasofya Camii adalah sebuah masjid di Amsterdam, Belanda. Masjid ini dibangun pada tahun 2013 dan dirancang oleh arsitek Prancis Marc dan Nada Breitman

Menambahkan Label Caption (lbx)

    <div class="lbx">
      <img alt="image_caption" class="full c n sz" src="image_link" />
      <p class="caption">Windmill, Amsterdam Canal.</p>
    </div>   
   

Label caption adalah teks yang menjelaskan atau memberikan informasi lebih lanjut tentang suatu gambar atau foto. Label caption biasanya ditempatkan di bawah gambar atau foto.

Windmill, Amsterdam Canal.

Button Title Images (btImg)

Menambahkan class "full" ke tag img berfungsi untuk menghilangkan margin antara gambar dan layar, tetapi hanya berfungsi pada tampilan perangkat seluler.

Automatic image captions and lightboxes

Scroll Layout (galWrp)

Dengan Scroll layout to right digunakan untuk memberi efect tindakan dengan menggulir tata letak ke kanan dengan beberapaukuran: h150, h200, h250, Hal ini dapat dilakukan agar tampilan web lebih menarik dan tata letak lebih rapi.

Scroll Layout galWrp h150

Scroll Layout galWrp h250

Images with Grid Layout

Grid layout class psImg grImg membagi ruang menjadi baris dan kolom untuk menentukan ukuran dan jumlah baris dan kolom dalam grid Areas yang dapat membagi gambar menjadi area-area yang lebih kecil yang dapat Anda beri nama, Area-area ini juga dapat digunakan untuk mengatur posisi elemen-elemen dalam grid Alignmen yang mengatur posisi elemen-elemen dalam grid secara horizontal dan vertikal.

Images with Show All Function

Lihat Lainnya

Added a scroll or slider function to right images that will only be active in mobile view.

CSS SLIDER

CSS Slider adalah teknik penataan gambar dengan menggabungkan efek visual untuk membuatnya lebih menarik dan dinamis dalqm halaman web dengan code CSS Efek-efek ini bisa berupa transisi perpindahan antar foto, filter warna, animasi gerakan, atau overlay dalam halaman Website

Efect foto slider ini hanya dibuat dengan menggunakan CSS saja tanpa JavaScript. Hal ini memiliki beberapa keuntungan yaitu lebih cepat, lebih ringan dan lebih mudah.

Semangat Pagi

Liar Biasa

Perubahan Hidup

Jangan Menyerah

Semangat Pagi

Liar Biasa

Perubahan Hidup

Jangan Menyerah

42

13

24

31

1 2 3 4

Tips

Elemen Fhoto Ini hanya dapat mengisi 4 lembar Gambar saja, jika ingin gambar lebih banyak maka kamu harus merubah cssnya

Images with Polaroid

polaroid adalah gaya fotografi yang menggunakan teknik dan efek untuk menciptakan tampilan khas polaroid. Gaya ini sering menggunakan tepi putih, warna cerah, dan efek vintage.

Berikut adalah beberapa efek yang sering digunakan dalam images styling polaroid hanya dengan CSS

• 

  Amsterdam, Vessel

• 

  Stasiun Centraal

• 

  Amsterdam, Canal

• 

  Holland, Netherlands

• 

  Zaanse Schans, Zaandam

---

Baca Juga