Legături cu (ceva) stil


Subiectul de astăzi este înfrumuseţarea linkurilor. Nişte lucruri de bază, foarte de bază, pentru începători şi doar începători. Pentru a sări direct la rezultat, daţi click aici. Implicit, o ştim, navigatoarele arată legăturile colorate cu albastru şi subliniate, pentru a le evidenţia. Ele pot fi uşor modificate ca aspect prin CSS. Mai jos am modificat în primul rând legăturile „obişnuite”, adică orice link am adăuga în mod normal în respectiva pagină. Ce am făcut? Am definit nişte atribute pentru tagul a: culoare, decoraţie (nimic, prin aceasta mă asigur că nu mai apare acel underline implicit), înclinare text (italic) şi în fine o linie de subliniere dar doar când e pus mouse-ul peste link. Am prevăzut trei scenarii: a:link pentru linkul în starea obişnuită (fără mouse deasupra, nevizitat până atunci); a:hover pentru atunci când mouse-ul este deasupra; a:visited pentru legăturile vizitate deja (util dacă vreţi ca vizitatorul să aibă o idee vizuală despre legăturile pe care le-a urmat deja).

În al doilea exemplu m-am folosit de ID şi nu de o clasă, mergând ceva mai departe cu CSS-ul. Dar nu prea departe, rămânând în sfera începătorilor. Practic am adăugat o spaţiere între litere şi o imagine în stânga, la începutul legăturii. Pentru aceasta a trebuit desigur să pun ca textul să înceapă ceva mai încolo (padding-ul). Ca să se vadă mişcarea mouse-ului, la mouse deasupra am schimbat modul liniei de subliniere şi culoarea textului. Dar aţi văzut deja dacă aţi urmărit primul link din articol. Atât! E doar un punct de plecare. Cu alte atribute CSS puteţi realiza alte efecte. De exemplu la mouse deasupra puteţi schimba imaginea (o săgeată roşie?). Dacă prindeţi ideea, cu CSS veţi prinde aripi şi veţi putea face tot felul de linkuri (şi nu numai) arătoase. Succes! (Nu uitaţi de TopStyle Lite, foarte bun pentru etapa de învăţare.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Legaturi cu stil</title>
<style type="text/css">
<!--
a:link {
	color: #003366;
	text-decoration: none;
	font-style: italic;
	border-bottom: none;
}
a:hover {
	color: #003366;
	text-decoration: none;
	font-style: italic;
	border-bottom: 1px solid #cc0000;
}
a:visited {
	color: #003366;
	text-decoration: none;
	font-style: italic;
	border-bottom:none;
}

#meniu1:link {
	color: #cc0000;
	text-decoration: none;
	letter-spacing: 3pt;
	border-bottom: dotted 1px #000000;
	background: url("sageata.gif") left no-repeat;
	padding: 0px 0px 0px 15px;
	font-size:12pt;
	vertical-align: top; 
}
#meniu1:hover {
	color: #000000;
	text-decoration: none;
	letter-spacing: 3pt;
	border-bottom: solid 1px #cc0000;
	background: url("sageata.gif") left no-repeat;
	padding: 0px 0px 0px 15px;
	font-size:12pt;
	vertical-align: top; 
}
#meniu1:visited {
	color: #cc0000;
	text-decoration: none;
	letter-spacing: 3pt;
	border-bottom: dotted 1px #000000;
	background: url("sageata.gif") left no-repeat;
	padding: 0px 0px 0px 15px;
	font-size:12pt;
	vertical-align: top; 
}

#zona{
	background-color: #f0f0f0;
	width: 300px;
	padding: 10px;
}
-->
</style>

</head>
<body>
<p>Cautati cu <a href="http://www.google.ro">Google.ro</a> 
sau cu <a href="http://www.lycos.com">Lycos.com</a>.</p>
<div id=zona>
	<a href="http://www.catholica.ro" id=meniu1>Catholica.ro</a><br>
	<a href="http://www.profamilia.ro" id=meniu1>ProFamilia.ro</a><br>
	<a href="http://www.bru.ro" id=meniu1>BRU.ro</a><br>
</div>
</body>
</html>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 4,50 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *