10 (daugiau) „CSS Tricks You“ tikriausiai nepastebėjo

Yra daug CSS fragmentų, kuriuos interneto kūrėjai gali naudoti tam tikriems rezultatams pasiekti, ir tada yra CSS gudrybių, kuriuos galite naudoti tokiems dalykams, kaip turinio lygiavimas vertikaliai. CSS yra nuolat besivystantis subjektas, vėl ir vėl suglumęs vėsioje CSS gudrybėse, kurios yra įdomios žinoti.

Šiandieniniame pranešime pristatau jus 10 papildomų CSS atributų ir gudrybių, kurių jūs nežinote.

1. Rašykite vertikaliai

Yra CSS atributas rašymo režimas kuri priima vieną iš šių trijų vertybių; horizontalus-tb, vertikalus-rl ir vertikali-lr.

horizontalus-tb yra numatytasis ir dėl to į elementą įeina tipinis kairysis arba dešinis horizontalus tekstas.

The vertikalios * vertybės yra vertikalaus bloko srauto, todėl naršyklės tekstą rašo iš viršaus į apačią. Į vertikalus-rl, naujos eilutės yra įtrauktos į kairę nuo ankstesnių ir atvirkščiai vertikali-lr.

Tai naudinga rodyti kalbas, pvz., kinų ir japonų kalbas paprastai rašomi iš viršaus į apačią ir taip pat, kai norite rodyti tekstą vertikaliai, kad išsaugotumėte horizontalią erdvę, kaip ir lentelės antraštėse.

Pastaba: Jei norite valdyti atskirų raidžių kryptis, galite naudoti teksto orientaciją, sukdami juos vertikaliai arba į šoną, kaip pageidaujate.

 -webkit rašymo režimas: vertikalus-rl; -ms-rašymo režimas: tb-rl; rašymo režimas: vertikalus-rl;

Žr. „Preethi“ (@rpsthecoder) „PenPoint“ režimo CSS atributą „CodePen“.

2. Pakartotinis spalvos vertės naudojimas

Raktinis žodis currentColor turi vertę spalva atributas ir gali būti naudojamas kituose atributuose, kurie sutinka su spalvų reikšmėmis fonas.

div fonas: tiesinis gradientas (90deg, currentColor 50%, juodas 50%);… spalva: # FFD700; / * currentColor yra # FFD700 * /

„Preethi“ (@rpsthecoder) „Pen CurrentColor CSS“ atributą žr. „CodePen“.

3. Blend Fonai

Elementas gali turėti daugiau nei vieną foną (fono spalvą ir kelis fono paveikslėlius). The fono mišinio režimas visi jie susimaišomi kartu su nurodytu maišymo režimu. Šiuo metu yra 16 mišinių režimų.

fono mišinio režimas: skirtumas;

Žr. „Penreet“ mišinio režimo „CSS“ atributą „Preethi“ (@rpsthecoder) „CodePen“.

4. Blend Elements

Mišinio mišinio režimas sujungia sutampančių elementų turinį ir foną. „Chrome“ nepalaiko visų režimų, nors „Firefox“.

mišinio mišinio režimas: spalva;

Aš paėmiau du elementus img rodo rožės ir a span su grafiniu fonu, juos sukrauti ir taikyti kelis mišinio mišinio režimus.

„Pepthi“ (@rpsthecoder) „Pen mix-blend“ režimo CSS atributą žr. „CodePen“.

5. Ignoruoti žymeklio įvykius

Naudodami vieną atributą, vadinamą vienu elementu, galite padaryti elementą nepastebimą rodyklių įvykiai. Suteikdami rodyklių įvykiai vertės nė vienas elemente, tai neleidžia jam tapti rodyklių įvykių tikslu. Įtraukta IE11 + pagalba.

Tolesnėje demonstracijoje po dviem vaizdais, kurie yra sukrauti vienas ant kito, yra žymimasis langelis. Abu vaizdai yra pointer-events: nėra, leidžia mums spustelėti žymimąjį langelį, kuris buvo palaidotas pagal juos. Remiantis patikrintos žymės langelio būsena, norimas vaizdas rodomas, o kitas paslėptas.

Žr. „Preethi“ (@rpsthecoder) „Pen pointer-events“ CSS atributą „CodePen“.

6. Papuoškite „Split Boxes“

Paprastai, kai langelis yra padalintas (pvz., Kai linijinis elementas liudija eilutės pertraukas), išskaidytų dalių kraštai neturi jokių langelių stilių ir atrodo pjaustyti. Norėdami to išvengti, galite naudoti dėžutės apdaila-pertrauka: klonas.

Dabar vadovaukitės pavyzdžiu ir ankstyvu „Kalėdų horizonte“ priminimu, čia yra Santa Santa elnių sąrašas, įrašytas į vieną span! Ho! Ho! Ho!

Pastaba: Nors šiuolaikinės IE palaiko dėžutės apdaila-pertrauka, padalijimo dalies krašte, atvaizdavimas nėra lygus ir fonas atrodo griežinėliais. Bet tai daro langelis-šešėlis gražiai, todėl aš naudoju dėžės šešėlius tiek pasieniui, tiek fonui. Be to, IE pakraščiuose nėra horizontalių įklotų, kuriuos galite užpildyti tarpais.

„Preethi“ (@rpsthecoder) „CodePen“ rasite „Pen box-decoration-break“ CSS atributą.

7. Sutraukti lentelės elementus

matomumas: žlugimas yra atributas, sukurtas tik stalo elementams, pvz., eilėms ir stulpeliams. Jei bus naudojamas kitas, jis elgsis taip matomumas: paslėptas. „Chrome“, nors ir traktuoja kaip ir paslėpta net stalo elementams.

Kai priskiriate matomumas: žlugimas ant stalo elemento jis yra paslėptas, o jo erdvė užpildyta netoliese esančiu turiniu - kaip ji elgtųsi naudojant ekranas: nėra vietoj to.

Bet skirtingai ekranas: nėra pakeisdama lentelės išdėstymą, pašalinus tarpą, išdėstymas išlieka tas pats matomumas: žlugimas. Čia galite pamatyti, kaip jis veikia išsamiau.

Žiūrėkite „Pen“ matomumą: „Creet“ („CSS“) „Preethi“ („@Ppsthecoder“) „CodePen“.

8. Sukurti stulpelius

Galite sukurti savo turinio stulpelių išdėstymą naudodami stulpelius atributas. Tai leidžia nurodyti, kiek stulpelių (stulpelių skaičius) ir kaip kiekvienas stulpelio plotis (stulpelio plotis) turi būti pateikiami elemente.

Jei turinys yra kitoks nei tekstas, pvz., Vaizdas, tada turėtumėte nepamiršti jo pločio, atitinkančio stulpelį. Toliau pateiktame pavyzdyje naudoju tik stulpelių skaičius nurodyti, kiek stulpelių noriu.

-webkit-column-count: 2; -moz-column-count: 2; stulpelių skaičius: 2;

Žr. „Preethi“ (@rpsthecoder) „PenPol“ stulpelių skaičių CSS „CodePen“.

9. Padarykite elementus resizeable

Elementas gali būti keičiamas (vertikaliai, horizontaliai arba abu) su CSS3 atributu keisti dydį . A textarea galima išjungti naudojant tą patį.

keisti dydį: vertikalus; keisti dydį: horizontalus; keisti dydį: abu; keisti dydį: nėra;

Žiūrėkite „Pen CSS Resize“ („CSS CSS Resize“) „Preethi“ (@rpsthecoder) „CodePen“.

10. Sukurti modelius

Vienam elementui gali būti keli CSS3 gradientai (tiek linijiniai, tiek radialiniai), ir jie gali būti sukrauti vienas ant kito, kad būtų sukurti modeliai. Tai leidžia mums sukurti puikius elementus elementams nenaudojant išorinių vaizdų. Vis dėlto gali prireikti šiek tiek praktikos.

Žr. „Pen Watermelons“ CSS gradientą „Preethi“ (@rpsthecoder) „CodePen“.