Steps To Make Online Photo Gallery #7

by aku 08.05 0 komentar Photo Gallery #1

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").

Script CSS 2 :

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