Senin, 23 Januari 2012 - 12:25:33 WIB
Paging Model Gradasi
posted by : Administrator
Category: php - read: 104 kali

Konsep dari paging model gradasi nantinya paging tersebut akan dibingkai dalam suatu border seperti yang telah kita lakukan pada trik-trik sebelumnya, namun dalam border tersebut diberi sebuah background berupa gambar gradasi, jadi untuk membuatnya tentu saja kita memerlukab sebuah gambar gradasi.

silahkan membuat gambar gradasi dengan program pengolah grafis. adapun gambar gradasi yang digunakan berukuran 3x25 dengan gradasi dari putih ke orange atau juga bisa download file gradasi.jpg.

bagaimana cara penggunaanya, simak skrip berikut:

Skrip gradient.css

body {

  color       : #FF6500;

  font-family : Tahoma;

  font-size   : 13;

}

table {

  border-collapse : collapse;

}

th {

  background-color : #FFBE94;

  padding-left     : 10px;

  padding-right    : 8px;

  padding-top      : 4px;

  padding-bottom   : 4px;

  border           : 1px solid #FF6500;  

  text-align       : left;

  color            : #000000;

  font-size        : 13;

}

td {

  padding-left     : 8px;

  padding-right    : 8px;

  padding-top      : 4px;

  padding-bottom   : 4px;

  border           : 1px solid #FF6500;

  font-size        : 13;

}

 

 

div.paging {

padding     : 3px;

margin      : 3px;

text-align  : center;

font-family : Tahoma;

font-size   : 12px;

  color       : #FF6500;

}

div.paging a {

padding             : 5px 7px;

margin-right        : 3px;

border              : 1px solid #FF9600;

text-decoration     : none; 

background-image    : url(images/gradasi.jpg);

background-position : bottom;

color               : #FF6500;

}

div.paging a:hover {

border           : 1px solid #FF9600;

color            : #FF6500;

background-color : #FFC794;

background-image : none;

}

div.paging span.current {

padding          : 5px 7px;

margin-right     : 3px;

border           : 1px solid FF6500;

font-weight      : bold;

background-color : #FFBE94;

color            : #FF6500;

}

div.paging span.disabled {

padding      : 5px 7px;

margin-right : 3px;

border       : 1px solid #FFC082;

color        : #FFC082;

}

div.paging span.prevnext {

  font-weight : bold;

}

 

untuk mencobanya, kita akan menggunakan kembali skrip paging sebelumnya (paging_01.php) dan cukup kita ubah pada baris pertama untuk memanggil file css yang akan disertakan pada skrip php:

<link href="gradient.css" rel="stylesheet" type="text/css">

Simpan filenya dengan file baru paging_03.php. sekarang coba jalankan.

DOWNLOAD Source Code 




0 Comment :

Add comment :
Name :
Website :
Comment
 
 (Enter the code)