no.hideout-lastation.com
Paradis For Designere Og Utviklere


Slik aktiverer du CSS Transform i IE6-8 [Quick Tip]

Moderne nettlesere har stor støtte for de fleste CSS3-egenskaper. Du kan i hovedsak bruke CSS animasjoner, transformasjoner og gradienter blant annet med letthet. Det er imidlertid fortsatt mange brukere av eldre versjoner av Internet Explorer-versjoner som ikke akkurat støtter de nyere CSS3-egenskapene . I denne artikkelen vil jeg dele raske tips om hvordan du aktiverer CSS-transformasjon på IE6-8 .

CSS Transform-egenskapen tillater oss å transformere et element i to-dimensjonal eller tredimensjonal plass . Du kan oversette, skala, rotere og skjede et element ved hjelp av CSS Transform. For moderne nettlesere som Firefox, Opera og Webkit basert nettleser, støtter CSS Transform med sine leverandørspesifikke prefikser (ved bruk av -moz-transform, -o-transform og -webkit-transform henholdsvis), men du finner det ikke på Internet Explorer. Så her vil jeg bruke javascript bibliotek kalt cssSandpaper som tillater cross-browser CSS Transforms, selv i gamle IE.

Starter

Først last ned cssSandpaper fra Github Repository. Deretter inkluderer du følgende nødvendige JavaScript-biblioteker som følger med cssSandpaper.

The -and-transform Property

cssSandpaper introduserer en ny prefixed egenskap for å bruke transformasjonen . Denne nye egenskapen kan brukes sammen med de andre nettleserforhandler-prefiksene som -moz-transform, -webkit-transform, eller andre -webkit-transform egenskaper for nettleseren, slik som:

 #container {-moz-transform:  ; -webkit-transfrom:  ; -sand-transform:  ; forvandle:  ; } 

CssSandpaper arver standard CSS-funksjoner for å utføre transformasjonen som rotasjon og skalering. Følgende er en liste over funksjonene du kan bruke i egenskapen -sand-transform .

  • rotere (vinkel) brukes til å rotere et element i grader eller radianer. f.eks .: -sand-transform: rotate(45deg)
  • skala (sx [, sy]) brukes til å skalere et element. for eksempel: -sand-transform: scale(1[, 2]) dette betyr at vi skalere elementet på X-aksen i henhold til originalstørrelsen og på Y-aksen som dobbelt så stor som originalstørrelsen.
  • skewX (økse) og skewY (ay) brukes til å skjære et element rundt x- og y-aksene med de angitte vinklene i grader eller radianer. f.eks: skewX (30deg)
  • matrise (a, c, b, d, tx, ty) brukes til å lage 2D transformasjonsmatrise bestående av de angitte seksverdiene.

Bruk Eksempel

Forutsatt at vi har bygget en boks ved hjelp av en

. Og nå vil du ha boksen til å flytte 200px horisontalt bort fra sin opprinnelige posisjon, og samtidig rotere den for 45 grader. Du kan bruke cssSandpaper for å oppnå denne effekten, som følger:

 #box {width: 150px; høyde: 100px; -sand-transform: translate (200px, 0) rotere (45deg); } 

Du kan se demoen nedenfor. Vær oppmerksom på at du bør se på den i Internet Explorer 6-8 også.

  • Se demo
  • Last ned kilde

Konklusjon

Dette er kanskje ikke den mest elegante løsningen som vi trenger for å stable en haug med JavaScript-biblioteker for å oppnå denne enkle effekten. Men hvis sjefen din eller klienten insisterer på å aktivere rotasjon i Internet Explorer 8 (uansett uansett grunn), kan du bruke cssSandpaper for å få dette til å skje.

Nagbot er en robot som motiverer deg til å jobbe gjennom nagging

Nagbot er en robot som motiverer deg til å jobbe gjennom nagging

En av de mer vanlige måtene å motivere noen til å jobbe er ved å irritere dem å gjøre det. Slike er logikken bak Nagbot, en onlinetjeneste som sender skarpe meldinger til telefonen for å minne deg om oppgaver.Bruke Nagbot er relativt grei. Du skriver inn ditt navn, telefonnummer og en oppgave du ønsker å oppnå. Når du h

(Tekniske og design tips)

10 trådløse hodetelefoner som vil endre måten vi hører på

10 trådløse hodetelefoner som vil endre måten vi hører på

For de fleste av oss er øretelefoner et must-ha for pendler og jogger, i lange køer og mens du venter på venner, eller bare for å slappe av og ødelegge etter en hard dag på jobben. Vi lytter til favorittlåtene, lydbøkene, podcasterne, nyhetene og mer, og i denne alderen av trådløse gadgets kaster den trådløse øretelefonen problemet med ustyrte og sammenflettede kabler ut av vinduet. Men virkeli

(Tekniske og design tips)