beautyfarm - THE BEST DESIGN
DOWNLOAD MY MUSIK,participa la concursuri,soft-uri,cool stuff,NIKON CLUB,Baruri Trendy,ScreenSavers,Accesorii Cool,Masini sexy,Bannere,Games,Aparitii Cinematografice,Tribal Farm...etc distreaza-te!Totul pentru TINE.Cele mai tari subiecte.
|
Lista Forumurilor Pe Tematici
|
beautyfarm - THE BEST DESIGN | Inregistrare | Login
POZE BEAUTYFARM - THE BEST DESIGN
Nu sunteti logat.
|
Nou pe simpatie:
crazylife
 | Femeie
25 ani
Bucuresti
cauta Barbat
25 - 47 ani |
|
CocaDozzer
Moderator
 Din: Garda de Fier
Inregistrat: acum 16 ani
Postari: 197
|
|
4 tecniche CSS per i link
Tooltip con i soli CSS
Perché questa tecnica funzioni avrete bisogno di un markup HTML come questo:
Code:
<a href="#">Title <span>Tooltip</span></a> |
Nel CSS assegniamo un posizionamento relativo all'ancora (a) in stato di :hover. Lo span viene posizionato assolutamente ed esso si applica uno stile separato. Inizialmente lo span viene nascosto, per essere poi visualizzato quando si passa con il mouse sul link (usando il selettore a:hover span).
Ecco il CSS:
Code:
a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
} |
Una galleria di immagini con i CSS
Questo trucchetto ci consente di visualizzare un'immagine grande quando si passa con il mouse sulla miniatura corrispondente. Useremo una lista non ordinata. In ogni item della lista (li) piazzeremo un elemento a e al suo interno il riferimento a due immagini, la miniatura e quella a dimensioni normali. L'immagine grande viene inserita all'interno di uno span inizialmente nascosto. Quando si fa il rollover sulla miniatura impostiamo display:block per per lo span nascosto e così mostriamo l'immagine grande.
La struttura HTML è la seguente:
Code:
<li>
<a href="#">
<img src="images/02_1s.jpg" alt="gallery thumbnail" />
<span><img src="images/02_1.jpg" alt="gallery image" /></span>
</a>
</li> |
E questo il CSS:
Code:
ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
width:400px;
height:375px;
position:relative;
background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%;
}
ul#gallery li{
float:left;
display:inline;
margin-top:300px;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a:hover span{
position:absolute;
width:400px;
height:300px;
float:left;
top:0;
left:0;
display:block;
} |
DEMO
Ridimensionare immagini con i soli CSS
Ho scritto altrove su una tecnica che consente di ridimensionare una miniatura ridimensionando l'area visibile dell'immagine stessa. Questo trucchetto mostrerà un'immagine più grande al passaggio del mouse e darà l'effetto di un'immagine realmente ridimensionata. Per ottenere il tutto userò uno schema simile a quello dell'esempio precedente - due immagini, una piccola, una grande, all'interno di un elemento a. L'immagine più grande è inizialmente nascosta, viene mostrata solo sul rollover. Dal momento che l'immagine è piazzata sopra quella piccola, l'impressione è che essa sia ridimensionata.
Questo il codice HTML:
Code:
<li>
<a href="#">
<em><img src="images/02_1s.jpg" alt="gallery thumbnail" /></em>
<span><img src="images/02_1m.jpg" alt="gallery image" /></span>
</a>
</li> |
E questo il CSS:
Code:
ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
margin:2em 0;
}
ul#gallery li{
float:left;
display:inline;
margin-right:5px;
}
ul#gallery a{
float:left;
display:inline;
position:relative;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover span{
float:left;
display:block;
cursor:pointer;
}
ul#gallery a:hover em{
display:none;
}
ul#gallery a img{
border:1px solid #999;
padding:2px;
background:#fff;
}
ul#gallery a:hover img{
border:1px solid #000;
} |
[url=http://cssglobe.com/articles/link_tech/03.html]DEMO[/img]
Un pulsante con effetto 3D
Si tratta di un semplice effetto di un pulsante che viene premuto. Abbiamo bisogno di un elemento a con uno span annidato. I bordi superiore e sinistro sono "schiariti", quello inferiore e destro "ombreggiati". Per aggiungere un maggiore effetto ombra aggiungeremo un bordo destro e inferiore anche allo span. Al passaggio del mouse invertiamo i colori dei bordi. Cambiando i bordi spostiamo pure lo span di 1px in basso e a destra.
Da notare che nel mio esempio ho usato il float sugli elementi a per ottenere l'altezza desiderata, ma tutto si può ottenere anche con elementi a inline.
Ecco la parte HTML:
Code:
<a href="#" class="button"><span>Roll over here</span></a> |
E il CSS:
Code:
a.button{
float:left;
font-size:110%;
font-weight:bold;
border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
color:#333;
width:auto;
}
a.button:hover{
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #999;
border-bottom:1px solid #999;
color:#333;
}
a.button span{
background:#d4d0c8 url(images/bg_btn.gif) repeat-x;
float:left;
line-height:24px;
height:24px;
padding:0 10px;
border-right:1px solid #777;
border-bottom:1px solid #777;
}
a.button:hover span{
border:none;
border-top:1px solid #777;
border-left:1px solid #777;
background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;
cursor:pointer;
} |
DEMO
_______________________________________
 PM-URI
 
JUST SAY THANKS-it only takes a second!!!!
|
|
| pus acum 15 ani |
|