{ Oggetti fluorescenti con CSS }

Di grande effetto ma non ne "abusate"...

Con poche righe di CSS possiamo ottenere un effetto Glow ossia fluorescente. Questo effetto personalmente lo adoro, se "costruito" con gli adeguati canoni risulta elegante e di effetto, ma un consiglio non esagerate a condire le pagine di oggetti lampeggianti! Sicuro che otterrete l'effetto contrario facendo fuggire l'utente infastidito da "1000 luci" che non hanno più il senso di far cadere l'occhio su un oggetto importante ma indurre alla fuga dal sito...

Codice:
<style type="text/css">
.glow {
	margin: 0;
	position: relative;
	width: 50px;
	height: 50px;
          -webkit-animation-duration: 0.5s;
          -webkit-animation-name: glow;
          -webkit-animation-direction: alternate;
          -webkit-animation-iteration-count: infinite;
          animation-duration: 0.5s;
          animation-name: glow;
          animation-direction: alternate;
          animation-iteration-count: infinite;
    }
    
@-webkit-keyframes glow {
          from { -webkit-box-shadow: 0px 0px 30px 0px rgba(222, 94, 96, 1);
	-moz-box-shadow:    0px 0px 30px 0px rgba(222, 94, 96, 1);
	box-shadow:         0px 0px 30px 0px rgba(222, 94, 96, 1); }
	        to { -webkit-box-shadow: 0px 0px 30px 0px rgba(222, 94, 96, 0);
	-moz-box-shadow:    0px 0px 30px 0px rgba(222, 94, 96, 0);
	box-shadow:         0px 0px 30px 0px rgba(222, 94, 96, 0); }
    }
</style>

Di seguito faccio un esempio inserendo un quadrato lampeggiante in centro pagina, basta fare un copia e incolla dell'intero codice e pubblicarlo sul vostro spazio web per capire e fare i vostri esperimenti...

Codice:
<!DOCTYPE html>
<html>
<head>
	<title>Effetto Glow con CSS - By Filomeni</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="Filomeni Maurizio (https://www.sitiweb.cloud)">
	<style type="text/css">
.glow {
	margin: 0;
	position: relative;
	width: 50px;
	height: 50px;
          -webkit-animation-duration: 0.5s;
          -webkit-animation-name: glow;
          -webkit-animation-direction: alternate;
          -webkit-animation-iteration-count: infinite;
          animation-duration: 0.5s;
          animation-name: glow;
          animation-direction: alternate;
          animation-iteration-count: infinite;
    }
    
@-webkit-keyframes glow {
          from { -webkit-box-shadow: 0px 0px 30px 0px rgba(222, 94, 96, 1);
	-moz-box-shadow:    0px 0px 30px 0px rgba(222, 94, 96, 1);
	box-shadow:         0px 0px 30px 0px rgba(222, 94, 96, 1); }
	        to { -webkit-box-shadow: 0px 0px 30px 0px rgba(222, 94, 96, 0);
	-moz-box-shadow:    0px 0px 30px 0px rgba(222, 94, 96, 0);
	box-shadow:         0px 0px 30px 0px rgba(222, 94, 96, 0); }
    }
    #nextsection{
	color:#fff;
	font-weight: 900;
	background-color: #26292E;
	margin: 0;
	position: relative;
	padding-left: 25px;
	padding-top: 20px;
	margin: auto;
	width: 50%;
	width: 50px;
	height: 50px;
    }
	</style>
</head>

<body>
<div class="glow" id="nextsection" width="10">GO</div>
</body>
</html>

Siti Web

Da 20 anni Filomeni Maurizio si dedica con passione e tenacia al mondo del web, le sue realizzazioni sono sempre all'avanguardia perchè la sua passione divenuta professione è al passo con i tempi e sempre in fase di studio e ricerca. Grazie ai suoi collaboratori riesce a dedicare il maggior tempo alla programmazione back-end rendendo le applicazioni molto precise e sofisticate. Dopo un attento monitoraggio, Siti Web diventa Partner Partnership di Aruba Group S.p.A

Newsletter & Info

Iscriviti alla nostra newsletter per ricevere aggiornamenti e novità, non riceverai mail indesiderate da parte nostra, odiamo lo spam!


Ti Piace Siti Web?