Steps To Make Online Photo Gallery #7

Steps To Make Online Photo Gallery #7

Photo Gallery CSS Static Effects





CSS effects static photo gallery is a photo gallery are arranged in sequence in a single window with a static order. In this chapter will discuss :

• The process of setting up the database and tables
• Making the simple photo gallery
• Making the zoom effect photo gallery
• Making the rotation effect photo gallery
• Making the balloon photo gallery
• Making the photo gallery zoom and rotation

Simple Photo Gallery

The next step is to add the style using CSS script to beautify the "index.php" page. Type the following CSS script and save it with the name "all.css".

Script CSS 1 :

/* CSS - Author : Heru Kurniawan */ body{ background:#222; font:100% Verdana, Ganeva, sans-serif; color:#ccc; font-size:12px; } #menu{ font-size:16px; width:100%; height:50px; position:fixed; margin:-66px 0px 0px 10px; } #menu ul{ width:100%; height:50px; padding-left:200px; display:block; background:-moz-linear-gradient(top, #0cf 0%, #09C 100%); background:-webkit-linear-gradient(top, #0cf 0%, #09C 100%); background:-o-linear-gradient(top, #0cf 0%, #09C 100%); background:-ms-linear-gradient(top, #0cf 0%, #09C 100%); background:linear-gradient(top, #0cf 0%, #09C 100%); border-bottom:5px solid #333; } #menu ul li{ text-align:center; margin:0px 0px 0px 0px; position:relative; top:0px; float:left; width:120px; padding:16px; display:inline; background:-moz-linear-gradient(top, #0cf 0%, #09C 100%); background:-webkit-linear-gradient(top, #0cf 0%, #09C 100%); background:-o-linear-gradient(top, #0cf 0%, #09C 100%); background:-ms-linear-gradient(top, #0cf 0%, #09C 100%); background:linear-gradient(top, #0cf 0%, #09C 100%); } #menu ul li:hover{ background:#333; } #menu ul li a{ text-decoration:none; color:#fff; }

Add CSS2 script and save it in the same file ("all.css").

/*******************Halaman**********************/ #halaman { width:1000px; height:auto; margin:50px auto; border:1px solid #333; padding:20px 20px; background:#333; } p{ background:#222; padding:10px; width:1000px; margin:10px 0px 0px -10px; } /*****************Lain-Lain********************/ .form{ width:300px; padding:10px 20px; background:#333; border:1px solid #ccc; color:#fff; margin:10px 20px; } .tombol{ width:100px; height:35px; background:#66f; border:1px solid #66f; margin:10px 20px; } .tombol:hover{ background:#333; }

If the script CSS "all.css" successfully added it will look like the image below :