it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Come abilitare la trasformazione CSS in IE6-8 [Suggerimento rapido]

I browser moderni hanno un sacco di supporto per la maggior parte delle proprietà CSS3. Puoi essenzialmente applicare le animazioni CSS, le trasformazioni e i gradienti tra le altre cose con facilità. Tuttavia, ci sono ancora molti utenti di versioni precedenti di versioni di Internet Explorer che non supportano esattamente le nuove proprietà CSS3 . In questo articolo, condividerò suggerimenti rapidi su come abilitare la trasformazione CSS su IE6-8 .

La proprietà CSS Transform ci consente di trasformare un elemento in uno spazio bidimensionale o tridimensionale . Puoi tradurre, ridimensionare, ruotare e inclinare un elemento usando CSS Transform. Per i browser moderni come Firefox, Opera e il browser Webkit supportano CSS Transform con i loro prefissi specifici del fornitore (usando rispettivamente -moz-transform, -o-transform e -webkit-transform ), ma non lo troverete su Internet Explorer. Quindi, in questo articolo, userò la libreria javascript chiamata cssSandpaper che consente cross-browser CSS Transforms, anche nel vecchio IE.

Iniziare

Per prima cosa, scarica cssSandpaper dal repository Github. Quindi, includi le seguenti librerie JavaScript richieste che vengono fornite con cssSandpaper.

La proprietà -sand-transform

cssSandpaper introduce una nuova proprietà con prefisso per applicare la trasformazione . Questa nuova proprietà può essere utilizzata in combinazione con gli altri prefissi del fornitore del browser come -moz-transform, -webkit-transform o altre proprietà con prefisso del browser, ad esempio:

 #container {-moz-transform:  ; -webkit-transfrom:  ; -Sabbia-transform:  ; trasformare:  ; } 

Il cssSandpaper eredita le funzioni CSS standard per eseguire la trasformazione come rotazione e ridimensionamento. Di seguito è riportato un elenco delle funzioni che è possibile utilizzare all'interno della proprietà -sand-transform .

  • ruota (angolo) è usato per ruotare un elemento in gradi o radianti. es .: -sand-transform: rotate(45deg)
  • scale (sx [, sy]) è usato per ridimensionare un elemento. es .: -sand-transform: scale(1[, 2]) questo significa che ridimensioniamo l'elemento sull'asse X in base alla dimensione originale e sull'asse Y come il doppio della dimensione originale.
  • skewX (ax) e skewY (ay) vengono usati per inclinare un elemento attorno agli assi xey degli angoli specificati in gradi o radianti. es: skewX (30deg)
  • matrice (a, c, b, d, tx, ty) viene utilizzata per creare una matrice di trasformazione 2D composta da sei valori specificati.

Usa l'esempio

Supponendo di aver costruito una scatola usando a

. E ora vuoi che la scatola si sposti di 200px orizzontalmente dalla sua posizione iniziale, e allo stesso tempo la giri per 45 gradi. È possibile utilizzare cssSandpaper per ottenere questo effetto, come segue:

 #box {width: 150px; altezza: 100 px; -sand-transform: translate (200px, 0) ruota (45deg); } 

Puoi vedere la demo qui sotto. Prendi nota che dovresti esaminarlo anche in Internet Explorer 6-8.

  • Visualizza la demo
  • Scarica fonte

Conclusione

Questa potrebbe non essere la soluzione più elegante in quanto abbiamo bisogno di impilare un mucchio di librerie JavaScript per ottenere questo semplice effetto. Ma nel caso in cui il tuo capo o il tuo cliente insista per abilitare la rotazione in Internet Explorer 8 (per qualsiasi motivo insensato), puoi usare cssSandpaper per farlo accadere.

Come distribuire SSL e HTTPS in WordPress gratuitamente

Come distribuire SSL e HTTPS in WordPress gratuitamente

La distribuzione di SSL offrirà numerosi vantaggi al tuo sito web. Oltre a migliorare la sicurezza dei siti Web, SSL aiuterebbe anche gli utenti ad acquisire fiducia in un sito Web e ad aumentare le classifiche complessive nei risultati di ricerca di Google.Una volta implementato, il tuo sito Web verrà eseguito in https con il badge lucchetto verde nella barra degli indirizzi del browser.T

(Consigli tecnici e di design)

40 strumenti e app per potenziare il tuo account Instagram

40 strumenti e app per potenziare il tuo account Instagram

Ci siamo divertiti con l'ultimo post su 80 Twitter Tools per fare quasi tutto, quindi abbiamo pensato di rivisitare il formato con Instagram. L'elenco ha messo a disposizione una varietà di strumenti che possono aggiungere più divertimento agli utenti avanzati e agli appassionati di Instagram, dalla pianificazione regolare dei post alla stampa delle foto di Instagram in libri e altri mezzi sorprendenti.I

(Consigli tecnici e di design)