Web pribadi juga bisa membuat halaman statis berisi galeri atau koleksi gambar pilihan.
Cara membuatnya cukup mudah, dan biasanya masalah yang sering ditemui jika kita memasukkan gambar lebih dari satu, maka posisi gambar tidak akan sejajar horizontal, tapi akan berderet vertikal.
Tutorial kali ini saya akan membagikan solusinya, mau tau ?
copas kode dibawah :
| <html> <head> | |
| <title>Galeri</title> | |
| <style type="text/css"> | |
| <!-- | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background: #333; | |
| } | |
| div { | |
| width: 900px; | |
| margin: 0 auto; | |
| overflow: auto; | |
| } | |
| ul { | |
| list-style-type: none; | |
| } | |
| li img { | |
| float: left; | |
| margin: 10px; | |
| border: 5px solid #fff; | |
| -webkit-transition: box-shadow 0.5s ease; | |
| -moz-transition: box-shadow 0.5s ease; | |
| -o-transition: box-shadow 0.5s ease; | |
| -ms-transition: box-shadow 0.5s ease; | |
| transition: box-shadow 0.5s ease; | |
| } | |
| li img:hover { | |
| -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); | |
| box-shadow: 0px 0px 7px rgba(255,255,255,0.9); | |
| } | |
| --> | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <ul> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| <li><img src="150x150.gif"></li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
Jadinya bakal seperti gambar
Semoga Bermanfaat !
0 comments:
Post a Comment