Navigare rapidă

Ultimele subiecte
» Bulletin ipb theme
Scris de Iustin Vin 17 Feb - 14:49
» Sliding Menu Bar V5
Scris de RAKSONE Mier 15 Feb - 1:13
» Cereri intrare in staff[Deschise]
Scris de Madross Sam 11 Feb - 21:11
» Cum iti creezi propriul joc online
Scris de xTeRm0 Sam 11 Feb - 14:47
» Informatii Primul Post [IPB Animate]
Scris de bablil Sam 11 Feb - 0:22
Cuvinte-cheie

html  animate  Bara  subiecte  menu  radio  banner  chenar  profil  drop  tema  Metin2  navigare  tutorial  Mesaje  cautare  subforumuri  reclama  edit  ultimele  meniu  legenda  punbb  phpBB2  avatar  Statistici  

Tabel parteneri sistem nou


Am creat un sitem placut de parteneriat cu 3 modele de hover: normal,activ,activ2
Previzualizare live click aici

cod HTML

Cod:

<center><div class="parteneri">
<table align="center"  cellspacing="1">
<tr class="spatiu" cellspacing="1">
<tr class="spatiu" cellspacing="1">
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
</tr>
<tr class="spatiu" cellspacing="1">
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
</tr>
<tr class="spatiu" cellspacing="1">
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
<td class="partener"><div class="text"><a href="#">Partener</a></div></td>
</tr>

Cod CSS

Cod:

.partener{
margin-left: 5px;
_margin:20px 10px 15px 13px;
background: #f5f5f5;
border: 1px solid white;
box-shadow: 0px 0px 1px black;
height: 33px;
width: 88px!important;
text-align: center;

}

.parteneri{
padding: 1px;
background: white;

box-shadow: 0px 0px 1px black;
width: 933px;}

.partener:hover{
background: white;
border: 1px solid #f1f1f1;
box-shadow: 0px 0px 1px black;}


.text{
position: relative;
float: left;
font-size: 12px;
width: 88px;}

.text a:hover{
color: #0275B2;
}

.text a{
text-decoration: none;
text-shadow: 0px 1px 1px white;
color: #404040;}

.spatiu{
margin-top: 10px;}


.partener_activ{
background: #404040;
color: white!important;
border: 1px solid white;
box-shadow: 0px 0px 1px black;
height: 33px;
width: 88px!important;
text-align: center;}

.partener_activ a{
color: white;
text-shadow: none;}

.partener_activ a:hover{
color: white;
text-shadow: 0px 0px 10px #FFB700}


.partener_activ2{
background: #0275B2;
border: 1px solid white;
box-shadow: 0px 0px 1px black;
height: 33px;
width: 88px;
text-align: center}

.partener_activ2 a{
color: black;
text-decoration: none;
}

.partener_activ2 a:hover{
color: white;
text-shadow: 0px 0px 3px black;}



Acum ca avem codurile css si html pentru a putea aplica efectul de hover modificati in HTML la
Cod:

<td class="partener">

cu

Cod:

<td class="partener_activ">

sau
Cod:

<td class="partener_activ2">



Tutorial scris de [Trebuie sa fiti inscris si conectat pentru a vedea acest link]  

Copyright Extrem-Tutorials.com -  Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.

Comentariile utilizatorilor
Administrator
la data de Sam 12 Ian - 12:18
Madross Administrator
Conectat
Imi place,bravo , felicitari.Varianta normala arata mai ok,dupa parerea mea.
Membru ET
la data de Sam 12 Ian - 13:36
.Nick Membru ET
Conectat
Prima varianta arata foarte bine.Felicitari !
Vizitator
la data de Sam 12 Ian - 17:25
Vizitator Vizitator
Conectat
Froarte buna idee sabin
Membru dedicat
la data de Sam 12 Ian - 18:47
mr.franta Membru dedicat
Conectat
Multumesc Guest,catre ceilalti: acolo nu sunt 3 modele este un singur model
Cu putina imaginatie acest tabel poate fi absolut uimito cu fiecare partener in culoarea proprie ceea ce il face unic acest tabel
Membru ET
la data de Vin 18 Ian - 15:37
Rooney Membru ET
Conectat
Toate 3 modele sunt frumoase.


Ultima editare efectuata de catre Rooney in Sam 19 Ian - 12:46, editata de 1 ori
Membru dedicat
la data de Vin 18 Ian - 17:33
mr.franta Membru dedicat
Conectat
defapt daca ai fi citit mai bine este un singur model.....cu 3 efecte de hover
Membru ET
la data de Vin 25 Oct - 14:22
RedGames Membru ET
Conectat
Mersi
Membru nou
la data de Mier 7 Ian - 2:34
alasmar Membru nou
Conectat

Mersi