Schermata 2016-08-28 alle 18.43.36

Software di criptazione: Applicazione del design

Settiamo sia la input che la label che la accompagna di adeguate properties (ritrovate in questa repository github), in cui attiviamo anche le transition per quando il focus si concentrerà nei singoli elementi selezionati:

.input__label–kaede {
z-index: 10;
display: block;
width: 100%;
text-align: left;
cursor: text;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

Ecco il codice specifico per l’attivazione al focus:

.input__field–kaede:focus,
.input–filled .input__field–kaede {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition-delay: 0.06s;
transition-delay: 0.06s;
}

.input__field–kaede:focus + .input__label–kaede,
.input–filled .input__label–kaede {
-webkit-transform: translate3d(70%, 0, 0);
transform: translate3d(70%, 0, 0);
pointer-events: none;
}
Utilizziamo il prefix -webkit- per applicare anche la transform: translate3D anche per i browser Chrome & Firefox.

togliamo una property “height” che potrebbe dar noia durante il refresh PHP della pagina, che dà anche un piacevole effetto di border bottom grigio aggiuntivo:

alziamo il button per farlo andare poco sotto (e centrato) le due label, ma utilizzando un position:relative e un top settato adeguatamente per evitare problemi futuri:

.togliMarginBottom {
top: -200px;
position: relative;
}

Per il button, oltre agli stili CSS applicare un filter SVG di distorsione. C0llochiamo la porzione adeguata <html> sopra il <button> di riferimento:

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ class=”svg-filters”>
<defs>
<filter id=”filter-glitch-3″>
<feTurbulence type=”fractalNoise” baseFrequency=”0.000001″ numOctaves=”1″ result=”warp” />
<feOffset dx=”-90″ dy=”-90″ result=”warpOffset” />
<feDisplacementMap xChannelSelector=”R” yChannelSelector=”G” scale=”30″ in=”SourceGraphic” in2=”warpOffset” />
</filter>
</defs>
</svg>

.button–7 {
transform: translateZ(0);
outline: 90px solid transparent !important;
-webkit-filter: url(“#filter-glitch-3″);
filter: url(“../#filter-glitch-3″); }

che verrà successivamente processato con le librerie javascript adeguate.

Il software alle versione 0.5 lo potete trovare qui

Schermata 2016-08-28 alle 18.43.36



'Software di criptazione: Applicazione del design' have no comments

Be the first to comment this post!

Would you like to share your thoughts?

Your email address will not be published.