10 (Vairāk) CSS triki Jūs, iespējams, nepārskatījāt
Ir daudz CSS fragmentu, kurus tīmekļa izstrādātāji var izmantot, lai sasniegtu noteiktus rezultātus, un pēc tam ir CSS triki, ko varat izmantot, lai pielāgotu saturu vertikāli. Tā kā CSS ir arvien attīstošāka vienība, atkal un atkal mēs paklūstam pie atdzistām CSS trikām, kas ir jautri zināt.
Šodienas ziņojumā es jūs iepazīstināšu 10 vēl CSS atribūti un triki, ko jūs nezināt.
1. Uzrakstiet vertikāli
Tiek izsaukts CSS atribūts rakstīšanas režīms kas pieņem vienu no šīm trim vērtībām; horizontāli-tb, vertikāli-rl un vertikāli-lr.
horizontāli-tb ir noklusējuma un tas izraisa tipisku kreiso vai labo horizontālo teksta plūsmu elementā.
The vertikāli - * tomēr vērtības ir vertikālajai bloka plūsmai, un pārlūkprogrammas rada tekstu no augšas uz leju. In vertikāli-rl, jaunās līnijas tiek pievienotas kreisajā pusē no iepriekšējām un otrādi vertikāli-lr.
Tas ir noderīgi tādu valodu parādīšana kā ķīniešu un japāņu kas parasti tiek rakstīti no augšas uz leju un arī tad, kad vēlaties rādīt tekstu vertikāli, lai saglabātu horizontālo telpu, piemēram, tabulas galvenēs.
Piezīme: Ja vēlaties kontrolēt atsevišķu burtu norādījumus, varat izmantot teksta orientāciju, pagriežot tos vertikāli vai uz sāniem.
-webkit-rakstīšanas režīms: vertikālais-rl; -ms-rakstīšanas režīms: tb-rl; rakstīšanas režīms: vertikālais-rl;
2. Atkārtoti izmantot krāsu vērtību
Atslēgvārds currentColor ir vērtība krāsa atribūtu, un to var izmantot citos atribūtos, kas pieņem tādas krāsu vērtības kā fona.
div fons: lineārais gradients (90deg, currentColor 50%, melns 50%);… krāsa: # FFD700; / * currentColor ir # FFD700 * /
3. Blend foni
Elementam var būt vairāk nekā viens fons (fona krāsa un vairāki fona attēli). The fona-maisījuma režīms tos visus sajauc kopā ar attiecīgo sajaukšanas režīmu. Kopumā pašlaik ir 16 maisījumu veidi.
fona-maisījuma režīms: atšķirība;
4. Blend Elements
mix-blend-mode apvieno pārklājošo elementu saturu un fonu. Šķiet, ka Chrome neatbalsta visus režīmus, lai gan Firefox to dara.
mix-blend-mode: krāsa;
Es paņēmu divus elementus img attēlojot rožu un a span ar grafisko fonu, tos sakrauj un izmantoja dažus maisījuma maisījuma režīmus.
5. Ignorēt rādītāju notikumus
Izmantojot vienu atribūtu, ko sauc par vienu elementu, jūs varat padarīt elementu nevēlamu rādītāju notikumi. Dodot rādītāju notikumi vērtība neviens nav elementā tas neļauj mērķēt uz rādītāju notikumiem. Ietverts IE11 + atbalsts.
Nākamajā demonstrācijā ir redzama izvēles rūtiņa zem diviem attēliem, kas novietoti virs otra. Abi attēli tiek uzņemti rādītāju notikumi: nav, ļaujot mums noklikšķināt uz to zemē redzamās izvēles rūtiņas. Pamatojoties uz pārbaudītās izvēles rūtiņu, vēlamais attēls tiek parādīts, kamēr otrs slēpjas.
6. Izrotāt Split kastes
Parasti, kad lodziņš ir sadalīts (piemēram, ja rindas elementu liecinieks ir rindas pārtraukumos), sadalīto daļu malām nav nekādu lodziņu stilu un izskatās sagrieztas. Lai to novērstu, varat izmantot kastes dekorēšana-pārtraukums: klons.
Tagad sekojiet līdzi šim piemiņam un atgādinājumam par „Ziemassvētkiem horizonta sākumā”, šeit ir iekļauts visu Ziemassvētku vecīšu ziemeļbriežu saraksts. span! Ho! Ho! Ho!
Piezīme: Lai gan mūsdienu IE atbalsta kastes dekorēšana-pārtraukums, sadalītās daļas malas malā atveidošana nav gluda un fons izskatās šķēlēs. Bet tas padara kastes ēna labi, tāpēc es izmantoju kastes ēnas gan robežai, gan fonam. Ir arī tas, ka IE malās nav horizontāla polsterējuma, ko varētu aizpildīt ar atstarpēm.
7. Sakļaut tabulas elementus
redzamība: sabrukums ir atribūts, kas izveidots tikai tabulas elementiem, piemēram, rindām un kolonnām. Ja tas tiek izmantots kaut kas cits, tas rīkosies redzamība: slēpta. Lai gan pārlūks Chrome tiek apstrādāts tāpat kā slēpta pat galda elementiem.
Piešķirot redzamība: sabrukums uz galda elementa tas ir paslēpts, un tā vietu aizpilda tuvumā esošais saturs, piemēram, kā tā darbotos displejs: nav tā vietā.
Bet atšķirībā no displejs: nav kas maina tabulas izkārtojumu pēc atstarpes noņemšanas, izkārtojums paliek tāds pats redzamība: sabrukums. Šeit varat redzēt, kā tas darbojas sīkāk.
8. Izveidot kolonnas
Jūs varat izveidot kolonnu izkārtojumu jūsu saturam, izmantojot kolonnas atribūts. Tas ļauj norādīt, cik kolonnas (kolonnu skaits) un kā katras kolonnas platums (kolonnas platums) ir jādod elementā.
Ja saturs nav teksts, piemēram, attēls, tad jums ir jāpatur prātā tās platums atbilstoši kolonnai. Nākamajā piemērā es izmantoju tikai kolonnu skaits lai norādītu, cik kolonnu es gribu.
-webkit-column-count: 2; -moz-column-count: 2; kolonnu skaits: 2;
9. Padariet elementus resizeable
Elementu var pārveidot (vertikāli, horizontāli vai abus) ar CSS3 atribūtu mainīt izmērus . Atjaunojamība a textarea var tikt atspējota, izmantojot to pašu.
mainīt izmērus: vertikāli; mainīt izmērus: horizontāli; mainīt izmērus: abi; mainīt izmērus: nav;
10. Izveidojiet paraugus
Vienam elementam var būt vairāki CSS3 gradienti (gan lineāri, gan radiāli), un tos var uzkrāt viens otram, lai izveidotu modeļus. Tas ļauj mums izveidot jauku fonu elementiem, neizmantojot ārējus attēlus. Lai to paveiktu, var būt nepieciešams nedaudz prakses.
