Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de DenisPasca Mier 7 Dec - 23:51
» [Animate] Recent Topic IPB
Scris de DenisPasca Lun 5 Dec - 22:44
» Ipb Counter-strike Special FG
Scris de DenisPasca Sam 3 Dec - 22:52
» Special Theme Extrem Tutorials
Scris de cosminelu21 Vin 2 Dec - 23:48
Cuvinte-cheie

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

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
Admin & Dezvoltator
la data de Sam 12 Ian - 12:18
Winsper Admin & Dezvoltator
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