Recentemente è stata rilasciata la versione definitiva del tanto atteso sistema operativo iOS 7  targato Apple, con il suo design flat, le nuove icone e tutto il bagaglio di innovazioni presentate da Tim Cook durante il Keynote tenutosi a Settembre 2013. Uno degli aspetti principali che caratterizza il design si iOS 7 è determinato dall’uso costante dell’effetto blur, impiegato sui vari background che compongono l’interfaccia utente.

In questo articolo cercheremo di riprodurre questo effetto tramite l’esclusivo utilizzo di funzioni CSS3 avanzate, senza usare alcun tipo di immagine. Il risultato dell’esperimento sarà quello di creare una pagina con una barra di navigazione contenente un pulsante che servirà ad attivare il nostro overlay, ed un altro, contenuto all’interno dello stesso overlay, che avrà il compito di disattivarlo. L’obiettivo di quest’ultimo è quello di apparire con effetto slide sopra il contenuto del documento.

Il markup HTML

Come primo passaggio creiamo il nostro markup html, comprensivo della barra di navigazione, del contenuto della pagina, e della div di overlay:

<nav>
		<h1 class="title">Overlay Blur effect</h1>
		<button class="open-overlay">Show</a>
	</nav>
	<article>

		<ul class='list'>
			<li class="show-detail">
				<img src="img/1.jpg" height="80px">
				<div>
					<h3>Lorem ipsum</h3>
					<h4>Radioactive</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
				</div>
			</li>
			<li class="show-detail">
				<aside>
					<img src="img/2.jpg" height="80px">
				</aside>
				<div>
					<h3>Lorem ipsum</h3>
					<h4>Radioactive</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
				</div>
			</li>
			<li class="show-detail">
				<aside>
					<img src="img/3.jpg" height="80px">
				</aside>
				<div>
					<h3>Lorem ipsum</h3>
					<h4>Radioactive</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
				</div>
			</li>
			<li class="show-detail">
				<aside>
					<img src="img/4.jpg" height="80px">
				</aside>
				<div>
					<h3>Lorem ipsum</h3>
					<h4>Radioactive</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
				</div>
			</li>
		</ul>

	</article>
	<section class="overlay">

		<button class="close-overlay">Hide</a>

	</section>

 

Per fare ciò abbiamo utilizzato elementi html5 come nav ed article  e section, ma è possibile utilizzare  anche altri elementi con attributo css “display:block“. Abbiamo inoltre inserito all’interno del tag article, una lista con stili simili ad iOS7 (giusto per rimanere nel tema).

Il foglio di stile CSS

Prima di arrivare al passaggio più importante, ovvero attribuire ai vari elementi gli stili necessari per rendere possibile l’effetto overlay con blur, cerchiamo di dare alla pagina un aspetto che si avvicini più possibile alla grafica di iOS 7:

body, html{
	height: 100%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 100;
	overflow: hidden;
}

nav {
  top: 0;
  height: 44px;
  padding:0;	  	  
  background-color: #F7F7F7;
  border-bottom: 1px solid #A7A7AA;	  	  
  position: relative;  
}	
nav .title {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin:0;
  width: 100%;
  font-size: 18px;
  font-weight: 100;
  line-height: 44px;
  color: #333;
  text-align: center;
  white-space: nowrap;
}

nav .title + button {
  position: absolute; 
  top: 5px;
  right: 5px;
  z-index: 10; 

  border-radius:4px;
  padding:6px 8px;
  border:none;	
  color: #397AFC;
  background: transparent;	  
}
nav .title + button:active{
	color: #7BB6FB;
}

article {
  position: fixed;
  top: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: #EFEFF4;
  padding-top:20px;
}

.list {
   list-style: none;
   margin: 0 0 10px 0;
   padding: 0;
   border-top: solid 1px #c8c8c8;
   border-bottom: solid 1px #c8c8c8;
   background-color: #fff;
   overflow: hidden;
   width: 100%;
}

.list > li {
   padding: 13px 15px 13px 15px;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   transition: all .3s ease-out;
   position: relative;
   background-color: #fff;
   font-size: 12pt;
}
.list img{
	float:left;
	margin: 0 10px 10px 0;
}
.list h3,
.list h4,
.list p{
	font-size: 0.9em;
	margin:5px 0;
}

.list > li::before {
   content: '';
   display: block;
   position: absolute;
   bottom: 0px;
   left: 15px;
   right: 0px;
   border-bottom: solid 1px #c8c8c8;
}

.list > li.show-detail::after {
   content: 'i';
   display: block;
   height: 20px;
   width: 22px;
   border-radius: 20px;
   border: solid 1px #007aff;
   color: #007aff;
   font: bold 14px/0 'Times', serif;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 10px 8px;
   position: absolute;
   top: 10px;
   right: 15px;
}

Applicando questa porzione di codice abbiamo attribuito al documento il font “HelveticaNeue Light“, tipico del flat design targato Apple, abbiamo posizionato e “stilizzato” la barra di navigazione e gli elementi in essa contenuti (come titolo e pulsante d’azione) ed infine abbiamo posizionato il corpo della pagina, costituito appunto dal tag “article“.

Passiamo invece agli stili CSS che caratterizzano il risultato del nostro esperimento:  aggiungiamo la proprietà “transition” all’elemento article, specificando che sia applicata all’attributo filter.

article {
  position: fixed;
  top: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: #EFEFF4;
  padding-top:20px;

  -webkit-transition: -webkit-filter .15s ease;
          		  transition: filter .15s ease;
}

 

Poi aggiungiamo un blur di 15 px al contenuto della pagina nel caso in cui il body abbia la classe “open-overlay“, rimuovendolo invece nel caso in cui abbia la classe “close-overlay“.

body.open-overlay article{
	-webkit-filter:blur(15px);
	filter: blur(15px);
}

body.close-overlay article{
	-webkit-filter:none;
	filter:none;
}

 

Ora l’elemento più importante: l’overlay. Attribuiamo al nostro overlay (tag section) una posizione assoluta nei confronti del documento e posizioniamolo in modo tale che non copra la barra di navigazione, poi aggiungiamo le altre proprietà fondamentali:

1. L’attributo visibility:hidden, perchè nello “stato normale” l’overlay non deve essere visibile
2. L’attributo backface-visibility:hidden (nei suoi adattamenti per la compatibilità dei vari browser): con il quale miglioriamo le prestazioni di rendering nel caso di trasformazioni CSS prevenendo quest’ultimo dall’essere eseguito per la parte posteriore dell’elemento
3. L’attributo transform:translate3d(0,0,0) con il quale miglioriamo la fluidità della nostra animazione “forzando” l’utilizzo della GPU
4. L’attributo “animatior“, con il quale comunichiamo all’overlay quale genere di animazione eseguire, quanto tempo deve durare, e che tipo di “andamento” eseguire (lineare, swing ecc.)
5. L’istruzione “keyframe“, con la quale definiamo le animazioni

section {
  position: absolute;
  left: 0;
  top: 44px;	  
  right: 0;	
  bottom:0;  
  background-color: rgba(156,159,164,.5);	  
  padding:20px;
  text-align: center;

  visibility: hidden;

  /* migliora le prestazioni prevenendo il render della parte 'posteriore' dell'elemento */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   /* accelerazione hardware */
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);			   
}	

body.open-overlay section{
	-webkit-animation: showFromBottom .25s ease both;
	-moz-animation: showFromBottom .25s ease both;
	animation: showFromBottom .25s ease both;

	visibility: visible;
}

body.close-overlay section{
	-webkit-animation: hideToBottom .25s ease both;
	-moz-animation: hideToBottom .25s ease both;
	animation: hideToBottom .25s ease both;
}

/* definizione delle animzioni dell'overlay  */

	@-webkit-keyframes showFromBottom {
		from { -webkit-transform: translateY(100%); }
	}
	@-moz-keyframes showFromBottom {
		from { -moz-transform: translateY(100%); }
	}
	@keyframes showFromBottom {
		from { transform: translateY(100%); }
	}

	@-webkit-keyframes hideToBottom {
		to { -webkit-transform: translateY(100%); }
	}
	@-moz-keyframes hideToBottom {
		to { -moz-transform: translateY(100%); }
	}
	@keyframes hideToBottom {
		to { transform: translateY(100%); }
	}

Apro una piccola parentesi in merito: devo dire che mi piace molto utilizzare la terza delle proprietà elencate, che permette, nel caso di dispositivi mobile, di raggiungere o perlomeno di avvicinarsi alle prestazioni delle applicazioni native.

Tornando a noi, vediamo come nel caso in cui il body abbia la classe “open-overlay” o “close-overlay“, il tag section debba eseguire le due animazioni rispettivamente di comparsa e scomparsa dichiarate sotto il codice “keyframes” : showFromBottom e hideToBottom. Abbiamo inoltre modificato l’attributo “visibility:visible” per rendere visibile il pannello.

Il risultato dovrebbe quindi essere il seguente:

1. Nel caso di un body con classe “open-overlay” dovremmo vedere l’animazione dell’overlay assieme a quella del blur del documento.
2. Nel caso di un body con classe “close-overlay” dovremmo vedere esattamente le due animazioni opposte, per poi tornare allo stato iniziale.

Passiamo quindi all’ultima parte.

Il codice Javascript

Per scrivere meno righe di javascript, incorporiamo nel documento due librerie: jQuery e Modernizr, rispettivamente per effettuare il bind degli eventi del click dei pulsanti di apertura e chiusura, e per ricavare il nome dell’evento di fine animazione, che varia a seconda del browser.

var endAnimationName = {
	'WebkitAnimation' : 'webkitAnimationEnd',
	'OAnimation' : 'oAnimationEnd',
	'msAnimation' : 'MSAnimationEnd',
	'animation' : 'animationend'
};
var animationName = endAnimationName[ Modernizr.prefixed( 'animation' ) ];

$(function(){
   //bind dell'evento click sul pulsante di attivazione 
   $("button.open-overlay").on("click", function(){
	   $("body").addClass("open-overlay");
   });
   $("button.close-overlay").on("click", function(){
	   $("body").addClass("close-overlay").on(animationName, function(){				   
		   $(this).off(animationName)
		   .removeClass("open-overlay close-overlay");
	   });
   });
});

Alla fine dell’animazione di chiusura, togliamo al body entrambe le classi “open-overlay”  e “close-overlay”, per ritornare così allo stato di partenza.

Conclusioni finali

Purtroppo questo esperimento non è ancora ottimizzato con tutti i browser (per esempio nel caso di Firefox non è possibile applicare l’effetto blur al contenuto della pagina con il semplice attributo “filter:blur” ma solo servendosi degli effetti svg) e inoltre si tratta in fin dei conti di un workaround, in quanto l’effetto sul documento non è scaturito dalla sovrapposizione dell’overlay bensì da uno stile completamente separato. Tuttavia spero che questo tutorial ti sia d’aiuto per imparare nuove regole CSS3 e che magari potrai utilizzarlo nel tuo prossimo progetto!

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica unita a molte altre ho creato per i miei clienti oltre 10 applicazioni per dispositivi mobile, tra cui due progetti personali: Tint Weather App e Dieta SI o NO?. Se anche tu sei un web designer e vuoi realizzare la tua applicazione mobile da distribuire nei vari stores, forse sarai interessato al mio e-book: HTML Mobile Accelerato.

Grazie ad esso verrai a conoscenza di tutte quelle tecniche che renderanno la tua applicazione mobile fluida e reattiva come quelle native.

I am text block. Click edit button to change this text.

Tutti i designer e gli sviluppatori web hanno utilizzato o perlomeno conoscono gli utilissimi widget di jQuery UI. In questo articolo voglio parlarvi di come personalizzare gli stili ed il markup del widget autocomplete, che pur essendo uno dei plugin più completi, presenta un aspetto al quanto obsoleto. Cercheremo in particolare di realizzare un twitter bootstrap 3 autocomplete servendoci del widget di jQuery UI.

 

Aiutami a condividere la risorsa per ottenere il download:

Prima di iniziare

In alcuni progetti, soprattutto per quelli in cui alcune risorse come il tempo o anche il budget del cliente vengono a mancare, può tornare molto utile servirsi di temi twitter bootstrap 3 premium. A tal proposito te ne voglio proporre alcuni di alta qualità che io stesso ho usato per alcuni miei lavori:

Twitter Bootstrap 3 autocomplete: iniziamo!

Cosa includere nel documento

Come prima cosa andremo ad inserire nel nostro documento html le librerie css e javascript necessarie:

CSS:

• bootstrap.css
• demo.css (il nostro foglio di stile)

FILE JS:

• jquery.js (versione 1.10.2)
• jquery-ui.js (per l’autocomplete)
• demo.js (il nostro file javascript)

Per questo esempio ho escluso tutti i file js del Bootstrap e qualunque tema css del jQuery UI, in quanto il nostro intento è quello di combinare appunto gli stili del primo con le funzionalità del secondo; tuttavia è possibile raggiungere l’obiettivo anche includendo le due librerie al completo.

I file “demo.css” e “demo.js” sono rispettivamente il foglio di stile e il javascript del nostro esempio.

Il markup HTML

<div class="row">

	    <div class="col-sm-6 col-md-6 col-md-offset-3">

		    <form id="search-form" role="form">
			  <div class="form-group">
			    <label for="spotlight">Cerca</label>
			    <input type="email" class="form-control" id="spotlight" placeholder="Cerca" />
			  </div>

		    </form>

	    </div>	    

    </div>

 

Aabbiamo usato un input con id “spotlight” all’interno di un form, il tutto contenuto nella colonna di una griglia Bootstrap, con offset 3 e larghezza 6: il risultato è un campo di testo responsive centrato nel mezzo del documento, sia per dispositivi desktop che  mobile.

Javascript: demo.js

$(function() {

    var availableTags = [
      "ActionScript",
      "AppleScript",
      "AppleScript2",
      "AppleScript3",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

    $("#spotlight").autocomplete({
		source: availableTags,
		appendTo: $("form:first")
	});

	$("#spotlight").data( "ui-autocomplete" )._renderMenu = function( ul, items ) {
		var that = this;		
		ul.attr("class", "nav nav-pills nav-stacked");
		$.each( items, function( index, item ) {
			that._renderItemData( ul, item );
		});
	};	    

});

 

Prima di tutto abbiamo definito l’array dei termini possibili di ricerca, poi abbiamo inizializzato il campo con id “spotlight” per l’autocomplete del jQuery UI: qui si noti in particolare come sia stato necessario “appendere” il menù creato dal plugin al form tramite il parametro “appendTo”.

Il passo successivo è stato quello di modificare la funzione “_renderMenu” del plugin, ovvero quella funzione che ha il compito di inserire i vari risultati di ricerca alo’interno del menù sottoforma di entità HTML. Il procedimento è molto semplice: alla funzione vengono passati come parametri l’elemento del menu che sarà appeso al form, e gli elementi del risultato della ricerca in formato JSON. All’interno di un loop si scorrono poi tutti i risultati e viene richiamata la funzione “_renderItemData” che ha il compito di creare per ogni risultato l’elemento HTML e di aggiungerlo alla lista. Prima del loop noi sostituiamo semplicemente la classe del menu del jQuery UI con quelle del Twitter Bootstrap.

Gli stili CSS: demo.css

form#search-form{
  position: relative;
}

form#search-form ul{
	  position: absolute;
	  top: 0;
	  left: 0; 
	  width: 100%;
	  max-height: 200px;
	  overflow: auto;	  
	  z-index: 1;	  
	  border:1px solid #DDDDDD;
	  border-radius: 6px;	  
  }

span.ui-helper-hidden-accessible{
  display: none !important;
}

.ui-state-focus {
	 color: #ffffff;
	 background-color: #428bca;
}

 

Anche per quanto riguarda gli stili il discorso non è molto complicato: per prima cosa attribuiamo il “position:relative” al form, di modo ché il menù dei risultati venga riposizionato in base al primo (è per questo che precedentemente lo abbiamo inserito tramite javascript al suo interno), poi impostiamo gli attributi del menu stesso, il quale avrà quindi una “position:absolute”.

Attribuiamo poi al menù una altezza massima di 200px con overflow:auto per far scorrere i risultati con una scrollbar, evitando di farli uscire dallo schermo, qualora fossero troppo numerosi.

Fatto ciò nascondiamo la classe helper del jQuery UI, ed impostiamo lo stile del risultato della lista su cui scaturisce il focus (questo è un hack necessario perché purtroppo non è possibile modificare con poche righe di codice il markup e le classi di ogni singolo elemento della lista dei risultati. Per questo si è scelto di prendere la strada “più leggera“).

Twitter bootstrap 3 autocomplete: risultato finale

 

Aiutami a condividere la risorsa per ottenere il download:

Temi Twitter Bootstrap 3 premium