Tā kā lapu izkārtojums kļūst arvien grūtāks, izstrādātājiem ir nepieciešama piekļuve vairākām mērvienībām, lai iemiesotu dizainu. Papildus parastajām interesēm, EM un REM, un pikseļi ir jaunākas mērvienības VW un VH, gan VMIN, gan VMAX, kas saistīti ar viņiem, nodrošinot spēcīgākus veidus, kā izveidot adaptīvais dizainskas bieži var palīdzēt atteikties no @media pārejas punktiem.
Mēs pārsniedzam intereses
Tradicionālie CSS mērvienības izveido šādas problēmas web dizains:
- Mērīšanas procentuālais īpatsvars ne vienmēr darbojas, kā paredzēts. Izstrādātājiem ir jāatceras ārējie noguldījumi, nosakot elementu izmērus. Jums nevajadzētu izmantot mērvienību, lai iestatītu ķermeņa elementa augstumu. Fonta lieluma ierakstīšana: 50% norāda teksta lielumu, kas ir vienāds ar pusi no tās standarta lieluma, un neparedz atkarību starp teksta lielumu un tā elementa lielumu, kas to satur.
- Tas ir gandrīz neiespējami, lai izveidotu skaitļus par perfektu formu dažādiem izmēriem pārlūkprogrammas loga. Ir ļoti grūti nodrošināt, ka elements ir pilnīgi kvadrātveida un tajā pašā laikā adaptīvā.
Mērīšanas vienības VW un VH lielā mērā atrisina visas šīs problēmas.
Ideāla proporciju atbalstīšana
Izmantojot mērvienības VW un VH, ir ļoti viegli izveidot perfektus skaitļus tīmekļa lapās. Šīs vienības var izmantot, lai iestatītu gandrīz visu izmērus cSS īpašības. Tāpēc, ja jums ir nepieciešams izveidot elementu, kas ar jebkuru pārlūkprogrammas logu, tas aizņem 20% no tā platuma un paliek kvadrātveida, jums ir jānorāda tās pašas platuma un augstuma īpašību vērtības, izmantojot VW mērvienību:
Div.twentysquare (fons: # 999 ; Platums: 20VW; Augstums: 20VW; )
Paskaties uz šīs piemēru demonstrāciju tālāk, dodieties uz saiti un mēģiniet mainīt izmēru skatīšanās ierīci, lai redzētu izmaiņas skaitļu lielumā.
Izmantojot to pašu metodi, jūs varat viegli izveidot taisnstūri, kura augstums ir divreiz vairāk kā tās platums ar jebkuru pārlūkprogrammas loga lielumu:
DIV.Networect (platums: 20VW; Augstums: 40VW;)
Iestatiet reklāmkarogu Perfect izmēra attiecība ir ļoti vienkārša ar šādu CSS kodu:
DIV.Goldenrect (platums: 100vW; Augstums: 61 .8vw; fons: sarkans;)
Lai nodrošinātu optimālu teksta mērogošanu adaptīvā blokā, iesaistīties visos tai paredzētajam apjomam, jums vienkārši nepieciešams iestatīt fonta lielumu VW mērvienībās.
Tulkojums - Djurka
No autora: Taisnstūris iekšpusē taisnstūri: tas ir, kā mūsu tīmekļa lapas vienmēr ir būvētas. Mēs esam mēģinājuši atbrīvot sevi no šiem ierobežojumiem ilgu laiku, izmantojot CSS, lai izveidotu ģeometriskus skaitļus, bet šie skaitļi nekad nav ietekmējuši saturu, kas atrodas dekorētajos elementos, vai arī par to, kā citi elementi atrodas lapā salīdzinoši dekorēts.
Jaunais CSS specifikācija skaitļiem maina pašreizējo atrašanās vietu. Adobe iesniedza 2012. gada vidū, tā mērķis ir sniegt tīmekļa dizaineriem iespēju mainīt satura plūsmu iekšpusē un ap salīdzinoši sarežģītiem skaitļiem - kaut ko, ko mēs nevarējām agrāk, pat izmantojot JavaScript.
Piemēram, pievērsiet uzmanību tam, kā teksta plūsmas apaļas attēlus šādā dizainā. Bez skaitļiem tekstā būtu taisnstūra forma - izmest rafinētu uztveršanu, kas paaugstina dizainu uz nākamo līmeni.
Ņemiet vērā, kā teksts ņem noapaļotu formu gar plāksnes malām šajā piemērā. Izmantojot CSS skaitļus, mēs varam izveidot līdzīgu dizainu un tīmekļa lapu.
Apskatīsim detalizēti, kā skaitļi strādā un kā jūs varat sākt tos izmantot.
Pārlūkprogrammas atbalsts
CSS skaitļi joprojām tiek atbalstīti tikai WebKit Nightly un Chrome Canary, bet to 1. līmeņa modulis ir sasniedzis kandidāta ieteikuma statusu, tāpēc specifikācijā noteiktā īpašuma un sintakse ir diezgan stabila. Tas aizņems nedaudz laika, pirms pārējās pārējās pārlūkprogrammas sāks to uzturēt. Šis līmenis ir koncentrēts uz tiem skaitļu īpašībām, kas maina satura plūsmu ap skaitli. Jo īpaši tas koncentrējas uz formas ārpus īpašuma un saistīta ar to.
Kombinācijā ar citām nesenām iespējām, piemēram, apgriešanu un pārklājumu maska, CSS filtri un koloniju un apvienošanos, CSS skaitļi ļaus mums izveidot sarežģītāku izsmalcinātu dizainu, neizmantojot grafiskos redaktorus, piemēram, Photoshop un InDesign.
Nākotnes CSS līmeņu skaitļi arī pievērsīs uzmanību satura dizainam skaitļos. Piemēram, šodien ir pietiekami, lai vienkārši izveidotu rombisku skaitli CSS: vienkārši pagrieziet elementu līdz 45 grādiem, un pēc tam ieslēdziet saturu tajā iekšā atpakaļgaitas virziensTā, ka tas atrodas lapā horizontāli. Bet saturs iekšpusē iekšpusē Rombusa neņems atbilstošu formu, un vienmēr paliks taisnstūra. Līdz brīdim, kad tiek ieviesta forma iekšpusē īpašums, mēs varam padarīt saturu pārāk rombisku, radot iezīmēšanu, līdzīgi attēlam zemāk.
Drīz CSS skaitļi arī ļaus tekstu iekšpusē kā šie dimanti, nevis apgriešanu vai izmantojot pārplūdi, pats teksts atradās attiecībā pret tvertnes malām.
Lai izmantotu CSS skaitļus šodien Chrome Canary, jums ir nepieciešams, lai iespējotu izvēles rūtiņu, kas padara pieejamas eksperimentālās funkcijas.
CSS skaitļa izveide
Jūs varat piemērot skaitli elementam, izmantojot formu īpašības. Jūs iziet vērtības kvalitātes rādītāju. Funkcija skaitlis ir daļa no koda, kurā jūs nodot parametrus, kas nosaka skaitli vēlaties pieteikties uz objektu.
Skaitļus var izveidot, izmantojot kādu no šīm funkcijām:
Katru skaitli nosaka punktu kopums. Dažas funkcijas ņem punktus kā parametrus; Citi - pieņem kompensēt parametrus, bet tie galu galā izvīsim skaitļus uz elementa kā punktu kopumu. Mēs analizēsim parametrus katrai no šīm funkcijām piemēros.
Attēlu var noteikt arī no attēla, noņemot alfa kanālu. Kad attēls tiek pārraidīts uz formas īpašumu, pārlūks izgūst attēlu no attēla, pamatojoties uz formas attēla sliekšņa vērtību. Attēlu nosaka pikseļi, kura alfa vērtība pārsniedz norādīto slieksni. Attēlam jābūt CORS saderībai. Ja iemesls, kas paredzēts kāda iemesla dēļ nav pieejams (piemēram, tas neeksistē), tad neviens skaitlis netiks piemērots.
Šādi skaitļi ņem vērā iepriekš aprakstītās funkcijas kā vērtības:
forma ārpuse: izraisa saturu, lai pagrieztu formu (ārpuses)
forma iekšpuse: saturs ņem formu skaitli no iekšpuses
Jūs varat izmantot formas ārpus īpašumu kombinācijā ar formas rezervi, lai pievienotu ārējo ievilkumu ap skaitli, kas pārvietos saturu no attēla, atstājot telpu starp tām. Arī kā un formas ārpusē saņem formas maržas īpašumu, formas iekšpuse saņem formas polsterēšanas īpašumu, kas pievieno iekšējo ievilkumu.
Izmantojot attēla vai funkcijas īpašības, deklarējot formas elementu, jūs varat darīt tikai ar vienu rindu CSS kodu:
Elements (forma ārpus: Circle (); / * Saturs licīs apli, kas iestatīts uz elementu * /)
Elements (forma ārpus: URL (ceļš / uz / attēlu ar-shape.png););
Elements (forma - ārpus: URL (ceļš / uz / attēls - ar formu. Png);) |
Bet ... Ja jūs piemērojat šo līniju CSS kodu uz objektu, šis skaitlis netiks piemērots tam, ja šādi nosacījumi nav izpildīti:
Elementam jābūt peldošam. Nākotnes CSS skaitļu līmenis ļaus mums identificēt skaitļus ne-peldošiem elementiem, bet nav šādas iespējas.
Elements jānorāda. Augstums un platums, ko nosaka elements, tiks izmantota, lai izveidotu koordinātu sistēmu.
Kā redzējāt iepriekš minētajās funkcijās, skaitļus nosaka punktu kopums. Tā kā punkti ir koordinē, pārlūkprogrammā ir nepieciešama koordinātu sistēma, kur katram punktam jāatrodas uz elementa. Tādējādi piemērs darbosies iepriekš, ja tam būtu šāds:
Elements (pludiņš: pa kreisi; Augstums: 10em; Platums: 15em; Forma-ārpus: Circle ();)
Elements (pludiņš: pa kreisi; Augstums: 10em; Platums: 15em; Forma - ārpus: Circle ();) |
Tomēr dažu izmēru uzdevums neietekmē viņa atsaucība (mēs par to runāsim vēlāk). Tā kā katrs skaitlis ir definēts kā punktu kopums, kas atrodas, izmantojot koordinātu pāris, punktu koordinātu izmaiņas ietekmēs radīto skaitli. Piemēram, nākamais skaitlis parāda sešstūra, ko var izveidot, izmantojot poligonu () funkciju. Attēls sastāv no sešiem punktiem. Orange Point horizontālās koordinātes maiņa mainīsies galīgo skaitli un ietekmēs arī satura izvietošanu iekšpusē / ārpus jebkura vienuma, uz kuru attiecas šis skaitlis.
Ja elements peld un ir vienāds ar labo malu, tiek piemērots skaitlis, tad saturs pa kreisi mainīs savu atrašanās vietu, kad viens no oranžās punktu koordinātas iekšpusē poligona () funkcija tiks mainīta.
Atsauces bloka skaitlis
CSS skaitļi ir definēti un izveidoti atsauces blokā (atskaites lodziņā), kur sastādīts skaitlis. Papildus augstumam un platumam elementa, sastāvdaļas bloka modeļa elementa - margin kastes, satura kasti, polsterēšanas kasti un robežu kasti ir arī katalogi, lai noteiktu skaitli elementa.
Pēc noklusējuma ārējā atgriešanās vienība (margin kaste) tiek izmantota kā atsauce, tādējādi, ja elements, uz kuru jūs piemērot skaitli jau ir ārējs ievilkums no turpmāk, šis skaitlis beigsies pie ārējās atgriešanās malas, nevis robeža. Ja jūs vēlaties izmantot dažas citas bloka modeļa vērtības, jūs varat norādīt tos ar attēla iezīmi, ka jūs nodot attēla īpašumu:
forma ārpus: aplis (250px 50% 50%) ailē;
forma - ārpus: Circle (250px 50% 50%) polsterējums; |
Šis noteikums šajā noteikumā nosaka attēla piemērošanu un ierobežojumu polsterēšanas kastes veidā (iekšējās augstprātības apgabals). Aplis () funkcija nosaka apli, tā lielumu un izvietojumu attiecībā pret preci.
Definīcija skaitļu, izmantojot funkcijas
Mēs sāksim ar to, ka mēs risināsim lietotāja Avatar apļveida attēla informācijas tekstu, kā par lietotāja profilu vai atsaukšanu.
Izmantojot CSS formas, teksts ap lietotāja attēlu racionalizējas, tā vietā, lai saglabātu taisnstūra formu..
Mēs izmantosim apli () funkciju, lai izmantotu apaļas formu profila attēlam, izmantojot šādu iezīmēšanu:
Lorem Ipsum Dolor Sit Amet, Consertettur Adipisicing Elit. Harum itaque nam bandīts Eastiet Enim ELIGENDI ADIPISCI?
Assumenda Blanditiis Volupta Tempore Poro Quibusdam Beatae Deleniti Quod Asperiores Sapiente Dolorem Kļūda! Quo Nam Quasi Solutaa Reprehenderit Laudantium Optio Ipsam Ducimus Creetatur Enim Fuga Quibusdam mollitia nescieunt modi.
< img src = "//api.Randomuser.me/0.3.2/portraits/men/7.jpg"alt \u003d "(! Lang: Profila attēls" / > !}< p > Lorem Ipsum Dolor Sit Amet, Consertettur Adipisicing Elit. Harum itaque nam bandīts Eastiet Enim ELIGENDI ADIPISCI?< / p > < p > Assumenda Blanditiis Volupta Tempore Poro Quibusdam Beatae Deleniti Quod Asperiores Sapiente Dolorem Kļūda! Quo Nam Quasi Solutaa Reprehenderit Laudantium Optio Ipsam Ducimus Creetatur Enim Fuga Quibusdam mollitia nescieunt modi.< / p > |
Jūs varat jautāt: "Kāpēc mēs nevaram piemērot pierobežas rādiusu attēlu noapaļošanai?" Atbilde: Robežu rādiuss īpašums neietekmē satura atrašanās vietu un ārpus tās, uz kuru tā tiek izmantota. Tas ietekmē tikai elementa vai fona robežas. Fons tiek sagriezts noapaļotiem stūriem. Saturs elementa iekšienē paliks taisnstūra, un saturs ārpus elementa darbosies arī, it kā elements paliek taisnstūra.
Mēs gatavojamies izmantot Robežu rādiusa īpašumu, lai padarītu apaļo attēlu - šeit ir tas, ko mēs darām, lai apaļas attēlus vai citus objektus lapā:
img (pludiņš: pa kreisi; Platums: 150px; Augstums: 150px; Robežu rādiuss: 50%; Margin - Tiesības: 15px;) |
Bez CSS skaitļiem teksts redz attēlu kā kvadrātu un savieno kvadrātveida skaitli, nevis kārta.
Pārlūkprogrammā, kas neatbalsta CSS formas, saturs ap apaļo attēlu atradīsies tā, it kā tas nebūtu apaļas. Tādā veidā tas izskatīsies vecajās pārlūkprogrammās. Lai mainītu satura racionalizāciju ap konkrētu skaitli, izmantojiet attēla īpašības.
img (pludiņš: pa kreisi; Platums: 150px; Augstums: 150px; Robežu rādiuss: 50%; Formas ārpus: Circle (); Formas rezerve: 15px;)
img (pludiņš: pa kreisi; Platums: 150px; Augstums: 150px; Robežu rādiuss: 50%; Forma - ārpus: Circle (); Forma - Margin: 15px;) |
Izmantojot šo kodu, teksts varēs "redzēt" apaļo skaitli, kas piemērots attēlam, un tas apgalvo, kā parādīts pirmajā ekrāna schot. (Jūs varat aplūkot rezultātu.) Pārlūkprogrammās, kas neatbalsta skaitļus, tas izskatīsies otrajā attēlā.
Jūs varat izmantot apli () funkciju tīra forma Vai pārraidiet parametrus. Šeit ir tās oficiālais sintakse:
aplis () \u003d aplis ([
Jautājumu zīmes liecina, ka šie parametri ir obligāti un tos var palaist garām. Parametri, kurus esat aizmirsis, būs noklusējuma vērtības. Kad jūs izmantojat apli (), kā tas ir, nevis tiešu norādi pozīciju, pēc noklusējuma, centrs apļa būs centrā objekta, uz kuru jūs to piemērot.
Jūs varat iestatīt apļa rādiusu, izmantojot jebkurus garuma garumus (PX, EM, PT utt.) Jūs varat arī iestatīt rādiusu, izmantojot parametrus, izmantojot tuvāko pusi vai vistālāko pusi, bet tuvākā puse ir noklusējuma vērtība, kas nozīmē, ka pārlūks pārņems rādiusu attālumu no elementa centra uz tuvāko pusi, vistālāk-puse izmanto attālumu no centra līdz tālu pusē.
forma ārpus: Circle (vistālāk - 25% 25%); / * Nosaka apli, kura rādiuss ir vienāds ar pusi garāko pusi, kas atrodas tādā vietā ar 25% 25% koordinātu sistēmā * / formas iekšpusē: aplis (250px pie 500px 300px); / * Nosaka apli, kura centrs atrodas 500px horizontāli un 300px vertikāli, ar rādiusu 250px * /
Ellipse () funkcija darbojas, kā arī aplis () ar tādu pašu vērtību kopumu, izņemot to, ka rādiusa parametra vietā ir divi: viens rādiuss gar asi, otrs - uz ass-y.
elipse () \u003d elipse ([
Inset () funkcija nav tieši saistīta ar apli vai elipse, to izmanto, lai izveidotu taisnstūra formas elementa iekšpusē. Tā kā preces ir taisnstūra, tas nav nepieciešams, lai izveidotu taisnstūri. Tā vietā Inset () var palīdzēt mums izveidot taisnstūrus ar noapaļotiem stūriem, lai saturs plūst noapaļotiem stūriem.
Inset () funkcija aizņem no viena līdz četriem nobīdes parametriem, kas nosaka nobīdes attiecībā pret atsauces vienības malām, kas nosaka taisnstūra atrašanās vietu elementā. Noapaļoti stūri ir norādīti tieši tādā pašā veidā kā robežu rādiuss, izmantojot vienu no četrām vērtībām kombinācijā ar atslēgvārdu kārtu.
inset () \u003d Inset (nobīde (1,4)?)
inset () \u003d Inset (nobīde (1, 4) [kārta< border - radius > ] ? ) |
Nākamais kods radīs taisnstūri ar noapaļotiem stūriem uz peldošā elementa.
Elements (pludiņš: pa kreisi; Platums: 250px; Augstums: 150px; Forma-ārpus: Inset (0px Round 100px) Border-Box;)
Elements (pludiņš: pa kreisi; Platums: 250px; Augstums: 150px; Forma - ārpus: Inset (0px Round 100px) robeža - kaste;) |
Skaitļu pēdējā iezīme ir daudzstūris (), kas definē sarežģītākus neskaidrus skaitļus, izmantojot jebkuru punktu skaitu. Funkcija aizņem tvaika koordinātu komplektu, kur katrs pāris nosaka punkta stāvokli.
Nākamajā piemērā peldošais attēls atrodas labajā malā, aizņem visu ekrāna augstumu un izmantojot skatu loga skatus. Mēs vēlamies tekstu kreisajā kāpšanas smilšu pulksteņa iekšpusē attēla, un mēs izmantojam poligonu () funkciju, lai noteiktu nestandarta figūru attēlam.
CSS Iepriekš attēla kodekss ir šāds:
img.right (peldošs: pa labi; Augstums: 100VH; Platums: Calc (100VH + 100VH / 4); Forma ārpus: daudzstūris (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 40% 100%, 45% 60% %, 45% 40%);)
img. Pa labi (peldošs: pa labi; Augstums: 100vh; Platums: Calc (100VH + 100VH / 4); forma - ārpus: daudzstūris (40% 0, 100% 0, 100% 100%, 40% 100%, 45%, 40% 100%, 45% 60%, 45% 40%);); |
Jūs varat iestatīt punktu koordinātas, kas nosaka skaitli garuma vienībās vai procentos, piemēram, man. Šis kods dos nepieciešamo rezultātu, bet, kā jūs redzat, attēla funkcija neietekmē atlikušās attēla daļas ārpus norādītā skaitļa. Fakts ir tāds, ka attēla funkcijas izmantošana elementam - vai tas ir attēls vai konteiners vai kaut kas cits - neietekmēs neko citu, nevis racionalizējot saturu. Background, robežas un viss pārējais paliks nemainīgs.
Lai vizuāli iesniegt radīto daudzstūri, mums ir nepieciešams "apdares" daļas attēla ārpus attēla. Tas palīdzēs mums klipkopu īpašumu no CSS maskēšanas moduļa specifikācijas.
Clip-ceļa īpašums veic tādas pašas formas funkcijas un nozīmi kā attēla īpašumu. Ja mēs piešķiram to pašu daudzstūra skaitli, ko mēs izmantojām formas ārpus īpašuma, klipa ceļa īpašumu, tas darīs daļu no attēla ārpus attēla.
img.right (peldošs: pa labi; Augstums: 100VH; Platums: Calc (100VH + 100VH / 4); Forma ārpus: daudzstūris (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 40% 100%, 45% 60% %, 45% 40%); / * Attēlu apgriešana uz attēla kontūras * / Clip-ceļš: daudzstūris (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% % 40%);)
img. Pa labi (peldošs: pa labi; Augstums: 100vh; Platums: Calc (100VH + 100VH / 4); forma - ārpus: daudzstūris (40% 0, 100% 0, 100% 100%, 40% 100%, 45%, 40% 100%, 45% 60%, 45% 40%); / * Apgriežot attēlus attēla kontūrā * /clip - ceļš: daudzstūris (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); ) |
Rezultāts izskatās šādi:
Clip-ceļa īpašums joprojām tiek atbalstīts kopā ar prefiksiem, t.i. Tas darbosies hromā, pievienojot prefiksu -webkit. Jūs varat apskatīt demo.
Clip-ceļa īpašums ir brīnišķīgi satelīti skaitļa skaitlim, jo \u200b\u200btas palīdz vizuāli prezentēt radītās formas un augsnes daļas ārpus attēla, lai jūs tiktu ļoti bieži izmantoti, lai tos izmantotu kopā.
Daudzstūra () funkcija arī pieņem izvēles atslēgvārds Aizpildīt, kas var būt vai nu nulles vai prevodd. Tas nosaka, kā krustojošās zonas iekšpusē poligonos rīkosies. Lai iegūtu sīkāku informāciju, pārbaudiet SVG FILL-NOTEAL īpašumu.
Attēlā definēšana, izmantojot attēlu
Lai iestatītu skaitli, izmantojot attēlu, attēlā ir jābūt alfa kanālam, no kura pārlūkprogramma iegūs attēlu.
Attēlu nosaka pikseļi, kuru alfa vērtība ir augstāka par noteiktu slieksni. Noklusējuma sliekšņa vērtība ir OK (pilnīgi caurspīdīga), vai arī to var norādīt tieši, izmantojot formas attēla sliekšņa īpašumu. Tādējādi jebkuru necaurspīdīgu pikseļu var izmantot kā attēla noteiktā skaitļa.
Nākotnes CSS skaitļi var ļaut pāriet uz attēla spilgtuma datu izmantošanu, nevis alfa kanālu. Ja tas notiek, formas attēla slieksnis tiks paplašināts, iekļaujot slieksni vai spilgtumu vai alfa kanālu, atkarībā no slēdža stāvokļa.
Mēs izmantojam šādu attēlu, lai noteiktu elementa skaitli un piespiest tekstu, lai apgalvotu:
Protams, ja jūs izmantojāt fonu elementam, fons būs jāierosos ārpus norādītā skaitļa. Mask-attēla īpašums (ar attiecīgajiem prefiksiem) no maskas moduļa var palīdzēt šajā, jo klipa ceļa īpašums nepieņem Alpha kanāla vērtību kā vērtību. Rezultāts izskatās šādi:
Ja izveidojat sarežģītus skaitļus, iespējams, ir ērti iestatīt skaitli, izmantojot attēlu. Tas ļaus izmantot Alpha attēlu kanālu Photoshop, nevis iestatīt punktus manuāli.
Jums būs arī ērti izmantot attēlu, nevis funkciju skaitļa, ja jums ir daudz peldošo elementu vai weolate izņēmumi iekšpusē elementa - jo Šis brīdis Nav iespējams paziņot vairākus skaitļus vienam elementam. Bet, ja attēlā ir vairākas jomas, pārlūkprogramma noņem šīs teritorijas un izmanto tos.
CSS skaitļi atsaucīgā dizainā
Var CSS skaitļi nāk par atsaucīgu dizainu? Pašreizējā formas ārpuskopienas specifikācija ietver šo brīdi, jo tas ļauj iestatīt elementa izmēru vai procentos vai garuma vienībās, un var norādīt punktus, kas nosaka skaitli (attēla funkcijas parametrus) var norādīt arī attēlus procentos. Tas nozīmē, ka elements ar noteiktu formu ārpusē var būt pilnībā atsaucīga, kā arī jebkurš peldošs elements ar izmēriem, kas norādīti procentos.
Forma iekšpuse īpašums vēl nav atsaucīgs, bet tas ir tāpēc, ka tas ir pārvietots uz 2. līmeņa moduli. Daudzi no tā pašreizējiem ierobežojumiem iet nākamajā līmenī.
Rīki, lai izveidotu skaitļus
Kompleksu skaitļu izveide, izmantojot funkcijas, var būt laikietilpīgs uzdevums, it īpaši, ja jūs izveidojat skaitli ar daudziem punktiem un koordinātām, izmantojot daudzstūri (). Par laimi, tīmekļa platformas Adobe komanda strādā pie interaktīvo instrumentu ražošanas, lai padarītu šo procesu daudz vieglāku. Bear Travis ir izveidojis instrumentu kolekciju, lai izveidotu skaitļus, kas ļauj mums vizuāli izveidot daudzstūru skaitļus. Šis rīks ģenerē skaitļa funkciju. Tas var būt noderīgi, bet ir ierobežojumi, ja dodaties, lai izveidotu skaitli, pamatojoties uz konkrētu attēlu, jo rīks nesniedz šādu iespēju.
Adobe Web platformu izstrādāja moderāku un interaktīvu rīku. Šis rīks nesen tika izlaists kā paplašinājums brīvā redaktoram iekavās. Tas ļauj vizualizēt un rediģēt formas pa labi pārlūkprogrammā, un ir iespēja tiešsaistes priekšskatījumu, kas atjaunina vērtības formas stila tabulā, kad jūs to mainīsiet lapā. Tas dod tūlītēju vizuālu atsauksmes Jūsu izmaiņas, ļaujot jums redzēt, kā skaitļi mijiedarbojas ar citiem elementiem lapā.
Poligonāla attēla rediģēšana pārlūkā, izmantojot priekšskatījuma režīmu iekavās. Ekrāna ieraksts Made Razvan Caliman.
Šis rīks kļūs neaizstājams, jo tas atvieglo skaitļu radīšanu, rediģēšanu un debagšanu. Razvan Caliman, kas izskaidro, kā izsaukt formas redaktoru iekavās un sākt lietot to.
Nākotne: CSS izņēmumi
CSS skaitļu specifikācija bija specifikācija, kas veltīta CSS skaitļiem un izņēmumiem, bet tas tika sadalīts. Kamēr CSS skaitlis nosaka formas iekšpuses un formas ārpus īpašības, izņēmums CSS nosaka īpašības, kas izraisa saturu, lai cīnītos pret nepeldošiem elementiem, piemēram, ar absolūtu pozicionēšanu. Tie ļauj stiprināt visu skaitli ar saturu no dažādām pusēm, kā parādīts zemāk redzamajā attēlā.
Nākotnē CSS izņēmumi ļaus apmierināt šādu skaitli kā griezumu, kā parādīts žurnāla mijā. Varš var būt arī kārta, un teksts to pieskarsies arī..
Jauns skaitļu līmenis
Pašreizējais CSS skaitļu specifikācija ir tikai pirmais solis. Drīz jaunas iespējas dos mums vairāk kontroles. Ir nepieciešams izveidot un stiprināt saturu, tāpēc mums būs vieglāk ieslēgt izkārtojumus dzīves dizainā ar palīdzību tikai dažas koda rindas. Līdz šim specifikācijas redaktori ir vērsti uz formas aizpildīšanu, un jūs varat redzēt CSS skaitļu atbalstu liels daudzums pārlūkprogrammas līdz 2014. gada beigām.
Jūs varat izmantot skaitļus šodien kā daļu no progresīvās uzlabošanas stratēģijas, zinot, ka viņiem ir pieņemama nomaiņa bez atbalsta pārlūkiem. Es nesen sāku tos izmantot savā tīmekļa vietnē un nomaiņa izskatās diezgan pieņemama. Lai iegūtu sarežģītu dizainu, varat izmantot skriptu, lai pārbaudītu pārlūkprogrammas atbalstu un nodrošinātu jebkādu aizstājēju, ja nav atbalsta. Varat arī izmantot ModernizR testus, izmantojot šo skriptu, lai pārbaudītu, vai tiek uzturēta forma ārpus īpašuma vai lejupielādēt savu montāžu, kas ietver šo testu.
CSS skaitļi ļauj mums izveidot citu tiltu starp drukāšanu un web dizainu. Šajā rakstā piemēri ir vienkārši, bet viņiem vajadzētu dot jums pamatu, lai izveidotu dizainu, salīdzinot ar žurnālu vai plakātu, neuztraucoties par to, vai jūs varat to atjaunot ekrānā. Tātad, ka jūs pētījāt - no ne taisnstūra zīmēm līdz animāciju skaitļu - tagad laika eksperimentiem.
Vlad Merzehevich
Uz vietām, trijstūri tiek piemēroti vispār un tuvu kā daļa no dizaina elementiem, piemēram, tie kalpo kā rādītājs uz kādu objektu, virzot lasītāja uzmanību uz pareizo vietu. Arī trīsstūri veic dekoratīvus funkcijas, padarot blokus, kur tos izmanto, elegantākus un modernākus. Att. 1 parāda piemēru, kā izmantot trijstūra dizainu.
Fig. 1. TRIANGLES WEB DESIGN
Tieši veikt trijstūri cSS rīki Tas ir neiespējami, tāpēc divas metodes ļauj pievienot robežām un pārveidošanai.
Izmantojot robežu.
Lai gan robežas, kas izveidotas ar robežu īpašumu, nav tieši saistītas ar trijstūriem, tā visbiežāk tiek izmantota robeža. Ja iestatāt nulles platumu un augstumu elementa, kā arī instalēt pietiekami biezu robežu, mēs redzēsim komplektu četriem trijstūriem (2. att.). Skaidrai, robežas uz visām pusēm ir noteiktas dažādas krāsas.
Fig. 2. Pievienojot robežu uz posteni
Atstājot tikai vēlamo robežu, un pārējo, veicot caurspīdīgu, mēs iegūstam vēlamās krāsas trīsstūri (3. att.).
Fig. 3. Elements ar caurspīdīgām robežām
1. piemērs parāda trijstūra pievienošanu līdz blokam caur pseidoelementu :: Afterter.
1. piemērs Bloķēt ar trīsstūri
Pilnīgi novietojamiem elementiem nulles platums un augstums nav nepieciešams.
Robežu kombinācijas dēļ jūs varat saņemt četrus vairākus trijstūrus, kas kopā ar jau minēts, dod mums astoņas iespējas. To izskats un nepieciešamais kods ir parādīts tabulā. viens.
| Skats | Stils |
|---|---|
| robeža: 20px ciets caurspīdīgs; Robeža: 20px cieta zaļa; | |
| robeža: 20px ciets caurspīdīgs; Robežu tiesības: 20px cieta zaļa; | |
| robeža: 20px ciets caurspīdīgs; Robežu apakšā: 20px ciets zaļš; | |
| robeža: 20px ciets caurspīdīgs; Robeža pa kreisi: 20px cieta zaļa; | |
| robeža: 20px ciets caurspīdīgs; Robeža: 20px cieta zaļa; Robežu tiesības: 20px cieta zaļa; | |
| robeža: 20px ciets caurspīdīgs; Robežu tiesības: 20px cieta zaļa; Robežu apakšā: 20px ciets zaļš; | |
| robeža: 20px ciets caurspīdīgs; Robežu apakšā: 20px ciets zaļš; Robeža pa kreisi: 20px cieta zaļa; | |
| robeža: 20px ciets caurspīdīgs; Robeža pa kreisi: 20px cieta zaļa; Robeža: 20px cieta zaļa; |
No galda var redzēt, ka neredzamās robežas aizņem vietu, apsveriet to, kad preces pozicionē. Stils, arī ir nepieciešams pievienot nulles platumu un augstumu vai izmantot pozīcijas īpašumu, kā tas tika darīts 1. piemērā.
Triangle var izdarīt ar citu veidlapu, ja iestatāt atšķirīgu robežu biezumu. Tātad, kods, lai izveidotu bloku, kas parādīts 1. attēlā. 4 ir dots 2. piemērā.
Fig. 4. Akūts trijstūris
2. piemērs asu trīsstūris
Ar robežu mēs iegūstam cietas krāsas trijstūri, lai izveidotu rāmi, kas parādīts 1. attēlā. 5 ir jādodas uz viltību un uzlikt vienu elementu virs otra ar nelielu pārvietojumu. Atkal, pseido elementi palīdzēs mums: pirms un: pēc (3. piemērs).
Fig. 5. Rāmis ar stūri
Piemērs 3. Pārklājuma trijstūri
Sakarā ar to, ka mēs izmantojam vienu vienotu elementu virs otra, šī metode ir piemērota tikai monotonu aizpildīšanai un nav piemērots gradientiem vai fona attēliem.
Transformācijas izmantošana
Ar transformācijas palīdzību mēs varam pagriezt kvadrātveida elementu ar 45 ° un saņemt rombu no tā. Tas nav trijstūris kā tāds, tāpēc mums ir nepieciešams atstāt izvirzīto daļu mums, un pārējo slēpt pēc otra elementa (piemērs 4).
3. piemērs transformācija
Šī piemēra rezultāts ir parādīts 1. attēlā. 6.
Fig. 6. Triangle ar ēnu
Online CSS3 ģenerators, lai radītu stāvas grafikas efektus un iegūstot CSS kodu. Jūs varat atsevišķi mainīt stilus dažādām valstīm, piemēram: lidināties ,: Active utt. Jūsu rokas kļūst saskarne, lai izveidotu sarežģītas ēnas, gradientus, 3D efektus, efektus ar tekstu un daudz ko citu. Projektam ir sava galerijas ietekme, no kura jūs varat sākt savu attīstību. Projekta atšķirīga iezīme ir tā, ka jūs varat saņemt stilus atsevišķs elementsPiemēram, ēnā vai gradientam.
Kad jūs pirmo reizi ievadiet vietni, mēs piedāvājam mums izveidot tukšu ievades lauku, pogām, bloķēt vai izvēlēties gatavu modeli no projekta galerijas. Sāksim ar kaut ko vienkāršu, piemēram, no ģeometrisko skaitļu galerijas. Izvēlieties no Gallery Sign Yin-Yang un noklikšķiniet uz "Iegūstiet kodu" augšējā labajā stūrī:
Tiks parādīts gatavs CSS pašreizējai attīstībai, kā arī hTML piemērs Kodu. Projekta galerijā ir pat vairāk nekā 20 sagataves dažādiem CSS skaitļiem un, protams, jūs varat izveidot savu.
Soli pa galerijas sadaļu mēs redzam pogas, teksta lauki, Ietekme tieši uz tekstu, iepriekš minētajiem skaitļiem un slīpuma kopām. Mēs spēlējam ar teksta ietekmi:
vietne - Wow tas ir 3d!
Jāatzīmē, ka radītie CSS ir pārsteidzoši ļoti tīri un lasāmi, kas ir ļoti apmierināti. Apskatīsim kādu gudru pogu:
vietnes atdzist poga.
Papildu funkcijas ietver savu stāvokļa saglabāšanu vietējā pārlūkprogrammā. Ja jūs nejauši aizvērāt cilni, tad nākamajā reizē, kad dodaties uz vietni, visas izmaiņas paliks ar jums.
Izmantojot nestandarta fontus ar Google fonti. Enjoycss automātiski papildina tos kā piemēru HTML. Manā gadījumā, lai tekstu un pogas izskatās šādi:
Galīgie CSS ir diezgan lielgabarīta, tāpēc es to ieviesu tikai raksta beigās:
Yin-yang (
Peldēt: pa kreisi;
Platums: 96px;
Augstums: 48px;
Stāvoklis: radinieks;
Robeža: 2px Solid # F81;
Pierobežas grunts platums: 50px;
-Webkit robežu rādiuss: 100%;
Robežu rādiuss: 100%;
Krāsa: RGBA (0,0,1);
-O-teksta pārplūde: klips;
Teksta pārplūde: klips;
-Webkit-transformācija: Rotatez (-45deg) Scalex (1) skalas (1) skalošana (1);
Transformācija: Rotatez (-45deg) SCALEX (1) skalas (1) skalošana (1);
Transformācijas izcelsme: 50% 50% 0;
Yin-yang :: pirms (
Platums: 12px;
Augstums: 12px;
Stāvoklis: absolūts;
Saturs: "";
Tops: 50%;
pa kreisi: 0;
Robeža: 18px Solid # F81;
-Webkit robežu rādiuss: 100%;
Robežu rādiuss: 100%;
Fonts: Normal Normal Normal 100% / Normal Arial, Helvetica, Sans-Serif;
Krāsa: RGBA (0,0,1);
-O-teksta pārplūde: klips;
Teksta pārplūde: klips;
Priekšvēsture: RGBA (255,255,255,1);
Teksta ēna: nav;
-Webkit-transformācija - 50% 50% 0;
Transformācijas izcelsme: 50% 50% 0;
}
Yin-yang :: pēc (
Platums: 12px;
Augstums: 12px;
Stāvoklis: absolūts;
Saturs: "";
Tops: 50%;
Pa kreisi: 50%;
Robeža: 18px cietā RGBA (255,255,25,1);
-Webkit robežu rādiuss: 100%;
Robežu rādiuss: 100%;
Fonts: Normal Normal Normal 100% / Normal Arial, Helvetica, Sans-Serif;
Krāsa: RGBA (0,0,1);
-O-teksta pārplūde: klips;
Teksta pārplūde: klips;
Fons: # F81;
Teksta ēna: nav;
-Webkit-Transform: SCALEX (1) skalas (1) skalošana (1);
Transform: SCALEX (1) skalas (1) skalas (1);
-Webkit-transformācija - 50% 50% 0;
Transformācijas izcelsme: 50% 50% 0;
}
Enjoy-CSS-3DText (
Kursors: rādītājs;
Robeža: nav;
Fonts: normāls normāls normāls 72px / normāls "passero viens", Helvetica, Sans-Serif;
Krāsa: RGBA (255,255,255,1);
Teksta saskaņošana: centrs;
-O-teksta pārplūde: klips;
Teksta pārplūde: klips;
Teksta ēna: 0 1px 0 RGB (204.20444), 0 2PX 0 RGB (20101,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,0,0980392), 0 0 5PX RGBA (0,0,0,0,0980392), 0 1px 3px RGBA (0,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.0.2), 0 20px 20px RGBA (0.0.0.0.14902);
-Webkit-pāreja: visi 300ms kubikcaurules (0,42, 0, 0.58, 1);
-Moz-pāreja: visi 300MS kubikmetri (0,42, 0, 0.58, 1);
-O-Pāreja: visi 300MS kubikmetri (0,42, 0, 0.58, 1);
Pāreja: visi 300MS kubikmetri (0,42, 0, 0.58, 1);
-Webkit-Transform: SCALEX (1) skalas (1) skalošana (1);
Transform: SCALEX (1) skalas (1) skalas (1);
-Webkit-transformācija - 50% 50% 0;
Transformācijas izcelsme: 50% 50% 0;
}
Enjoy-CSS-3DText: Hover (
Krāsa: RGBA (169,214,169,1);
Teksta ēna: 0 1px 0 RGBA (255,255,255,1), 0 2px 0 RGBA (255,255,25,1,1), 0 3px 0 RGBA (255,255,25,1,1), 0 4px 0 RGBA (255,255,25) , 1,1,25,2,25,22,255, 1), 0 6px 1px RGBA (0,0,0,0,0980392), 0 0 5PX RGBA (0,0,0,0980392), 0 1px 3px RGBA (0,0,0,0,0,98039), 0 3px 5px RGBA (0,0,0,0,0,2), 0 -5px 10px RGBA (0,0,0,0,247059), 0 -7px 10px RGBA (0,0,0,0,0,2), 0 -15px 20px RGBA (0,0, 0.0.14902);
-Webkit-pāreja: visi 200M kubikcaurīri (0,42, 0, 0.58, 1) 10ms;
-Moz-pāreja: visi 200M Cubic-Bezier (0,42, 0, 0.58, 1) 10ms;
-O-pāreja: visi 200MS kubikmetrs (0,42, 0, 0.58, 1) 10ms;
Pāreja: visi 200M Cubic-Bezier (0,42, 0, 0.58, 1) 10ms;
}
Atsauksmes poga (
Displejs: inline bloks;
Peldēt: pa kreisi;
Stāvoklis: radinieks;
Kursors: rādītājs;
Margin: 0 2% 0 0;
Polsterējums: 12px 22px;
Pārplūde: slēpta;
Robeža: nav;
Font: Normal Normal Bold 1.6em / Normal "Syncopate", Helvetica, Sans-Serif;
Krāsa: # ECF0F1;
-O-teksta pārplūde: klips;
Teksta pārplūde: klips;
-Webkit-
Pamatinformācija izcelsme: polsterējums;
Fona klips: robežu kaste;
Pamatinformācija: Auto Auto;
-Webkit-box-ēna: 0 10px 0 0 RGBA (178,49,49,1);
Kaste ēna: 0 10px 0 0 RGBA (178,49,49,1);
Teksta ēna: 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,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,0641176), 14px 14px 0 RGBA (196,80,78,0,721569), 15px 15px 0 RGBA (196,80,78,0,701961), 16px 16px 0 RGBA ( 196,80,78,0 .682353), 17px 17px 0 RGBA (196,80,78,0,0658824), 18px 18px 0 RGBA (196,80,78,0639216), 19px 19px 0 RGBA (196,80,78,0619608 ), 20px 20px 0 RGBA (196,80,78,0,6), 21px 21px 0 RGBA (196,80,78,0,580392), 22px 22px 0 RGBA (196,80,78,0,78,0784), 23px 23px 0 RGBA (196,80,78,0,0,541176), 24px 24px 0 RGBA (196,80,78,0,521569), 25px 25px 0 RGBA (196,80,78,0498039), 26px 26px 0 RGBA (196,80,780478431), 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,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), 41px 41px 0 RGBA (196,80,78,080392), 42px 42px 0 RGBA (196,80,78,0,156863), 43px 43px 0 RGBA (196,80,78,0,7255), 44px 44px 0 RGBA (196,80,78) \\ t , 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) \\ t , 0,792157), 50px 50px 0 RGBA (196,80,78,0);
-Webkit-Transform: SCALEX (1) skalas (1) skalošana (1);
Transform: SCALEX (1) skalas (1) skalas (1);
-Webkit-transformācija - 50% 50% 0;
Transformācijas izcelsme: 50% 50% 0;
}
Atsauksmes poga: Hover (
Teksta saskaņošana: centrs;
Fona: -Webkit lineārā slīpuma (-90deg, # CE6161 0, # EF6664 100%);
Fona: -Moz-lineārā gradients (180deg, # CE6161 0, # EF6664 100%);
Priekšvēsture: lineārā gradients (180deg, # CE6161 0, # EF6664 100%);
Fona stāvoklis: 50% 50%;
Pamatinformācija izcelsme: polsterējums;
-Webkit fona klips: pierobežas kaste;
Fona klips: robežu kaste;
-Webkit fona izmērs: auto auto;
Pamatinformācija: Auto Auto;
}
Atsauksmes poga: Aktīvs (
Tops: 5px;
Fona: -Webkit-lineārā gradients (-90deg, # FF8583 0, # FF5350 100%);
Fona: -moz-lineārā gradients (180deg, # FF8583 0, # FF5350 100%);
Priekšvēsture: lineāra gradients (180deg, # ff8583 0, # FF5350 100%);
Fona stāvoklis: 50% 50%;
-Webkit fona izcelsme: ailē;
Pamatinformācija izcelsme: polsterējums;
-Webkit fona klips: pierobežas kaste;
Fona klips: robežu kaste;
-Webkit fona izmērs: auto auto;
Pamatinformācija: Auto Auto;
-Webkit-box-ēna: 0 5px 0 0 RGBA (178,49,49,1);
Kastes ēna: 0 5px 0 0 RGBA (178,49,49,1);
