eventi_click_transition.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Eventi CSS - Quarta parte :: Laboratorio CSS</title>
	<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css' />
	<link href="common/css/style.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		*{margin:0;padding:0}
		span{cursor:pointer;font-weight:bold;display:inline-block;margin-bottom:10px;}
		#content{text-align:center;}
		
		.change{transition:all 9999999s;-webkit-transition:all 9999999s;}
		span:active ~ .change{transition:all 0s;-webkit-transition:all 0s;color:red;}
	</style>
</head>

<body>
	<a id="logo" href="http://www.laboratoriocss.it" title="Laboratorio CSS" class="logo"><img src="common/img/structure/logoLabcss.png" alt="Logo laboratorio CSS" /></a>
	<div id="container">
		<div id="header">
			<h1><a href="http://www.laboratoriocss.it/eventi-in-css-quarta-parte.html">Eventi CSS - Quarta parte</a></h1>
			<p id="description">Eccoci giunti all’ultima parte dedicata agli eventi in css. Questa tecnica che sto per descrivere è stata ideata da Joel Besada e si basa su una transizione css. Vediamo di che si tratta.</p>
		</div>
		<div id="content">
		
			<!-- ESEMPIO -->
			
			<span>Clicca</span>
			<p class="change">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</p>
				
			<!-- //ESEMPIO -->
			
		</div>
	</div>
</body>
</html>