Azi este Luni, 14 de Aprilie.2017

cu reduceri

Alte variante ale efectului :hover

EFECTUL HOVERIn dabblet.com se gasesc multe exemple interesante folosind efectul hover pe link-uri text, cele mai multe dintre ele sunt comune.

Printre acestea, sunt două pe care le-am găsit interesant. Primul este de a adăuga o culoare de fundal colorat unui link text, vezi mai jos:

Primul un link colorat

codul CSS pentru acest efect de adauga inainte de linia </head>
<style>
a.colorido:hover {
color: #FFF;
padding=0 5px;
background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
}
</style>
salveaza modificarile, intr-o postare noua sau unde doresti sa experimentezi noul tau link,adaugi:
<a class="colorido" href="#">un link colorat</a>
Al doilea exemplu: în loc de afişare a conţinutului de la atributul href, am putea arăta orice altceva (titlu, REL, etc) si CSS, si care transforma textul link într-un fel Tooltip rapid, vezi mai jos:

acest link afiseaza orice alt text aditional

cod CSS:
<style>
a.informacion {position: relative;}
a.informacion:hover:after {
background-color: CornflowerBlue;
border-radius: 5px;
color: #FFF;
content: attr(rel);
font-size: 12px;
left: 2em;
padding: 2px 10px;
position: absolute;
top: -1.5em;
white-space: pre;
}
</style>

si link-ul:
<a class="informacion" href="#" rel="exemplu informatii detaliate">acest link</a>afiseaza orice alt text aditional

Related Posts:

  • Efect - Navigare cu cercuriEfectul de navigare Cercul cu CSS3 este o ideea buna folosita de tympanus.net si care se poate aplica unui slider de imagini, dar pentru a nu complica lucrurile foarte mult, sa vedem cum se genereaza acest efect in mod obisnu… Read More
  • Efecte acordeonUn efect foarte interesant de acordeon pe verticala (vezi aici acelasi efec dar pe orizontala)Ori de cate ori efectuam orice actiune pe o eticheta si dam clic pe ea pentru a interactiona, doar cu CSS nu este suficient, avem n… Read More
  • :after si :before:before si :after sunt chemari pseudo-elemente. Ce fac ele? Iti permite sa adaugi "chestii" pe o etichetă, lucruri care pot fi proprietati CSS sau de conţinut de orice fel. Se poate argumenta ca, unei etichete se adauga alte … Read More
  • Imagini si CSS totul depinde de ce navegator folosimO imagine normala:<img src="URL_IMAGINE"/>Rotunjim colturile si in Firefox se vede cum apare in aceasta postare si foarte diferit in, Chrome Opera e IE9:<img style="border-radius:20px" src="URL_IMAGINE"/>Am adăuga… Read More
  • Youtube Instant Search: Un plugin pentru JQueryYoutube Instant Search este un mic plugin jQuery care permite sa cauti video si afiseaza rezultatele în timp real, profitand de Youtube API si de lectura de feed-uri în format JSON. Este usor de adaugat si personalizat. In pr… Read More

4 comentarios:

  1. Buna thamara, multumesc si eu pentru vizita.

    RăspundețiȘtergere
  2. Foarte frumos scriptul al doilea ms mult

    RăspundețiȘtergere
  3. Salut Anonim, afisarea unor link-uri cu informatie aditionala este la mare cautare, cu ajutorul acestui script totul este posibil in acest domeniu.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc