Come rendere i nostri collegeamenti ipertestuali piu atraenti e meglio visibili.

Collegamenti ipertestuli o link non sempre abbastanza attraenti e visibili sulla nostra pagina. Particolarmente se stiamo parlando di collegemnti inseriti nel articolo. L'idea è di usare pseudo-elementi per i nostri collegamenti. In questo esempio, abbiamo creato gli effetti che appaiono al passagio del mouse(stato hover dei CSS).

 

 

1.Markup del menu

La maggior parte del codice HTML sarà composto di link:

 

<nav class="cl-effect-13">
    <a href="#">Beleaguer</a>
    <a href="#">Lassitude</a>
    <a href="#">Murmurous</a>
    <a href="#">Palimpsest</a>
    <a href="#">Assemblage</a>
</nav>

2. Utilizzo  attributo data di CSS3.

Ma in alcuni casi, per ottenere gli effetti desiderati, usiamo attributo  data: Questo attributo mostrera la parola che lo segue nel codice, al momento del passagio del puntatore del mouse sopra il nostro ellemento.

<nav class="cl-effect-11">
    <a href="#" data-hover="Desultory">Desultory</a>
    <a href="#" data-hover="Sumptuous">Sumptuous</a>
    <a href="#" data-hover="Scintilla">Scintilla</a>
    <a href="#" data-hover="Propinquity">Propinquity</a>
    <a href="#" data-hover="Harbinger">Harbinger</a>
</nav>

Inoltre, in alcuni casi, si può utilizzare elemento span: Per poter agiungere ulteriore passo nella nostra animazione del menu

<nav class="cl-effect-10">
    <a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
    <a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
    <a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
    <a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
    <a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>

3. Esempio pratico.

Ecco un esempio di uno stile particolare. Posizioniamo un pseudo-elemento sopra i link e con passagio del mouse visualizziamo l'effetto:

.cl-effect-15 a {
    color: rgba(0,0,0,0.2);
    font-weight: 700;
    text-shadow: none;
}
.cl-effect-15 a::before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    transition: transform 0.3s, opacity 0.3s;
}
.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
    transform: scale(0.9);
    opacity: 0;
}

Speriamo che questa metodica vi sara utile.

Nota: IE10 non supporta gli effetti 3d.

Fonte lezione: http://tympanus.net/codrops/2013/08/06/creative-link-effects/

Letto 1771 volte