Click per tornare alla pagina Home
Blogs
Direttamente dal team che ha creato GiapCMS, ecco le tecniche più evolute e non documentate per creare soluzioni web avanzate con il minimo sforzo.
Partecipa alle discussioni, indicando anche le tue personali scoperte e trucchi.
Torna alla Home Page
Ricerca argomento:
Categoria:
Flip div login con css3
Oggi vediamo come applicare un effetto flip come quello visibile in questo sito www.yourpersonalmood.com su un modulo di login. Chiaramente lo stesso effetto è applicabile anche ad un normale htmlbox o qualunque altro modulo sia in dotazione di GiapCMS®. Lo scopo di questo articolo è dimostrare che le già notevoli possibilità operative di GiapCMS possono essere ampliate a piacimento semplicemente girovagando un pochino su internet e trovando il "trick" giusto. Nel nostro caso abbiamo attinto a piene mani dal blog di Simon Lockyer che tra tutti è stato quello che più ha curato l'aspetto "cross-browser" e la retrocompatibilità anche con browser più vecchi (ad esempio funziona anche con IE8).
L'effetto flip viene realizzato grazie ad istruzioni presenti nella versione 3 del linguaggio Css e tipicamente quella indicata come "trasform", che richiede la presenza di una div ".front" (quella che si vede di default) e di una div ".back", che verrà visualizzata solo al momento del mouse-over.
Il passaggio migliorativo della soluzione escogitata da Simon, è quella legata all'abbinamento con la libreira jQuery che gestirà l'evento "hover", libreria che già gestisce le nuove interfacce "touch", come quelle di tablet e smartphone, sia Android che iOS e soprattutto assicura la retrocompatibilità con i browser non css3 compatibili.

Step 1 - Creazione oggetto in pagina
Iniziamo con l'aggiungere un modulo di login alla pagina, scegliendone il desiderato template dal manager dei template ed assegnamogli un modello ed il corrispondente stile, in modo che gli venga associata una classe css (nel nostro caso ".Login-out1"). Quindi formattiamo il contenuto "Html Login" del modulo con il seguente codice html:

<div id="f1_container">
<div class="front face"></div>
<div class="back face"><input name="£formlogin_hid£" id="£formlogin_hid£" type="hidden" /> <input name="£formlogin_user£" class="comando_return box" id="£formlogin_user£" type="text" /> <input name="£formlogin_password£" class="comando_return box" id="£formlogin_password£" type="password" /> <input name="£formlogin_submit£" class="pulsante_login pulsante" id="£formlogin_submit£" onclick="javascript:presetPostback('£formlogin_hid£')" type="submit" value="Entra >>" /> </div>
</div>

dove riconosciamo la div contenitore ".f1_container" e le div che effettueranno l'effetto flip: .front e .back
L'idea è quella di aggiungere da codice css una immagine alla div ".front" e la stessa opportunamente ridotta di intensità da mettere come sfondo della div ".back", in modo che quando si instauri l'effetto flip, dia l'impressione che siano semplicemente comparsi i comandi di input sopra l'immagine precedente e per questo l'abbiano un pochino oscurata. Ma questo è un esercizio di creatività i cui sviluppi lascio volentieri a ciascuno di voi.

Step 2 - Aggiunta azione javascript
Aggiungiamo quindi l'azione javascript responsabile di intercettare l'evento hover (con declinazioni "touch" come dicevamo poc'anzi) e per questo sfruttiamo appieno la libreria jQuery incorporata in GiapCMS, assegnando il seguente codice all'evento "Page Load" del modulo in questione:

$('#f1_container').hover(function(){
            $(this).addClass('flip');
        },function(){
            $(this).removeClass('flip');
});

Questo breve codice ha l'unico scopo di aggiungere/rimuovere la classe "flip" alla div "f1_container", in modo che possa entrare in azione il codice css che abbineremo a tale selettore (".flip").

Step 3 - Aggiungiamo il codice css3
Non resta che aggiungere il codice css3 per completare l'opera, che avremo cura di inserire direttamente all'interno del codice "html login", in modo da evitare qualsivoglia troncamento dovuto ad istruzioni non riconoscibili da parte dello Style Editor.

<style type="text/css">
    .Login-out1 #f1_container
    {
    perspective: 600;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    }
    .Login-out1 .front
    {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    }
    .Login-out1 .flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    }
    .Login-out1 .back
    {
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    }
    .Login-out1 .flip .back {
    z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
    }
</style>

Quello sopra riportato è preso pari-pari dal codice messo gentilmente a disposizione dal blog di Simon Lockyer con gli opportuni adattamenti ai nostri selettori. Noterete la presenza dell'istruzione "transform: rotateY(180deg)" (nelle declinazioni dei vari motori presenti nei browser moderni) che provoca proprio la rotazione di 180° lungo l'asse Y della scheda ".front", visualizzando di fatto la scheda ".back".

Al normale codice css viene poi demandato l'onere di visualizzare le giuste immagini di sfondo, attraverso i selettori ".front" e ".back", oltre alle dimensioni da dare alle schede attraverso il selettore ".face".

Un esempio operativo di questo codice potete trovarlo sul sito yourpersonalmood.com

Buon divertimento con GiapCMS.
Autore: Livio Fedeli
Aggiungi un commento
RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
RadEditor's components - toolbar, content area, modes and modules
   
Toolbar's wrapper  
Content area wrapper
RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.
It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
Editor Mode buttonsStatistics moduleEditor resizer
 
 
RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.
   
Nominativo
E-mail   (non viene visualizzata)
Antispam
 

Effettivamente funziona anche con iPad ed iPhone, un ottimo suggerimento, ne terrò sicuramente conto. Grazie