Kuna lehekülgede paigutus muutub üha raskemaks, vajavad arendajad juurdepääsu rohkem mõõtühikutele, et kehastada disaini. Lisaks tavalisele intressidele, em ja rem ja pikslid on uuemad mõõtühikud mõõtmise VW ja VH, mõlemad VMIN ja Vmax seotud nendega, pakkudes võimsamaid viise luua adaptiivne disainmis sageli võib aidata loobuda @media üleminekupunktide kasutamisest.
Me läheme kaugemale huvi
Traditsioonilised CSS-mõõtühikud loovad veebidisainis järgmised probleemid:
- Mõõtmisprotsendi ühik ei tööta alati ootuspäraselt. Arendajad peavad mäletama väliseid hoiuseid, seadistades elementide mõõtmeid. Te ei tohiks kasutada mõõtmisprotsendi mõõdet, et määrata kehaelemendi kõrgus. Fondi suuruse salvestamine: 50% täpsustab teksti suuruse võrdse poole oma standardse suurusega ja ei kehtesta sõltuvust teksti suuruse ja selle elemendi suuruse vahel.
- Brauseri akna erinevate suuruste ideaalse vormi näitajaid on peaaegu võimatu luua. See on väga raske tagada, et element on täiesti ruudu ja samal ajal adaptiivne.
Mõõtmisühikud VW ja VH lahendavad suuresti kõik need probleemid.
Ideaalsete proportsioonide toetamine
Kasutades mõõtühikuid VW ja VH, see on väga lihtne luua täiuslik arvud veebilehti. Neid üksusi saab kasutada peaaegu kõigi mõõtmete määramiseks cSS-i omadused. Seega, kui teil on vaja luua element, mis koos brauseri aknaga, kulub 20% selle laiusest ja jääb ruudukujuliseks, peate määrata samaväärtused laiuse ja kõrguse omaduste abil, kasutades VW mõõtühiku abil:
Div.Twentysquare (taust: # 999 ; Laius: 20vw; Kõrgus: 20vw; )
Vaata selle näite demonstreerimist allpool, minge lingile ja proovige vaadata vaateseadme suurust, et näha arvude suuruse muutmist.
Kasutades sama meetodit, saate hõlpsasti luua ristküliku, mille kõrgus on kaks korda suurem kui selle laiusega brauseri akna suurus:
Div.netWorect (laius: 20vw; kõrgus: 40VW;)
Määrake bänneri täiusliku suuruse suhe on väga lihtne järgmiste CSS-koodiga:
Div.Goldenrect (laius: 100VW; kõrgus: 61 .8VW; taust: punane;)
Optimaalse teksti skaleerimiseks adaptiivses plokis osalege kõigis sellele antud helitugevusele, peate lihtsalt määrama VW mõõtühikute fondi suuruse.
Tõlge - Djurin
Autorilt: Ristkülik sees ristkülikud: see on see, kuidas meie veebilehti alati ehitatud. Oleme püüdnud vabastada end piirangutest pikka aega CSS-i abil geomeetriliste näitajate loomiseks, kuid need arvud ei ole kunagi mõjutanud sisu, mis on sisustatud elementide sees või kuidas teised elemendid asuvad lehel suhteliselt kaunistatud.
Uus CSS-i spetsifikatsioon näitajatele muudab asjade praegust positsiooni. Adobe esitatud 2012. aasta keskel, selle eesmärk on anda veebidisaineritele võime muuta sisu sisu ja suhteliselt keerulisi jooniseid sisu ja ümber - midagi, mida me ei oleks varem saavutanud, isegi kasutades JavaScripti.
Näiteks pöörake tähelepanu sellele, kuidas tekstivoogude ümmargused pildid järgmisel kujunduses. Ilma arvudeta oleks tekstis ristkülikukujuline kuju - rafineeritud vastuvõtu viskamine, mis tekitab disaini järgmisele tasandile.
Pange tähele, kuidas tekst on ümardatud kuju piki plaadi servades selles näites. CSS-i andmete kasutamine saame luua sarnase disaini ja veebilehe jaoks.
Vaatame üksikasjalikult, kuidas arvud töötavad ja kuidas neid kasutada.
Brauseri toetus
CSS-i arvud on endiselt toetatud ainult Webkit Nightly ja Chrome'i kanaari juures, kuid nende 1. taseme moodul on jõudnud kandidaadi soovituse olekule, seega spetsifikatsioonis määratletud omadused ja süntaks on üsna stabiilne. See võtab veidi aega enne ülejäänud brausereid hakkavad neid säilitama. See tase on keskendunud nendele omadustele arvud, mis muudavad sisu voolu ümber joonisel. Eelkõige keskendub see kuju-väljaspool vara ja sellega seotud.
Kombinatsioonis teiste hiljutiste võimalustega, näiteks trimmimise ja ülekatte mask, CSS-filtrid ja kokkuvarisemine ja ühinemine, võimaldab CSS-arvud luua keerulisema peene disaini, ilma et soovite kasutada graafilisi toimetajaid, nagu näiteks Photoshop ja Indesign.
Tulevased CSS-i taseme arvud pööravad tähelepanu ka arvnäitajate sisu kujundamisele. Näiteks tänapäeval piisab, et lihtsalt luua rombiline figuur CSS: lihtsalt lülitage element 45 kraadi ja seejärel lülitage sisu sisse vastupidine suundNii et see asub lehel horisontaalselt. Kuid Rhombuse sees olev sisu ei võta sobivat vormi ja jääb alati ristkülikukujuliseks. Selleks ajaks, kui vormi sisemus on rakendatud, saame teha sisu liiga rombilise, luues märgi alla, mis sarnaneb allpool toodud pildiga.
Varsti võimaldavad CSS-i arvud ka teksti sees olevate teemantide sees olevate teemantide asemel ülevoolu kasutamise asemel asus tekst ise konteineri servade suhtes võrreldes..
CSS-i andmete kasutamiseks täna Chrome Canary, peate lubama märkeruut, mis muudab ligipääsetavad eksperimentaalsed omadused.
CSS-i näitaja loomine
Te saate elemendile joonise rakendada kujundite omaduste abil. Sa läbivad näitaja väärtuse kvaliteedi näitaja. Funktsioonide arv on koodi osa, kus te edastate parameetrid, mis määravad objektile taotleda joonise.
Arvud saab luua ühe järgmistest funktsioonidest:
Iga näitaja määratakse punktide komplekti järgi. Mõned funktsioonid võtavad punkte parameetritena; Teised - aktsepteerivad kompenseerimisparameetreid, kuid nad lõpuks joonistavad elementide arvud punktide komplektina. Me analüüsime iga nende funktsiooni parameetreid näidete kohta.
See arv saab määrata ka pildist eemaldades alfa-kanal. Kui pilt edastatakse kuju omandile, otsib brauser kujutise kujutise kujutamise läviväärtuse alusel. Joonis määratakse pikslite abil, mille alfa väärtus on ülemäärase künnise kohal. Pildil peab olema cors ühilduvus. Kui mingil põhjusel ette nähtud põhjus ei ole kättesaadavad (näiteks see ei ole olemas), siis ei rakendata ühtegi numbrit.
Järgmised arvud võtavad eespool kirjeldatud funktsioone väärtustena:
kuju-väljaspool: põhjustab sisu kuju (väljaspool)
shape-sees: sisu võtab selle kuju kuju
Saate kasutada kuju-väljaspool vara koos kuju-varu, et lisada välise taande ümber joonisel, mis liigutab sisu joonist, jättes ruumi nende vahel. Samuti, kuidas ja kuju-väljaspool saab kuju-marginaal vara, kuju-sees saab kuju-polsterduse vara, mis lisab sisemise taande.
Kasutades joonise või funktsiooni omadusi, deklareerides kuju elemendi, saate teha ainult ühe rea CSS-koodiga:
Element (kuju-väljaspool: Circle (); / * Sisu väidab ringi element * /)
Element (kuju-väljaspool: URL (tee / to / pildi-with-shape.png);)
Element (kuju - väljaspool: URL (tee / to / pilt - koos - kuju. Png);) |
Aga ... kui te rakendate seda rida CSS-koodi üksusele, ei rakendata seda, kui seda ei täideta, kui järgmised tingimused ei ole täidetud:
Element peab olema ujuv. Tulevased CSS-i arvud võimaldavad meil tuvastada mitte-ujuvate elementide arvud, kuid sellist võimalust ei ole.
Element tuleb täpsustada. Koordinaatsüsteemi loomiseks kasutatakse elemendiga määratud kõrgust ja laiust.
Nagu te nägid ülaltoodud funktsioonides, määratakse arvud punktide kogumi järgi. Kuna punktid on koordinaadid, nõuab brauser koordinaatide süsteemi teada, kus iga punkt peaks olema elemendil. Seega toimiks näiteks ülalpool, kui tal oleks järgmine:
Element (float: vasak; kõrgus: 10em; laiusega: 15em; kuju-väljaspool: ring ();)
Element (float: vasak; kõrgus: 10em; laius: 15em; kuju - väljaspool: ringi ();) |
Teatavate suuruste ülesanne ei mõjuta siiski tema reageerimisvõimet (me räägime sellest hiljem). Kuna iga näitaja on määratletud kui punktide komplekti, mis asub koordinaatide paari abil, mõjutab punkti koordinaatide muutus loodud joonist. Näiteks näitab järgmine joonis heksagoni, mida saab luua polügooni () funktsiooni abil. Joonis koosneb kuuest punktist. Oranži punkti horisontaalse koordinaadi muutmine muudab lõppnäitajat ja mõjutab ka sisu paigutamist sees / väljaspool mis tahes elementi, millele joonise rakendatakse.
Kui element ujub ja on võrdne parempoolse servaga, rakendatakse sellele joonise, et vasakule sisu muudab selle asukoha, kui üheks oranži punkti koordinaatideks on polügooni () funktsiooni sees.
Võrdlusplokk näitaja
CSS-arvud on määratletud ja loodud võrdlusplokis (võrdlusplokk), kus joonis joonistatakse. Lisaks elemendi kõrgusele ja laius on elemendi ploki mudeli komponendid - marginaal kasti, sisukast, polsterduskast ja piirkasti ka kataloogid elemendi joonise määramiseks.
Vaikimisi kasutatakse välise tagastamisüksuse (marginaal kasti) viidena, seega kui element, millele te joonisel rakendate, on juba allpool välist taane, lõpeb näitaja välise tagastamise serval ja mitte piir. Kui soovite kasutada mõningaid muid plokimudeli väärtusi, saate need määrata joonise omaduse funktsiooniga:
kuju-väljaspool: Circle (250px 50% 50%) polsterdamispolster;
kuju - väljaspool: Circle (250px 50% 50%) polsterdamispolster; |
Selle reegli sissepolster-kasti märksõna määrab joonise rakendamise ja piirangute pildistamise kasti kujul (sisemise ülbuse pindala). Ringi () funktsioon määrab ringi, selle suuruse ja paigutuse objekti suhtes võrreldes.
Funktsioonide määratlus funktsioonide abil
Alustame asjaoluga, et me tegeleme kasutaja avatari ringikujulise kujutise teabe tekstiga, nagu kasutajaprofiil või tagasikutsumine.
Kasutades CSS-kuju, teksti ümber kasutaja pildi on sujuvamaks, selle asemel säästa ristkülikukujulise kuju..
Me kasutame ringi () funktsiooni, et rakendada ümmarguse kuju profiili pildile, kasutades järgmist märgistust:
LOREM IPSUM DOLOR ISTE AMET, COSTERTETUR Adipiseerimine Elit. Harum Itaque Nam Banditis Foreiet Enim Eligendi Quae AdiPisci?
Edasta Blanditiis Volupas Tempore Porro Quibusdam Bealae Deleniti Quud aspeores SAPIENTE DOLOOREM Viga! Quo Nam Quasi Soluta repherender Laudantium Optio IPSAM DUCIMUS tagastur Enim Fuga Quibusdam Mollitia Nesciunt Modi.
< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg"aLT \u003d "(! Lang: profiili pilti" / > !}< p > LOREM IPSUM DOLOR ISTE AMET, COSTERTETUR Adipiseerimine Elit. Harum Itaque Nam Banditis Foreiet Enim Eligendi Quae AdiPisci?< / p > < p > Edasta Blanditiis Volupas Tempore Porro Quibusdam Bealae Deleniti Quud aspeores SAPIENTE DOLOOREM Viga! Quo Nam Quasi Soluta repherender Laudantium Optio IPSAM DUCIMUS tagastur Enim Fuga Quibusdam Mollitia Nesciunt Modi.< / p > |
Te võite küsida: "Miks ei saa me piirata piiriraadiust piltide ümardamiseks?" Vastus: Piiriraadiuse vara ei mõjuta sisu asukohta sees ja väljaspool seda, millele seda rakendatakse. See mõjutab ainult elemendi või tausta piire. Taust lõigatakse ümardatud nurkades, kõik. Sisu sees element jääb ristkülikukujuliseks ja sisu väljaspool elementi käitub ka, nagu element jääb ristkülikukujuliseks.
Me kasutame piiriraadiuse vara, et teha ümmarguse pildi - siin on see, mida me teeme, et ümardada pilte või muid objekte lehel:
iMG (float: vasak; laius: 150px; kõrgus: 150px; piir - raadius: 50%; marginaal - parem: 15px;) |
Ilma CSS-numbriteta näeb tekst pildi ruuduna ja ühendab ruudukujulist joonist ja mitte ringi.
Brauseris, mis ei toeta CSS-kujundeid, asub ümmarguse pildi ümber ümbritsev sisu nii, nagu see ei ole ümmargune. Nii näeb see välja vanade brauseritega. Et muuta sisu ühtlustamist konkreetse näitaja ümber, kasutage joonise omadusi.
iMG (float: vasakul; laius: 150px; kõrgus: 150px; piiriraadius: 50%; kuju-väljaspool: ring (); kuju - marginaal: 15px;)
iMG (float: vasak; laius: 150px; kõrgus: 150px; piir - raadius: 50%; kuju - väljaspool: ring (); kuju - marginaal: 15px;) |
Selle koodi abil saab tekstil "näha" pildile rakendatud ümmargust joonist ja väidab selle, nagu on näidatud esimesel ekraanil Schotil. (Saate vaadata tulemust.) Brauserites, mis ei toeta arvnäitajaid, näeb välja nagu teises pildis näidatud.
Võite kasutada ringi () funktsiooni puhas vorm Või selle parameetrite edastamiseks. Siin on selle ametlik süntaks:
ringi () \u003d ring ([
Küsimuste märgid näitavad, et need parameetrid on vabatahtlikud ja neid saab jätta. Parameetrid, mida te unustate, võtab vaikimisi väärtusi. Kui kasutate ringi (), sest see on asendi otsese märkuse asemel, vaikimisi kesklinna kesklinnas on selle elemendi keskmes, millele te seda rakendate.
Ringi raadiuse saab seadistada mis tahes pikkuse pikkuste (PX, EM, PT jne) pikkuste (PX, EM, PT jne), kasutades ka raadiuseid, kasutades parameetreid, kasutades lähimat külge või kõige kaugemat külge, kuid lähim külg on vaikeväärtus See tähendab, et brauser võtab üle raadiuse kaugus elemendi keskelt lähima külg, kaugeim külg kasutab kaugus keskusest kaugele poole.
kuju-väljaspool: ring (kaugeim külg 25% 25%); / * Määrab ringi, mille raadius on võrdne poole pikima küljega, mis asub punktis 25% 25% koordinaatsüsteemis * / kuju sees: ring (250px 500PX 300PX juures); / * Määrab ringi, mille keskus asub 500px horisontaalselt ja 300px vertikaalselt, mille raadius on 250px * /
Ellipsi () funktsioon toimib samuti ringi (), millel on sama väärtuste kogum, välja arvatud see, et raadiuseparameetri asemel on see kaks: üks raadius piki telge, teine \u200b\u200b- telje-y.
ellipse () \u003d ellipsi ([
INSET () funktsioon ei ole otseselt seotud ringi või ellipsiga, seda kasutatakse elemendi sees ristkülikukujuliste kujude loomiseks. Kuna esemed on mõlemad ristkülikukujulised, ei ole vaja ristkülikute loomiseks vaja. Selle asemel aitavad INTAT () aidata meil luua ümarate nurkadega ristkülikuid, nii et sisu voolab ümardatud nurkades alla.
INSET () funktsioon võtab ühest neljast nihutavast parameetrist, mis määravad nihe võrreldes võrdlusseadme servadega, mis määrab elemendi sees oleva ristküliku asukoha. Ümardatud nurgad on näidatud täpselt samamoodi nagu piiriraadius, kasutades ühte neljast väärtusest koos märksõna vooruga.
iNSET () \u003d INSET (nihke (1,4)?)
iNSET () \u003d INSET (nihke (1, 4) [ring< border - radius > ] ? ) |
Järgmine kood loovad ristküliku ümarate nurkadega ujuva elemendiga.
Element (float: vasak; laius: 250px; kõrgus: 150px; kuju-väljaspool: INSET (0px ümmargune 100px) piiripurk;)
Element (float: vasakul; laius: 250px; kõrgus: 150px; kuju - väljaspool: tindmaat (0px ümmargune 100px) piiriülene - kast;) |
Arvude viimane tunnus on polügoon (), mis määratleb keerukamate kahepoolsete arvude abil, kasutades mis tahes arvu punkte. Funktsioon võtab komplekti auru koordinaadid, kus iga paari määrab positsiooni punkti.
Järgmises näites asub ujuv pilt paremas servas, hõivates kogu ekraani kõrguse ja vaate aken vaateid. Me soovime teksti vasakule ronida liivaklaamisse pildi sees ja me kasutame polügooni () funktsiooni, et määrata pildi mittestandardne joonis.
CSS-i kujutise kood on järgmine:
img.Right (float: parem; kõrgus: 100vh; laius: Calc (100VH + 100VH / 4); kuju-väljaspool: polügoon (40% 0, 100% 0, 100% 100%, 40% 100%, 40% %, 45% 40%);)
img. Paremale (float: parem; kõrgus: 100vh; laius: Calc (100VH + 100VH / 4); kuju - väljaspool: polügoon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);) |
Saate määrata punktide koordinaadid, mis määravad joonise pikkuse või protsendiühikute joonise määramiseks, nagu mina. See kood annab vajaliku tulemuse, kuid nagu näete, ei mõjuta joonise funktsioon ülejäänud osa osad väljaspool määratud joonist. Fakt on see, et funktsiooni funktsiooni funktsioon elemendile - kas see on pilt või konteiner või midagi muud - ei mõjuta midagi muud kui sujuvamaks sisu. Taust, piirid ja kõik muu jääb samaks.
Loodud polügooni visuaalselt esitamiseks peame "lõikama pildi osad väljaspool joonist. See aitab meil CSS-i maskeerimismooduli spetsifikatsioonist CSS-i tee vara.
Klipiraja vara võtab sama kuju ja tähenduse sama funktsiooni kujul. Kui me anname sama polügonaalse näitaja, mida kasutasime kuju-väljaspool vara, klipiraja vara, see teeb osa pildi väljaspool joonis.
img.Right (float: parem; kõrgus: 100vh; laius: Calc (100VH + 100VH / 4); kuju-väljaspool: polügoon (40% 0, 100% 0, 100% 100%, 40% 100%, 40% %, 45% 40%); / * Pilte kärpimine joonise * / klipi-tee kontuuril: polügoon (40% 0, 100% 0, 100% 100%, 40% 100%, 45%, 45 % 40%);)
img. Paremale (float: parem; kõrgus: 100vh; laius: Calc (100VH + 100VH / 4); kuju - väljaspool: polügoon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); / * Piltide kärpimine joonise kontuuril * /klipp - tee: hulknurk (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); ) |
Tulemuseks näeb välja selline:
Klipiraja vara toetatakse endiselt koos prefikside, st. See töötab Chrome'is prefiks -webkiti lisamisega. Võite vaadata demo.
Klipp-tee vara on suurepärased satelliidid näitaja näitajaks, kuna see aitab visuaalselt esitada loodud kuju ja kärpsioone väljaspool joonist, nii et teil oleks väga sageli kasutatavad nende kasutamiseks.
Polügon () funktsioon aktsepteerib ka vabatahtlikku märksõna Täita, mis võib olla kas nonzero või isegiodd. See määratleb, kuidas lõikuvad alad polügooni sees käituvad. Täpsema teabe saamiseks vaadake SVG täitmisreeglite vara.
Määratlemine näitaja pildi abil
Et määrata joonise pildi kasutamine, alfa-kanal peab olema pildil, kust brauser ekstraheerib pilt.
Joonis määratakse pikslite poolt, mille alfa väärtus on kõrgem kui teatud künnis. Vaikimisi läviväärtus on OK (täiesti läbipaistev) või saate määrata selle otsese pildi künnise vara abil. Seega võib iga läbipaistmatu pikslit kasutada pildiga määratletud joonise osana.
Tulevased CSS-i arvud võivad võimaldada üleminekut pildi heleduse andmete kasutamisele alfa-kanali asemel. Kui see juhtub, laiendatakse kuju-pildi künnisest, et see hõlmaks künnist või heledust või alfa-kanalit, sõltuvalt lüliti olekust.
Me kasutame elemendi näitaja kindlaksmääramiseks järgmist pilti ja jõume teksti väita:
Muidugi, kui te kasutasite elemendi tausta tausta tausta peab trimmi väljapoole määratud joonist. Maski-kujutise vara (koos vastavate eesliitetega) maskide moodulist aitab selles, sest klipiraja vara ei aktsepteeri alfa-kanali väärtust väärtusena. Tulemuseks näeb välja selline:
Kui loote keerulisi jooniseid, siis võib olla mugav määrata joonise pildi abil. See võimaldab kasutada alfa-pildi kanalit Photoshopis, selle asemel, et seadistada punkte käsitsi.
Teil on ka mugav kasutada pildi asemel funktsiooni funktsiooni asemel, kui teil on palju ujuvaid elemente või melolite erandeid elementi sees - sest sel hetkel Ei ole võimalik deklareerida mitu numbrit ühele elemendile. Aga kui pilt sisaldab mitmeid valdkondi, eemaldab brauser need alad ja kasutab neid.
CSS-i arvud reageeriva disainiga
Kas CSS-i arvud saavad reageeriva disaini jaoks? Praegune spetsifikatsioon kuju-väljaspool hõlmab seda hetke, sest see võimaldab teil määrata suurus elemendi või protsentides või pikkusetes, ja punktid määratlevad näitaja (parameetrid joonise funktsiooni) saab määrata ka protsendina. See tähendab, et antud kujuga seotud element võib olla täielikult tundlik, samuti mis tahes ujuva element, mille mõõtmed on täpsustatud protsentides.
Kuju-sisemus ei ole veel reageeriv, kuid see on sellepärast, et see on nihkunud 2. taseme moodulile. Paljud selle praegused piirangud lähevad järgmisele tasandile.
Tööriistad arvude loomiseks
Keeruliste arvnäitajate loomine funktsioonide abil võib olla aeganõudev ülesanne, eriti kui loote joonise paljude punktide ja koordinaatide abil, kasutades polügooni (). Õnneks töötab veebiplatvormi Adobe meeskond interaktiivsete vahendite tootmise kallal, et see protsess oleks palju lihtsam. Bear Travis on loonud tööriistade kogumise arvud, mis võimaldavad meil visuaalselt luua hulknurkaarvutusi. Tööriist genereerib joonise funktsiooni. See võib olla kasulik, kuid on selle piirangud, kui te lähete luua konkreetse pildi põhjal joonise, sest tööriist ei paku sellist võimalust.
Adobe Web Platform välja töötas välja arenenud ja interaktiivse tööriista. Tööriist vabastati hiljuti sulgude vaba toimetaja laiendusena. See võimaldab teil visualiseerida ja muuta kujundeid paremale brauseris ja on võimeline online-eelvaateid, mis värskendab kuju väärtusi stiilis tabelis, kui muudate neid lehel. See annab vahetu visuaalse tagasiside Teie muudatused, mis võimaldavad teil näha, kuidas arvud suhtlevad lehekülje teiste elementidega.
Polügonaalse numbri redigeerimine brauseris, kasutades eelvaate režiimi sulgudes. Ekraani kirje tehtud Razva Calimani.
See tööriist muutub hädavajalikuks, kuna see hõlbustab arvude loomist, redigeerimist ja hallatamist. Razva Caliman, mis selgitab, kuidas helistada kuju redaktori sulgudes ja alustada selle kasutamist.
Future: CSS erandid
CSS-i näitajate spetsifikatsioon oli spetsifikatsioon, mis on pühendatud CSS-andmetele ja eranditele, kuid see oli jagatud. Kuigi CSS-arv määrab kuju-sees- ja kuju-väliste omaduste välja arvatud CSS defineerige omadusi, mis põhjustavad sisu, mis põhjustavad sisu mitte-ujuva elementide kandmiseks, millel on absoluutne positsioneerimine. Nad võimaldavad tugevdada kogu näitajat erinevate külgede sisuga, nagu on näidatud alloleval pildil.
Tulevikus võimaldavad CSS-erandid sisu sellise näitaja väiseta, nagu on näidatud ajakirja käigul. Vask võib olla ka ümmargune ja tekst puudutab seda ka..
Uus tase arvud
Praegune CSS-i spetsifikatsioon on lihtsalt esimene samm. Varsti uued võimalused annavad meile rohkem kontrolli. On vaja luua ja tugevdada sisu, seega on meil lihtsam pöörata paigutusi elus disainiga abiga vaid mõne rida koodi. Praeguseks on spetsifikatsiooni toimetajad keskendunud kuju-välimise lõpuleviimisele ja te võite näha CSS-i andmete toetamist suur kogus brauserid 2014. aasta lõpuks.
Võite kasutada arvud täna osana progressiivse lisaseadme strateegia, teades, et neil on vastuvõetav asendamine mitte-toetavate brauserite. Hiljuti hakkasin neid oma veebisaidil rakendama ja asendamine tundub üsna vastuvõetav. Keerulisema disaini saamiseks saate brauseri toe toetuse kinnitamiseks kasutada skripti ja pakkuda toetust, kui toetust ei ole. Seda skripti abil saate kasutada ka modernizr-testi, et kontrollida, kas kuju-väljaspool vara säilitatakse või alla laadida oma assamblee, mis sisaldab seda testi.
CSS-arvud võimaldavad meil luua teise silla trükkimise ja veebidisaini vahel. Käesoleva artikli näited on lihtsad, kuid nad peaksid andma aluse disaini loomisele, võrreldav ajakirja või plakatiga, muretsemata, kas saate selle ekraanil taastada. Nii et olete õppinud - mitte-ristkülikukujulistest kaubamärkidest arvnäitajate animatsioonile - nüüd eksperimentide aeg.
Vlad Merzehevich
On saitidel, kolmnurgad rakendatakse üldse ja sulgeda osana disainielemendid, näiteks nad olla kursorina mõned objektid, suunates lugeja tähelepanu õigesse kohta. Ka kolmnurgad täidavad dekoratiivseid funktsioone, muutes plokid, kus neid kasutatakse, elegantsemaks ja kaasaegsemaks. Joonisel fig. 1 näitab näidet kolmnurga disainis.
Joonis fig. 1. Triangles veebidisainis
Otse teha kolmnurk cSS-tööriistad See on võimatu, nii et kaks meetodit võimaldavad teil piiri lisada ja muuta.
Piiri kasutamine.
Kuigi piiriülese piiri kaudu loodud piirid ei ole otseselt seotud kolmnurgadega, on see kõige sagedamini kasutatav piir. Kui seadistate elemendi nulllaius ja kõrgus ning paigaldame piisavalt paksu piiri, näeme nelja kolmnurga komplekti (joonis 2). Selguse huvides on kõikide külgede piirid erinevad värvid.
Joonis fig. 2. Piiri lisamine üksusele
Jättes ainult soovitud piiri ja ülejäänud tehes läbipaistvalt, saame soovitud värvi kolmnurga (joonis fig 3).
Joonis fig. 3. Läbipaistvate piiride element
Näide 1 näitab kolmnurga lisamist pseloojandi kaudu pseudo-elemendi :: hiljem.
Näide 1. Triangle'i plokk
Absoluutselt paigutatud elementide puhul ei ole nulli laiuse ja kõrgus vajalik.
Tänu piiri kombinatsioonile saate neli tüüpi kolmnurka, mis koos juba mainitud, annab meile kaheksa võimalust. Nende välimus ja nõutav kood on toodud tabelis. üks.
| Vaade | Stiili |
|---|---|
| piir: 20PX tahke läbipaistev; Piiripeal: 20px tahke roheline; | |
| piir: 20PX tahke läbipaistev; Piiriosa: 20PX tahke roheline; | |
| piir: 20PX tahke läbipaistev; Piiri põhja: 20PX tahke roheline; | |
| piir: 20PX tahke läbipaistev; Piiri vasakpoolne: 20px tahke roheline; | |
| piir: 20PX tahke läbipaistev; Piiripeal: 20px tahke roheline; Piiriosa: 20PX tahke roheline; | |
| piir: 20PX tahke läbipaistev; Piiriosa: 20PX tahke roheline; Piiri põhja: 20PX tahke roheline; | |
| piir: 20PX tahke läbipaistev; Piiri põhja: 20PX tahke roheline; Piiri vasakpoolne: 20px tahke roheline; | |
| piir: 20PX tahke läbipaistev; Piiri vasakpoolne: 20px tahke roheline; Piiripeal: 20px tahke roheline; |
Tabelist võib näha, et nähtamatud piirid hõivata koht, kaaluge seda, kui esemed positsioneerivad. Stiil, samuti on vaja lisada nulli laiuse ja kõrguse või kasutada positsiooni vara, nagu tehti näites 1.
Kolmnurga saab teha teise vormi abil, kui seadistate piiride erinev paksus. Niisiis, kood loomise ploki joonisel fig. 4 on esitatud näites 2.
Joonis fig. 4. Äge kolmnurk
Näide 2. Terav kolmnurk
Piiriga saame tugevad värvilised kolmnurgad, et luua joonisel fig. 5 peavad minema salakaval ja kehtestama ühe elemendi teise peal veidi nihkumise. Jällegi aitavad pseudoelemendid meid: enne ja: pärast (näide 3).
Joonis fig. 5. Raam nurga all
Näide 3. Overlay kolmnurgad
Tänu asjaolule, et me rakendame ühe ühe elemendi teisele elemendi peale, sobib see meetod ainult monotoonse täitmiseks ja ei sobi gradientidele ega taustapilte.
Transformatsiooni kasutamine
Transformatsiooni abil saame ruudukujulist elementi pöörata 45 ° võrra ja saada sellest romb. See ei ole kolmnurk kui selline, nii et me peame jätnud väljaulatuva osa meile ja ülejäänud peita pärast teist elementi (näide 4).
Näide 3. ümberkujundamine
Selle näite tulemus on näidatud joonisel fig. 6.
Joonis fig. 6. Kolmnurk varjuga
Online CSS3 generaator, et luua järsku graafika mõju ja saada oma CSS-koodi. Te saate eraldi muuta erinevaid riike, näiteks: hover ,: aktiivne jne. Teie käed saavad liidese keerukate varjude, gradientide, 3D-mõjude loomiseks tekstiga ja palju muud. Projektil on oma galerii mõju, millest saate alustada oma arengut. Projekti eristusvõime on see, et saate stiili eraldi elementNäiteks varju või gradiendi jaoks.
Kui te esimest korda saidi sisestate, pakume meid sisendväljale, nupud, blokeerida või valima valmis muster projekti galeriist. Alustame midagi lihtsat, näiteks geomeetriliste andmete galeriist. Vali galerii allkirjastage Yin-Yang ja klõpsake paremas ülanurgas olevasse paremas ülanurgas "Get Code":
Näidatakse valmis CSS-i jaoks praeguse arengu jaoks, samuti hTML-i näide Kood. Projekti galerii on veelgi rohkem kui 20 toorikuid erinevate CSS-i arvud ja muidugi saate luua oma.
Samm galerii sektsiooni poolt näeme nuppe, tekstiväljad, Mõju otse tekstile, ülalmainitud arvud ja gradientide komplekti. Me mängime teksti mõjuga:
sait - Wow see "S 3D!
See peaks märganud, et genereeritud CSS on üllatavalt väga puhas ja loetav, mis on väga rahul. Vaatame mingit armas nuppu:
saidi jahe nupp.
Lisafunktsioonide hulka kuuluvad oma seisundi säästmine kohalikusTorage brauseris. Kui te kogemata sakk lõpetasite, siis järgmine kord sa saidile kõik teie muudatused jäävad teiega.
Kui kasutate mittestandardseid fonte Google'i fondid. Enjoycss lisab need automaatselt HTML-i näitena. Minu puhul teksti ja nupud tundub see:
Final CSS on üsna mahukas, nii et ma toota see ainult artikli lõpus:
Yin-Yang (
Float: vasakule;
Laius: 96px;
Kõrgus: 48px;
Positsioon: sugulane;
Piir: 2px tahke # F81;
Border Bottom-laius: 50px;
-Mebkiti piiriraadius: 100%;
Piiriraadius: 100%;
Värv: RGBA (0,0,1);
-O-Text-ülevoolu: klipp;
Teksti ülevoolu: klipp;
-Mebkit-transformation: rotatez (-45deg) skaalaeks (1) Skaapa (1) skaalaz (1);
Transform: Rotatez (-45deg) Scoex (1) Skaapa (1) Skanett (1);
Transfor-päritolu: 50% 50% 0;
Yin-Yang :: enne (
Laius: 12px;
Kõrgus: 12px;
Seisukoht: absoluutne;
Sisu: "";
Üles: 50%;
Vasak: 0;
Piir: 18px tahke # F81;
-Mebkiti piiriraadius: 100%;
Piiriraadius: 100%;
Font: normaalne normaalne normaalne 100% / normaalne aroom, helvetica, sans-serif;
Värv: RGBA (0,0,1);
-O-Text-ülevoolu: klipp;
Teksti ülevoolu: klipp;
Taust: RGBA (255 255 255,1);
Teksti vari: Puudub;
-Mebkit-transforman-päritolu: 50% 50% 0;
Transfor-päritolu: 50% 50% 0;
}
Yin-Yang :: pärast (
Laius: 12px;
Kõrgus: 12px;
Seisukoht: absoluutne;
Sisu: "";
Üles: 50%;
Vasak: 50%;
Piir: 18PX tahke RGBA (255 255,25,1);
-Mebkiti piiriraadius: 100%;
Piiriraadius: 100%;
Font: normaalne normaalne normaalne 100% / normaalne aroom, helvetica, sans-serif;
Värv: RGBA (0,0,1);
-O-Text-ülevoolu: klipp;
Teksti ülevoolu: klipp;
Taust: # F81;
Teksti vari: Puudub;
-Mebkit-transformation: skalex (1) Skaapa (1) skaala (1);
Transform: skalex (1) Skaapa (1) skaalaz (1);
-Mebkit-transforman-päritolu: 50% 50% 0;
Transfor-päritolu: 50% 50% 0;
}
Naudi-CSS-3DText (
Kursor: kursor;
Piir: Puudub;
Font: normaalne normaalne normaalne 72px / normaalne "passero üks", helvetica, sans-serif;
Värv: RGBA (255,255,255,1);
Text-Joondage: keskus;
-O-Text-ülevoolu: klipp;
Teksti ülevoolu: klipp;
Teksti vari: 0 1px 0 RGB (204.204444), 0 2PX 0 RGB (201,201,201), 0 3PX 0 RGB (187,187,187), 0 4PX 0 RGB (185,185,185), 0 5PX 0 RGB (170,170,170), 0 6px 1px RGBA (0 0.0,0980392), 0 0 5PX RGBA (0,0,0,0980392), 0 1px 3PX RGBA (0,0,0,298039), 0 3PX 5PX RGBA (0,0,0,0, 0,2), 0 5PX 10PX RGBA (0.0.0.0.247059), 0 10PX 10PX RGBA (0.0.0.2), 0 20px 20px RGBA (0.0.0.0.14902);
-Mebkit-üleminek: kõik 300 ms kuupmeetri beezier (0,42, 0, 0,58, 1);
-moz-üleminek: kõik 300 ms kuupmeetri beezier (0,42, 0, 0,58, 1);
-O-üleminek: kõik 300 ms kuupmeetri bezier (0,42, 0, 0,58, 1);
Üleminek: kõik 300 ms kuupmeetri beezier (0,42, 0, 0,58, 1);
-Mebkit-transformation: skalex (1) Skaapa (1) skaala (1);
Transform: skalex (1) Skaapa (1) skaalaz (1);
-Mebkit-transforman-päritolu: 50% 50% 0;
Transfor-päritolu: 50% 50% 0;
}
Naudi-CSS-3DText: Hover (
Värv: RGBA (169,214,169,1);
Teksti vari: 0 1px 0 Rgba (255,255,25,1,1), 0 2px 0 RGBA (255,255,25,1,1), 0 3PX 0 RGBA (255,255,25,1,1,25,2,25 , 2,1,25,25,25,1,2,1,25,1), 0 5px 0 Rgba (255,255,255, 1), 0 6px 1px RGBA (0,0,0,0980392), 0 0 5px RGBA (0,0,0,0980392), 0 1px 3PX RGBA (0,0,0,0,98039), 0 3PX 5PX RGBA (0,0,0,0,2), 0 - \\ t 5px 10PX RGBA (0,0,0,247059), 0 -7px 10PX RGBA (0,0,0,2), 0 -15px 20PX RGBA (0,0, 0.0.14902);
-Mebkit-üleminek: kõik 200 ms kuupmeetri beezier (0,42, 0, 0,58, 1) 10s;
-Moz-üleminek: kõik 200 ms kuupmeetri beezier (0,42, 0, 0,58, 1) 10s;
-O-üleminek: kõik 200 ms kuupmeetri beezier (0,42, 0, 0,58, 1) 10s;
Üleminek: kõik 200 ms kuupmeetri bezier (0,42, 0, 0,58, 1) 10s;
}
Tagasiside - nupp (
Ekraan: Inline-plokk;
Float: vasakule;
Positsioon: sugulane;
Kursor: kursor;
Marginaal: 0 2% 0 0;
Polster: 12px 22px;
Ülevoolu: peidetud;
Piir: Puudub;
Font: normaalne tavaline julge 1.6em / normaalne "Syncopate", Helvetica, Sans-Serif;
Värv: # ECF0F1;
-O-Text-ülevoolu: klipp;
Teksti ülevoolu: klipp;
-Mebkit-
Taustade päritolu: Padding-Box;
Taustklipp: piirkasti;
Taustasuurus: auto auto;
-Mebkit-box-vari: 0 10px 0 0 Rgba (178,49,49,1);
Box-Shadow: 0 10px 0 0 RGBA (178,49,49,1);
Tekst-vari: 0 0 0 RGB (196,80,78), 1PX 1PX 0 RGB (196,80,78), 2PX 2PX 0 RGB (196,80,78), 3PX 3PX 0 RGB (196,80,78 ), 4PX 4PX 0 RGB (196,80,78), 5PX 5PX 0 RGB (196,80,78), 6PX 6PX 0 RGB (196,80,78), 7PX 7PX 0 RGB (196,80,78), 8PX 8PX 0 RGB (196,80,78), 9PX 9PX 0 RGB (196,80,78), 10PX 10PX 0 RGB (196,80,78), 11PX 11PX 0 RGB (196,80,78), 12px 12px 0 RGB (196,80,78), 13PX 13PX 0 RGB (196,80,78), 14PX 14PX 0 RGB (196,80,78), 15PX 15PX 0 RGB (196,80,78), 16px 16px 0 RGB (196,80,78), 17PX 17PX 0 RGB (196,80,78), 18PX 18PX 0 RGB (196,80,78), 19px 19px 0 RGB (196,80,78), 20PX 20PX 0 RGB (196 80,78), 21PX 21PX 0 RGB (196,80,78), 22px 22px 0 RGB (196,80,78), 23PX 23PX 0 RGB (196,80,78), 24px 24px 0 RGB (196,80, 78) , 25px 25px 0 RGB (196,80,78), 26PX 26PX 0 RGB (196,80,78), 27PX 27PX 0 RGB (196,80,78), 28px 28px 0 RGB (196,80,78), 29px 29px 0 RGB (196.80.78), 30PX 30PX 0 RGB (196,80,78), 31PX 31PX 0 RGB (196,80,78), 32PX 32PX 0 RGB (196,80,78), 33PX 33PX 0 RGB ( 196,80,78), 34PX 34PX 0 RGB (196,80,78 ), 35PX 35PX 0 RGB (196,80,78), 36PX 36PX 0 RGB (196,80,78), 37PX 37PX 0 RGB (196,80,78), 38PX 38PX 0 RGB (196,80,78), 39PX 39PX 0 RGB (196,80,78), 40PX 40PX 0 RGB (196,80,78), 41PX 41px 0 RGB (196,80,78), 42PX 42PX 0 RGB (196,80,78), 43PX 43PX 0 RGB (196,80,78), 44PX 44PX 0 RGB (196,80,78), 45PX 45PX 0 RGB (196,80,78), 46PX 46PX 0 RGB (196,80,78), 47PX 47PX 0 RGB (196.80.78), 48PX 48PX 0 RGB (196,80,78), 1px 1px 0 RGBA (196,80,78,0,980392), 2PX 2PX 0 RGBA (196,80,78,0,0,960784), 3PX 3PX 0 Rgba (196,80,78,0,941176), 4PX 4PX 0 RGBA (196,80,78,0,921569), 5PX 5PX 0 RGBA (196.80,78,0,901961), 6px 6px 0 Rgba (196.80.78 0.882353), 7PX 7PX 0 RGBA (196,80,78,0,862745), 8PX 8PX 0 RGBA (196,80,78,0,78,43137), 9px 9px 0 Rgba (196,80,78,0,819608), 10PX 10PX 0 RGBA (196,80,78, 0,8), 11px 11px 0 Rgba (196,80,78,0,780392), 12px 12px 0 Rgba (196,80,78,0,760784), 13PX 13PX 0 RGBA (196,80,78,0,0,0,0, 0,0,741,11,80,78,0,064,80,78,0,064,1176), 14px 14px 0 Rgba (196.80,78,0,721569), 15px 15px 0 Rgba (196,80,78,0,70701961), 16px 16px 0 Rgba (\\ t 196,80,78,0 .682353), 17px 17px 0 Rgba (196,80,78,0658824), 18px 18px 0 Rgba (196,80,78,0639216), 19px 19px 0 Rgba (196,80,78,0,0619608 ), 20PX 20PX 0 RGBA (196,80,78,0,6), 21PX 21px 0 Rgba (196,80,78,0580392), 22px 22px 0 Rgba (196,80,78,0,780784), 23px 23px 0 RGBA (196,80,78,0,541176), 24px 24px 0 RGBA (196,80,78,521569), 25px 25px 0 Rgba (196,80,78,0498039), 26px 26px 0 RGBA (196,80,78,0478431), 27px 27px 0 RGBA (196, 80,78.0.458824), 28px 28px 0 RGBA (196,80,78,0,939216), 29px 29px 0 RGBA (196,80,78,0. 419608), 30PX 30PX 0 RGBA (196,80,78,0,4), 31px 31px 0 Rgba (196,80,78.0.380392), 32px 32px 0 Rgba (196,80,78,0360784), 33px 33px 0 RGBA (196,80, 78,0,341176), 34PX 34PX 0 RGBA (196,80,78,0317647), 35PX 35PX 0 RGBA (196,80,78,0,98039), 36px 36px 0 Rgba (196,80,78,0,278431) 37PX 37PX 0 RGBA (196,80,78,0,258824), 38PX 38PX 0 RGBA (196,80,78,0,239216), 39px 39px 0 Rgba (196,80,78,0,219608), 40PX 40PX 0 RGBA (196, 80,78,0,2), 41px 41px 0 RGBA (196,80,78,0,080392), 42PX 42PX 0 RGBA (196,80,78,0,156863), 43px 43px 0 Rgba (196,80,78,07255), 44px 44px 0 Rgba (196,80,78 , 017647), 45px 45px 0 RGBA (196,80,78,0,980392), 46px 46px 0 Rgba (196,80,78,0784314), 47px 47px 0 Rgba (196,80, 78,0788235), 48px 48px 0 Rgba (196,80,78 , 0,792157), 50PX 50PX 0 RGBA (196,80,78,0);
-Mebkit-transformation: skalex (1) Skaapa (1) skaala (1);
Transform: skalex (1) Skaapa (1) skaalaz (1);
-Mebkit-transforman-päritolu: 50% 50% 0;
Transfor-päritolu: 50% 50% 0;
}
Tagasiside-nupp: Hover (
Text-Joondage: keskus;
Taust: -Webkit-lineaarne gradient (-90deg, # CE6161 0, # EF6664 100%);
Taust: -Moz-lineaarne gradient (180deg, # CE6161 0, # EF6664 100%);
Taust: lineaarne gradient (180DEG, # CE6161 0, # EF6664 100%);
Taustpositsioon: 50% 50%;
Taustade päritolu: Padding-Box;
-Mebkit-taustaklipi: Border-kasti;
Taustklipp: piirkasti;
-Mebkit-taustasuurus: auto automaatne;
Taustasuurus: auto auto;
}
Tagasiside - nupp: aktiivne (
Üles: 5px;
Taust: -Webkit-lineaarne gradient (-90deg, # FF8583 0, # FF5350 100%);
Taust: -Moz-lineaarne gradient (180deg, # FF8583 0, # FF5350 100%);
Taust: lineaarne gradient (180DEG, # FF8583 0, # FF5350 100%);
Taustpositsioon: 50% 50%;
-Mebkit-taust-päritolu: polster-kasti;
Taustade päritolu: Padding-Box;
-Mebkit-taustaklipi: Border-kasti;
Taustklipp: piirkasti;
-Mebkit-taustasuurus: auto automaatne;
Taustasuurus: auto auto;
-Mebkit-box-vari: 0 5px 0 0 RGBA (178,49,49,1);
Box-Shadow: 0 5px 0 0 RGBA (178,49,49,1);
