Azi este Marti, 5 de August.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:

  • Cum suna blog tau?Codeorgan,este o pagina web interesanta unde poti introduce URL-ul blogului tau sau alt url si este convertit in muzica.M-am intrebat cum este posibil sa transforme toate datele de pe blogul meu si eliminand toate caracterele… Read More
  • Controlul de la distanta al unui PCTeam Viewer este cea mai buna aplicatie cu care poti controla alt calculator la distanta indiferent unde te afli. Acesta este un mare ajutor atunci cand doresti sa ajuti un prieten care nu are multe cunostinte de programare s… Read More
  • Verifica datele blog-ului tau!Atunci când avem un blog sau site , fără îndoială, apare un moment în care am dori să ştim date importante despre ele , pentru aceasta exista multe servicii online gratis.ExamineURL este un serviciu gratuit care vă permite sa… Read More
  • Îmbunătăţirea fotografii onlineImprove Your Images este un instrument online care il recomand, nu trebuie să descărcaţi şi să instalaţi nimic. Într-un minut sau mai puţin poti îmbunătăţi fotografii, contrastul şi culoarea, tot ce trebuie să faci este să în… Read More
  • Adauga o imagine de fond la o postare sau gadgetCu ajutorul acestui truc (folosind silul de fond DIV) se poate adauga un fundal pe blogul tau intr-o postare sau intr-un gadget HTML/Javascript.Copiaza codul de mai jos si adauga-l unde doresti ori de cate ori doresti pe blog… 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