Share
Det er på tide for noen flere CSS3 versus Photoshop, og ved denne anledningen skal vi grave i transformasjoner. Endring av objektets form er en stor del av grafikkredaktørens verktøysett. I disse dager, med CSS3 kan vi rotere, skala og skjære elementets form uten behov for Photoshop. La oss prøve det!
Merk: Alle følgende eksempler ble testet på Mozilla Firefox, Safari og Chrome. Hvis du vil få noe lignende i IE eller en annen nettleser, legg igjen en kommentar, og jeg vil gjerne hjelpe deg.
I denne opplæringen bruker vi Gradient Backgrounds, Box Shadows og Multiple Images Backgrounds samt overgangseffekter og Opacity and Transparency-stiler, temaer dekket i de første tre opplæringene i denne serien:
Å rotere et element er en av de mer grunnleggende egenskapene til en grafisk editor. Rotasjonseffekten bruker en radialkoordinaterverdi med vinkler fra 0 til 180 (både positive og negative). En positiv vinkel blir en rotasjon med urviseren, og en negativ vinkel betyr en mot urviseren.
Tidligere var det vanligvis svært komplisert å rotere et element i HTML, nå med CSS3 er alt veldig enkelt:
Her er syntaksen til en rotasjonsomforming:
transformere: rotere (
Sett nå en haug med forskjellige vinkelrotasjoner for HTML-seksjoner:
/ * Omformer * / / * Roter 15 grader * / .rotate15 -moz-transformer: roter (15deg); -webkit-transform: roter (15deg); / * Roter 45 grader * / .rotate45 -moz-transform: roter (45deg); -webkit-transform: roter (45deg); / * Roter -30 grader * / .rotat-30 -moz-transformer: roter (-30deg); -webkit-transform: roter (-30deg); / * Roter 180 grader (omvendt tekst) * / .rotate180 -moz-transform: roter (180deg); -webkit-transform: roter (180deg); / * Roter 270 grader (Vertikal tekst) * / .rotate270 -moz-transform: roter (270deg); -webkit-transform: roter (270deg);
Som du kan se, er måten vi bestemmer for transformasjoner på, akkurat som i Photoshop.
Et annet grunnleggende transformeringsalternativ som du kan få med noen grafisk redigeringsprogram, er Scale. Skalering er ganske enkel, det øker eller reduserer bredden og høyden til ethvert element eller en gruppe av elementer.
Med CSS3 kan du skala elementene omtrent det samme som i Photoshop, syntaksene skaleres langs begge akser som:
transformere: skala (
transformere: skalax (
transformere: skalende (
La oss se en rekke eksempler:
/ * Skala 50% * / .scale50 -moz-transform: skala (.50); -webkit-transform: målestokk (0,50); / * Skala 120% * / .scale120 -moz-transform: skala (1.2); -webkit-transform: skala (1,2); / * Skala fra 25% til 75% på: hover * / .scale25-75 -moz-transform: skala (.25); -webkit-transform: målestokk (0,25); -webkit-overgang: alle 1s lett-i-ut; -moz-overgang: alle 1s lett-i-ut; .scale25-75: sveve -moz-transform: skala (.75); -webkit-transform: målestokk (0,75); / * Skala 50% bredde * / .scale50x -moz-transform: scalex (.50); -webkit-transform: scalex (0,50); / * Skala 50% høyde * / .scale50y -moz-transform: scaley (.50); -webkit-transform: Scaley (0,50);
Se nå det kjører:
Flytter videre til en annen veldig grunnleggende, men kraftig transformasjon: Skew. Ved å endre vinkel kan du forskyve parallelllinjene i en form som skaper en perspektivisk illusjon som kan brukes som en 3D-effekt.
Med CSS3 er det mulig å skråforme en form som i Photoshop, la oss se noen eksempler:
/ * Skew * / / * Skew 30 grader X på hover * / .skew30x -webkit-overgang: alle 1s easy-in-out; -moz-overgang: alle 1s lett-i-ut; .skew30x: svever -moz-transform: skewx (30deg); -webkit-transform: skewx (30deg); / * Skew 15 grader X * / .skew15x -moz-transform: skewx (15deg); -webkit-transform: skewx (15deg); / * Skew -15 grader X * / .skew-15x -moz-transform: skewx (-15deg); -webkit-transform: skewx (-15deg); / * Skew 25 degrees Y * / .skew25y -moz-transform: skewy (25deg); -webkit-transform: skewy (25deg); / * Skew -25 grader Y * / .skew-25y -moz-transform: skewy (-25deg); -webkit-transform: skewy (-25deg);
La oss prøve å kombinere transformasjonsstiler for å skape noen radikale effekter:
/ * Kombinere Transformer * / .transformed -moz-transform: roter (10deg) skala (1.3) skewy (15deg) skewx (-30deg); -webkit-transform: roter (10deg) skala (1.3) skewy (15deg) skewx (-30deg;
Nedenfor er det noen morsomme eksempler på hva som kan oppnås ved hjelp av transformasjoner. Vi begynner med mine Photoshop-gjengivelser av designene, så ser vi om vi kan få det samme resultatet med CSS3 (du kan laste ned PSD-kilden i opplæringsfilene).
For det første sett opp noen generelle CSS:
/ * Tilbakestill * / html, kropp, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, skjema, feltsett, tabell, th, td , img margin: 0; polstring: 0; border: 0px; overskrift, seksjon, bunntekst, til side, nav, artikkel, figur display: block; / * End of Reset * / / * Sett opp noen grunnleggende stiler * / body font-family: Arial, Helvetica, sans-serif; color: # 333; html høyde: 100%; / * Hvis du vil legge til en CSS3-gradient på hele siden, må du sette denne høyden til 100% * / .wrapper margin: 0px auto; bredde: 960 x; padding: 60px 0px 60px 0px; .left text-align: left; .right text-align: right; .center text-align: center; / * Kroppsbakgrunn * / kropp høyde: 100% ; / * Hvis du vil legge til en fullstendig CSS3-gradient på siden, må du sette denne høyden til 100% * / bakgrunnsrepetisjon: nei gjenta; bakgrunnsbilde: -moz-lineær-gradient (topp, # 0096f5, # 00416a); bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# 0096f5), til (# 00416a), fargestopp (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)"; / * For å unngå å ha en blank stripe nederst, er det et par fikser * / / * bakgrunnsbestemmelse: fast; * / / * Fungerer ok bortsett fra IE * / bakgrunnsfarge: # 00416a; / * Bakgrunnen vil se bra ut når du ruller, legger bunnfargen over hele siden * / / * en grunnleggende stil for en kolonne * / .row bredde: 50%; float: venstre; margin-bottom: 10px; høyde: 340px; grensebunn: 1px stiplet #FFF;
I den første effekten har vi en fan av tre divs og en overskrift tag. Trikset her er å bruke z-indeksegenskapen til å ordne innholdet ordentlig.
HTML-strukturen:
Lorem Ipsum
Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor in reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Nå stil divs og overskriften:
/ * Hovedboks * / .boks bredde: 190px; høyde: 190px; bakgrunnsfarge: RGBA (255,255,255, 0,85); / * Avrundede hjørner * / -moz-grense-radius: 10px; -webkit-grense-radius: 10px; border-radius: 10px; / * Bli kvitt Bleed * / -moz-background-clip: padding; -webkit-bakgrunnsbilder: polstring-boks; bakgrunnsbilder: polstring / * Still inn posisjonen * / posisjon: relativ; venstre: 0px; top: 0px; / * Vis det på toppen * / z-indeks: 3; / * En grunnleggende Paragraph style * / .box p color: # 02263D; padding: 10px; font-size: 11px; linje-høyde: 140%; / * Vis det også på topp * / z-indeks: 3; / * Første gjennomsiktig lag * / .box2 / * Angi bakgrunnsfarge med RGBA * / bakgrunnsfarge: rgba (255,255,255, .5); / * Still posisjonen * / venstre: 20px; top: -165px; / * Vis det ett nivå bak hovedboksen * / z-indeks: 2; / * Roter Trabsform * / -moz-transform: roter (15deg); -webkit-transform: roter (15deg); / * Second translucent layer * / .box3 / * Angi bakgrunnsfarge med RGBA * / bakgrunnsfarge: rgba (255,255,255, .25); / * Still inn posisjonen * / venstre: 30px; top: -325px; / * Vis det to nivåer bak hovedboksen * / z-indeks: 1; / * Roter Trabsform * / -moz-transform: roter (30deg); -webkit-transform: roter (30deg); / * Vertikal tittel * / .title / * Tekststiler * / farge: #FFF; text-transform: store bokstaver; font-size: 14 piksler; / * Still inn posisjonen * / posisjon: relativ; venstre: -255px; top: -45px; / * Rotere Transform * / -moz-transform: roter (-90deg); -webkit-transform: roter (-90deg);
Du kan selvstendig rotere alle elementene i et HTML-element. Dette, kombinert med overgangseffekter, kan være en fin måte å legge til fokus på noen områder av designene dine. Ta for eksempel følgende HTML-mockup:
Roter nå bildet og containerkassen i forskjellige vinkler (med klokken og mot urviseren) i :sveve pseudoklasse.
/ * Box Style * / .box4 / * Bredde og polstring * / bredde: 220px; høyde: 220px; padding: 10px; / * Gjennomsiktig bakgrunnsfarge med RGBA * / bakgrunnsfarge: rgba (255,255,255, .85); / * Avrundet hjørner * / -moz-grense-radius: 10px; -webkit-grense-radius: 10px; -khtml-grense-radius: 10px; border-radius: 10px; / * Bli kvitt Bleed * / -moz-background-clip: padding; -webkit-bakgrunnsbilder: polstring-boks; bakgrunnsbilder: polstring / * Aktiver overgangseffekter * / -webkit-overgang: alle 1s brukervennlighet; -moz-overgang: alle 1s lett-i-ut; overgang: alle 1s lett-i-ut; / * Angi stilen på bildet i delen * / .box4 img / * En fin ramme * / border: 1px solid #FFF; / * En bokseskygge for å legge til litt dyp sensasjon * / bokseskygge: 5px 5px 5px rgba (0,0,0,0,25); -moz-box-skygge: 5px 5px 5px rgba (0,0,0,0,25); -webkit-boks-skygge: 5px 5px 5px rgba (0,0,0,0,25); / * Aktiver overgangseffekter * / -webkit-overgang: alle 1s brukervennlighet; -moz-overgang: alle 1s lett-i-ut; -o-overgang: alle 1s lett-i-ut; -ms-overgang: alle 1s lett-i-ut; overgang: alle 1s lett-i-ut; / * Roter på hover * / .box4: svever / * Rotate -15deg CCW * / -moz-transform: roter (-15deg); -webkit-transform: roter (-15deg);
La oss flytte tingene et skritt videre. Med Skew Transforms kan du en slags 3D dybde til dine seksjoner. La oss prøve å bygge en alternativ måte å vise et element fra et mediegalleri ved hjelp av en tittel, beskrivelse og en HTML5-videotag!
La oss starte med HTML-mockupen:
Kjenn deg selv med å være med, ha det bra, og gjør det.
Eksempelvideo
Siden a
Først sett opp bakgrunnen til containerseksjonen. Følgende kode genererer en skinnende gradient som skaper en slags "horisont" for å spotte de neste elementene.
/ * Sett beholderen * / .row2 / * Juster størrelsen og posisjonen * / bredden: 100%; høyde: 650 piksler; float: venstre; padding-top: 10px; / * Du vet at du kan skalere hele delen * / -moz-transform: skala (.90); -webkit-transform: målestokk (0,90); / * Bruk en gradientbakgrunn * / bakgrunn: -moz-lineær gradient (topp, 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%); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (rgba (0,105,175,0)), fargestopp (0,35, rgba (0,105,175,0,85)), fargestopp (0,35, rgba (0,80,130 , 0,95)) til (rgba (0,80,130,0)));
Sett de vanlige stilene for tekst.
/ * Vanlige stilarter (ingenting veldig vanskelig her) * / .top h2 font-size: 20px; farge: #fff; text-transform: store bokstaver; padding: 25px; .side p font-size: 20px; farge: #fff; font-vekt: normal; padding: 10px;
Stil nå frontbeholderen, Etiketter kan håndtere nesten alle CSS-stiler vi kjenner, og oppfører seg som alle andre HTML-blokknivåelementer.
/ * La oss sette frontbeholderen * / .front / * Still inn posisjonen * / posisjon: relativ; venstre: 220px; top: 132px; / * Dimensjoner * / bredde: 355px; høyde: 200px; background-color: #fff; / * Skew Y Transform * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Nå side seksjonen (kan være video kort, eller en innledende tekst.
/ * Sett sidebeholderen * / .side / * Posisjon (ved siden av frontbeholderen) * / posisjon: relativ; venstre: 575px; top: -45px; bredde: 130px; høyde: 200px; / * Sett en gradientbakgrunn * / bakgrunnsbilde: -moz-lineær-gradient (venstre, # 000000, # 313131); bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 100% 0%, fra (# 000000), til (# 313131), fargestopp (1, # 313131)); / * Skew it * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Bare hvis teksten er større enn beholderen * / overløp: skjult;
La oss stilen tittelen.
/ * Tittelen * / .top / * Angi posisjonen * / posisjon: relativ; venstre: 220px; top: -360px; bredde: 355px; høyde: 75px; / * En gradientbakgrunn * / bakgrunnsbilde: -moz-lineær-gradient (venstre, # 000000, # 313131); bakgrunnsbilde: -webkit-gradient (lineær, 0% 0%, 100% 0%, fra (# 000000), til (# 313131), fargestopp (1, # 313131)); / * Skew den for å matche Front-delen * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg);
Nå som vi har de viktigste divene på sitt rette sted, vil vi legge til et par "gulvrefleksjoner" (divs med en RGBA-gradientbakgrunn) bare for å gi denne delen en mer glanset effekt.
.frontreflection / * Still posisjonen like under Front-delen * / posisjon: relativ; top: -147px; venstre: 220px; bredde: 355px; høyde: 200px; / * Skew den for å matche perspektivvinkelen * / -moz-transform: skewy (20deg); -webkit-transform: skewy (20deg); / * Angi gradientbakgrunnen (med den nederste stoppfargen gjennomsiktig) * / bakgrunn: -moz-lineær gradient (topp, rgba (182.182,182,1) 0%, rgba (182.182.182,0) 100%); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (rgba (182.182,182,1)), til (rgba (182.182.182,0))); / * Still opaciteten som du vil * / opacity: 0.25; .sidereflection / * Still inn posisjonen like under Side-delen * / posisjon: relativ; venstre: 575px; top: -320px; bredde: 130px; høyde: 200px; / * Match skråvinkelen * / -moz-transform: skewy (-30deg); -webkit-transform: skewy (-30deg); / * Angi bakgrunnsgradienten * / bakgrunn: -moz-lineær gradient (topp, rgba (73,73,73,1) 0%, rgba (73,73,73,0) 100%); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (rgba (10,10,10,1)), til (rgba (10,10,10,0))); / * Angi opacity * / opacity: 0.35;
Sjekk ut dette settet med eksempler som kjører i en nettleser:
Ta en tur og se hva du kan skape med CSS3 transformeringsalternativer. Takk for at du leste!
Accentsconagua
