CENTERING IMAGE CSS3

Centering Image CSS3 adalah teknik untuk membuat suatu gambar atau objek berada di tengah tengah sebuah bidang/layar. CSS3 merupakan kependekan dari kata cascades stylesheet versi III yang dalam dunia web, para developer atau web designer sudah tidak asing dengan akronim ini.

CSS digunakan untuk mempercantik sebuah tampilan web (front-end). Jadi, saat kamu membaca postingan ini, berarti kamu sedang menikmati hasil team wordpress bekerja dengan CSSnya. Centering Image adalah bagian dari CSS itu sendiri. Teknik ini harus dikuasai oleh kamu, atau kamu harus tau bagaimana sebuah gambar bisa berada di tengah tengah layar. Terdengar sederhana, namun pada praktiknya, jika kamu gak tahu caranya, yaaa.. gak akan bisa.

Kegunaan Centering Image CSS3

Centering image CSS berguna dan sangat membantu mempercantik halaman web. Perlu diperhatikan, image adalah sebuah objek dan dengan CSS objek dapat berada di tengah tengah layar. Maka objek lain seperti tekspun bisa juga di buat center/di pusat.

Catatan juga buat kamu, bahwa centering gak mesti harus di tengah-tengah layar/monitor. Bisa juga berada di tengah-tengah sebuah bidang yang dibuat pada layar.

 

HOW TO DO THAT?

Gunakan cara di bawah ini untuk membuatnya.

Misalkan saja, kita mempunyai skrip seperti di bawah ini.

<html>
    <head>
        <title>Centering image css3</title>
    <style>
        /*centering image css3 pada bagian ini*/
        img {
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 50%;
            border: 4px solid #222;
        }
    </style>
    </head>
    <body>
        <img src="kucing.jpg" alt="gambar_kucing_lucu">
    </body>
</html>

Dan kita ingin membuat objek gambar kucing.png berada di tengah-tengah layar.

Penampakan CSSnya seperti di bawah ini :

screenshot centering image css3
screenshot hasil centering image css3

Baca juga : Fetch Array MYSQL dengan PHP

Kesimpulan

untuk membuat sebuah objek berada di tengah tengah layar atau sebuah bidang. Kamu gunakan teknik centering image css3 dengan memperhatikan aspek di bawah ini :

  1. tampilkan objek ABSOLUTE (relative | absolute | fixed | inherite)
  2. posisikan dari atas dalam persen 50%
  3. posisikan dari kiri dalam persen 50%
  4. transformasikan posisi dengan  transform: translate (-50%,-50%);

Transformasi untuk beberapa browser berbeda seperti untuk Opera, Chrome, Mozilla, IE, Safari dan lainnya. Gunakan translate di bawah ini jika teknik di atas tidak bisa digunakan.

-webkit-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
     -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright Catatan Programmer Web 2017