Top subiecte apreciate

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

Navigare rapidă

Ultimele subiecte
» Bulletin ipb theme
Scris de Ishkq Ieri la 20:28
» Serie Tutoriale CSS
Scris de Hachiy Dum 15 Ian - 16:59
» Wireless ipb theme [punBB]
Scris de vi01239984564 Mar 10 Ian - 11:50
» Summer v1.1 theme
Scris de vi01239984564 Mar 10 Ian - 9:57
Cuvinte-cheie

Statistici  avatar  ultimele  meniu  subforumuri  navigare  reclama  profil  edit  animate  phpBB2  chenar  Mesaje  subiecte  drop  banner  tema  tutorial  menu  cautare  punbb  Metin2  Bara  legenda  html  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