Share
È tempo di un po 'più di CSS3 contro Photoshop, e in questa occasione andremo a scavare nelle trasformazioni. Cambiare la forma di un oggetto è una parte enorme del set di strumenti di qualsiasi editor grafico. In questi giorni, con CSS3 possiamo ruotare, ridimensionare e inclinare la forma di un elemento senza la necessità di Photoshop. Proviamolo!
Nota: Tutti i seguenti esempi sono stati testati su Mozilla Firefox, Safari e Chrome. Se vuoi ottenere qualcosa di simile in IE o in qualsiasi altro browser lascia un commento e sarò lieto di aiutarti.
In questo tutorial utilizzeremo gli sfondi sfumatura, gli sfondi Box Shadows e Multiple Images nonché gli effetti Transition e Opacity e Transparency, argomenti trattati nei primi tre tutorial di questa serie:
La rotazione di un elemento è una delle caratteristiche più basilari di qualsiasi editor grafico. L'effetto Rotazione utilizza un valore di coordinate radiali con angoli da 0 a 180 (sia positivi che negativi). Un angolo positivo diventa una rotazione in senso orario e un angolo negativo significa una rotazione in senso antiorario.
In passato era in genere molto complicato ruotare un elemento in HTML, ora con CSS3 tutto è molto semplice:
Ecco le sintassi di una trasformazione di rotazione:
trasformare: ruotare (
Ora imposta una serie di diverse rotazioni angolari per le sezioni HTML:
/ * Trasforma * / / * Ruota di 15 gradi * / .rotate15 -moz-trasforma: ruota (15 gradi); -webkit-transform: ruotare (15deg); / * Ruota di 45 gradi * / .rotate45 -moz-transform: ruota (45 gradi); -webkit-transform: ruotare (45 gradi); / * Ruota -30 gradi * / .rotate-30 -moz-trasforma: ruota (-30 gradi); -webkit-transform: ruotare (-30 gradi); / * Ruota di 180 gradi (testo invertito) * / .rotate180 -moz-transform: ruota (180 gradi); -webkit-transform: ruota (180 gradi); / * Ruota di 270 gradi (testo verticale) * / .rotate270 -moz-transform: ruota (270deg); -webkit-transform: ruotare (270 gradi);
Come puoi vedere, il modo con cui determiniamo le trasformazioni è esattamente come in Photoshop.
Un'altra opzione di trasformazione di base che puoi ottenere con qualsiasi editor grafico è Scala. Lo scaling è piuttosto semplice, aumenta o riduce la larghezza e l'altezza di qualsiasi elemento o gruppo di elementi.
Con CSS3 puoi ridimensionare gli elementi più o meno come in Photoshop, le sintassi da ridimensionare lungo entrambi gli assi sono:
trasformare: scala (
trasformare: scalex (
trasformare: scaley (
Vediamo alcuni esempi:
/ * Scala 50% * / .scale50 -moz-transform: scale (.50); -webkit-transform: scala (.50); / * Scala 120% * / .scale120 -moz-transform: scale (1.2); -webkit-transform: scala (1.2); / * Scala dal 25% al 75% su: hover * / .scale25-75 -moz-transform: scale (.25); -webkit-transform: scala (.25); -webkit-transition: tutti 1s easy-in-out; -moz-transition: tutti 1s easy-in-out; .scale25-75: hover -moz-transform: scale (.75); -webkit-transform: scala (.75); / * Scala 50% larghezza * / .scale50x -moz-transform: scalex (.50); -webkit-transform: scaleX (.50); / * Scala 50% height * / .scale50y -moz-transform: scaley (.50); -webkit-transform: scaley (.50);
Ora guardalo in esecuzione:
Passiamo ad un'altra trasformazione molto semplice ma potente: Inclina. Modificando un angolo è possibile spostare le linee parallele di una forma creando un'illusione prospettica che può essere utilizzata come un effetto 3D.
Con CSS3 è possibile inclinare una forma proprio come in Photoshop, vediamo alcuni esempi:
/ * Skew * / / * Skew 30 gradi X su hover * / .skew30x -webkit-transition: tutti gli anni easy-in-out; -moz-transition: tutti 1s easy-in-out; .skew30x: hover -moz-transform: skewx (30deg); -webkit-transform: skewx (30deg); / * Inclina 15 gradi X * / .skew15x -moz-transform: skewx (15deg); -webkit-transform: skewx (15deg); / * Skew -15 gradi X * / .skew-15x -moz-transform: skewx (-15deg); -webkit-transform: skewx (-15deg); / * Inclina 25 gradi Y * / .skew25y -moz-transform: skewy (25deg); -webkit-transform: skewy (25deg); / * Inclina -25 gradi Y * / .skew-25y -moz-transform: skewy (-25deg); -webkit-transform: skewy (-25deg);
Proviamo a combinare gli stili di trasformazione per creare alcuni effetti radicali:
/ * Combinazione di trasformazioni * /. Trasformato -moz-transform: rotazione (10deg) scala (1.3) skewy (15deg) skewx (-30deg); -webkit-transform: rotazione (10deg) scala (1.3) skewy (15deg) skewx (-30deg;
Di seguito sono riportati alcuni divertenti esempi di ciò che è possibile ottenere usando le trasformazioni. Inizieremo con i miei rendering di Photoshop dei disegni, poi vedremo se possiamo ottenere lo stesso risultato con CSS3 (puoi scaricare la fonte PSD nei file tutorial).
In primo luogo, imposta alcuni CSS generali:
/ * Reset * / html, corpo, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, forma, fieldset, tabella, th, td , img margin: 0; padding: 0; border: 0px; header, section, footer, aside, nav, article, figure display: block; / * Fine del reset * / / * Imposta alcuni stili di base * / body font-family: Arial, Helvetica, sans-serif; color: # 333; html height: 100%; / * Per aggiungere una sfumatura CSS3 a tutto il corpo della pagina devi impostare questa altezza su 100% * /. Wrapper margin: 0px auto; larghezza: 960px; padding: 60px 0px 60px 0px; .left text-align: left; .right text-align: right; .center text-align: center; / * Body background * / body height: 100% ; / * Per aggiungere una sfumatura CSS3 a tutto il corpo della pagina devi impostare questa altezza su 100% * / background-repeat: no-repeat; background-image: -moz-linear-gradient (in alto, # 0096f5, # 00416a); background-image: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 0096f5), a (# 00416a), color-stop (1, # FFF)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (GradientType = 0, startColorstr = # 0096f5, endColorstr = # 00416a)"; / * Per evitare di avere una striscia vuota nella parte inferiore, ci sono un paio di correzioni * / / * background-attachment: fixed; * / / * Funziona ok tranne su IE * / background-color: # 00416a; / * Lo sfondo apparirà piacevole quando scorri, aggiungendo il colore di fondo su tutta la pagina * / / * uno stile di base per una colonna * / .row larghezza: 50%; float: sinistra; margin-bottom: 10px; altezza: 340px; border-bottom: 1px punteggiato #FFF;
Nel primo effetto, abbiamo un fan di tre div e un tag di intestazione. Il trucco qui è usare la proprietà z-index per organizzare correttamente il contenuto.
La struttura HTML:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Adesso dai uno stile alle div e alla voce:
/ * Main Box * / .box width: 190px; altezza: 190px; background-color: RGBA (255,255,255, .85); / * Angoli arrotondati * / -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * Sbarazzarsi di Bleed * / -moz-background-clip: padding; -webkit-background-clip: padding-box; sfondo-clip: padding-box; / * Imposta la posizione * / posizione: relativa; a sinistra: 0px; top: 0px; / * Mostra in alto * / z-index: 3; / * Uno stile di paragrafo di base * / .box p color: # 02263D; padding: 10px; font-size: 11px; line-height: 140%; / * Mostra anche in alto * / z-index: 3; / * Primo livello traslucido * / .box2 / * Imposta il colore di sfondo con RGBA * / background-color: rgba (255,255,255, .5); / * Imposta la posizione * / sinistra: 20px; top: -165px; / * Mostra un livello dietro la casella principale * / z-index: 2; / * Ruota Trabsform * / -moz-transform: ruota (15deg); -webkit-transform: ruotare (15deg); / * Secondo livello traslucido * / .box3 / * Imposta il colore di sfondo con RGBA * / background-color: rgba (255,255,255, .25); / * Imposta la posizione * / sinistra: 30px; top: -325px; / * Mostra due livelli dietro la casella principale * / z-index: 1; / * Ruota Trabsform * / -moz-transform: ruota (30 gradi); -webkit-transform: ruotare (30 gradi); / * Titolo verticale * / .title / * Stili testo * / colore: #FFF; text-transform: uppercase; font-size: 14px; / * Imposta la posizione * / posizione: relativa; a sinistra: -255px; top: -45px; / * Ruota Trasforma * / -moz-trasforma: ruota (-90 gradi); -webkit-transform: ruotare (-90 gradi);
Puoi ruotare in modo indipendente tutti gli elementi all'interno di un elemento html. Questo, combinato con gli effetti di transizione, può essere un ottimo modo per aggiungere attenzione ad alcune aree dei tuoi progetti. Prendi ad esempio il seguente mockup HTML:
Ora ruota l'immagine e la scatola del contenitore da angolazioni diverse (in senso orario e antiorario) all'interno di : hover pseudo classe.
/ * Stile casella * / .box4 / * Larghezza e riempimento * / larghezza: 220 px; altezza: 220px; padding: 10px; / * Colore di sfondo traslucido con RGBA * / background-color: rgba (255,255,255, .85); / * Angoli arrotondati * / -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; / * Sbarazzarsi di Bleed * / -moz-background-clip: padding; -webkit-background-clip: padding-box; sfondo-clip: padding-box; / * Abilita effetti di transizione * / -webkit-transition: tutti 1s easy-in-out; -moz-transition: tutti 1s easy-in-out; transizione: tutti 1s easy-in-out; / * Imposta gli stili dell'immagine all'interno della sezione * / .box4 img / * Un bel bordo * / bordo: 1px solido #FFF; / * Un'ombra di casella per aggiungere un po 'di sensazione profonda * / box-shadow: 5px 5px 5px rgba (0,0,0,0.25); -moz-box-shadow: 5px 5px 5px rgba (0,0,0,0,25); -webkit-box-shadow: 5px 5px 5px rgba (0,0,0,0,25); / * Abilita effetti di transizione * / -webkit-transition: tutti 1s easy-in-out; -moz-transition: tutti 1s easy-in-out; -o-transizione: tutti gli anni di easy-in-out; -ms-transition: tutti 1s easy-in-out; transizione: tutti 1s easy-in-out; / * Ruota al passaggio del mouse * / .box4: passa il mouse / * Ruota -15 gradi CCW * / -moz-trasforma: ruota (-15 gradi); -webkit-transform: ruotare (-15deg);
Spostiamo le cose un ulteriore passo avanti. Con Skew Transforms puoi creare una sorta di profondità 3D per le tue sezioni. Proviamo a creare un modo alternativo di mostrare un elemento da una galleria multimediale, utilizzando un titolo, una descrizione e un tag video HTML5!
Iniziamo con il mockup HTML:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Video di esempio
Dal
Innanzitutto, imposta lo sfondo della sezione del contenitore. Il seguente codice genera una sfumatura lucida che crea una sorta di "orizzonte" per mettere a punto gli elementi successivi.
/ * Imposta il contenitore * / .row2 / * Regola la dimensione e la posizione * / larghezza: 100%; altezza: 650 px; float: sinistra; padding-top: 10px; / * Sai che puoi ridimensionare l'intera sezione * / -moz-transform: scale (.90); -webkit-transform: scala (.90); / * Applicare uno sfondo sfumato * / sfondo: -moz-linear-gradient (superiore, rgba (0,105,175,0) 0%, rgba (0,105,175,0,85) 35%, rgba (0,80,130,0,95) 35%, rgba ( 0,80,130,0) 100%); background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, da (rgba (0,105,175,0)), color-stop (0,35, rgba (0,105,175,0,85)), color-stop (0,35, rgba (0,80,130 , 0,95)), a (rgba (0,80,130,0)));
Imposta gli stili comuni per il testo.
/ * Stili comuni (Niente di veramente difficile qui) * / .top h2 font-size: 20px; colore: #FFF; text-transform: uppercase; padding: 25px; .side p font-size: 20px; colore: #FFF; font-weight: normale; padding: 10px;
Ora modellare il contenitore anteriore, i tag possono gestire quasi tutti gli stili CSS che conosciamo e comportarsi come qualsiasi altro elemento a livello di blocco HTML.
/ * Imposta il front container * / .front / * Imposta la posizione * / position: relativo; a sinistra: 220px; top: 132px; / * Dimensioni * / larghezza: 355 px; height: 200px; background-color: #FFF; / * Skew Y Transform * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Ora la sezione laterale (può essere il video breve o un testo introduttivo.
/ * Imposta il Side Container * / .side / * Position (Accanto al frontalino) * / position: relativo; a sinistra: 575px; top: -45px; larghezza: 130px; height: 200px; / * Imposta uno sfondo sfumato * / background-image: -moz-linear-gradient (sinistra, # 000000, # 313131); background-image: -webkit-gradient (lineare, 0% 0%, 100% 0%, da (# 000000), a (# 313131), color-stop (1, # 313131)); / * Inclina * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Nel caso in cui il testo sia più grande del contenitore * / overflow: nascosto;
Diamo uno stile al titolo.
/ * Il titolo * / .top / * Imposta la Posizione * / posizione: relativa; a sinistra: 220px; top: -360px; larghezza: 355px; altezza: 75px; / * Uno sfondo sfumato * / background-image: -moz-linear-gradient (sinistra, # 000000, # 313131); background-image: -webkit-gradient (lineare, 0% 0%, 100% 0%, da (# 000000), a (# 313131), color-stop (1, # 313131)); / * Inclina in modo che corrisponda alla sezione Frontale * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Ora che abbiamo i div principali al loro posto, aggiungeremo un paio di "floor reflections" (div con uno sfondo sfumato RGBA) solo per dare a questa sezione un effetto più lucido.
.frontreflection / * Imposta la posizione appena sotto la sezione Front * / position: relativo; top: -147px; a sinistra: 220px; larghezza: 355px; height: 200px; / * Inclina per abbinare l'angolo di prospettiva * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg); / * Imposta lo sfondo del gradiente (con il colore di fondo inferiore trasparente) * / sfondo: -moz-linear-gradient (superiore, rgba (182,182,182,1) 0%, rgba (182,182,182,0) 100%); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (rgba (182,182,182,1)), a (rgba (182,182,182,0))); / * Imposta l'opacità come vuoi * / opacità: 0.25; .sidereflection / * Imposta la posizione appena sotto la sezione laterale * / position: relative; a sinistra: 575px; top: -320px; larghezza: 130px; height: 200px; / * Corrisponde all'angolo di inclinazione * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Imposta il gradiente di sfondo * / sfondo: -moz-linear-gradient (in alto, rgba (73,73,73,1) 0%, rgba (73,73,73,0) 100%); background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, da (rgba (10,10,10,1)), a (rgba (10,10,10,0))); / * Imposta l'opacità * / l'opacità: 0.35;
Dai un'occhiata a questa serie di esempi in esecuzione in un browser:
Dai un'occhiata a te stesso e scopri cosa puoi creare con le opzioni di trasformazione CSS3. Grazie per aver letto!
Accentsconagua
