CSS3: un effetto accattivante per i nostri link

Con l’avvento di alcune proprietà i CSS sono passati da semplice guida stilistica per il markup delle nostre pagine di HTML ad un vero e proprio arsenale di ispirazione per la creatività.

In questo esempio utilizzo la proprietà transform e, più esattamente, sfrutto il metodo translate().

Con un pò di esercizio possiamo imparare a sfruttare a dovere i CSS3.

Andiamo al codice, questo è l’HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Link creativi</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
	<div class="container">
			<header>
				<h1>Effetto link <span>Un effetto moderno per i nostri links</span></h1>
			</header>
			<section class="lista">
				<nav class="effetto">
					<a href="#">Limone</a>
					<a href="#">Fragola</a>
					<a href="#">Nocciola</a>
					<a href="#">Cioccolato</a>
					<a href="#">Puffo</a>
				</nav>
			</section>
			
		</div><!-- /container -->
</body>
</html>

Come vedete, si tratta solo di un div container con, al suo interno, un nav tag con alcuni link.

Nel foglio di stile inseriremo questi valori:

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
	font-family: 'Raleway', sans-serif;
}

nav a {
	position: relative;
	display: inline-block;
	margin: 15px 25px;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.35em;
}

nav a:hover,
nav a:focus {
	outline: none;
}

/* Effetto*/
.effetto a::before,
.effetto a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.effetto a::before {
	margin-right: 10px;
	content: '{';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.effetto a::after {
	margin-left: 10px;
	content: '}';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.effetto a:hover::before,
.effetto a:hover::after,
.effetto a:focus::before,
.effetto a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

.container > header {
	margin: 0 auto;
	padding: 2em;
	text-align: center;
	color: #89867e;
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 60%;
	color: #ceccc6;
	padding: 0 0 0.6em 0.1em;
}

.container > section {
	margin: 0 auto;
	padding: 10em 3em;
	text-align: center;
}

.lista {
	background: #435a6b;
}

Il risultato finale:

See the Pen Hover effect anchor tags by Eugenio (@rupertone) on CodePen.

DEMO CSS3 LINKS

Qui trovate i files della demo

E’ tutto, bastano queste poche righe per ottenere un effetto elegante, moderno e accattivante per i nostri link 🙂

Alla prossima.