Top subiecte apreciate

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

Navigare rapidă

Ultimele subiecte
» Legenda s-a intors XD
Scris de EDGE Ieri la 20:42
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
» Wireless ipb theme [punBB]
Scris de cristii571 Lun 12 Sept - 14:34
Cuvinte-cheie

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

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