10 (Lisää) CSS Tricks You luultavasti katsonut

On olemassa paljon CSS-katkelmia, joita web-kehittäjät voivat käyttää tiettyjen tulosten saavuttamiseksi, ja sitten on olemassa CSS-temppuja, joita voit käyttää esimerkiksi sisällön kohdistamiseen vertikaalisesti. Kun CSS on jatkuvasti kehittyvä kokonaisuus, törmäämme yhä uudelleen viileisiin CSS-temppuihin, jotka ovat hauskoja tietää.

Tämän päivän viestissä esitän teille 10 muuta CSS-attribuuttia ja temppua, joita et ehkä tiedä.

1. Kirjoita pystysuunnassa

On nimeltään CSS-attribuutti kirjoittaminen-mode joka hyväksyy yhden näistä kolmesta arvosta; vaaka-tb, vertikaalinen-rl ja vertikaalinen-lr.

vaaka-tb on oletusarvo ja se aiheuttaa tyypillisen vasemman ja oikean vaakasuuntaisen tekstin virtauksen elementissä.

pystysuora-* arvot ovat kuitenkin pystysuuntaisen lohkon virtauksen kannalta, jolloin selaimet kirjoittavat tekstin ylhäältä alas. Sisään vertikaalinen-rl, uusia rivejä lisätään edellisten sivujen vasemmalle puolelle ja päinvastoin vertikaalinen-lr.

Tämä on hyödyllistä kielten ja japanilaisten kielten näyttäminen jotka on tyypillisesti kirjoitettu ylhäältä alas ja myös silloin, kun haluat näyttää tekstin pystysuunnassa vaakatason säästämiseksi, kuten taulukon otsikoissa.

Huomautus: Jos haluat hallita yksittäisten kirjainten ohjeita, voit käyttää tekstin suuntaamista kääntämällä niitä pysty- tai sivusuunnassa.

 -webkit-writing-mode: vertikaalinen-rl; -ms-kirjoitustila: tb-rl; kirjoitustila: pystysuora-rl; 

2. Värin uudelleenkäyttö

Avainsana currentColor kantaa arvon väri- attribuuttia ja sitä voidaan käyttää muissa määritteissä, jotka hyväksyvät väriarvot tausta.

div tausta: lineaarinen gradientti (90deg, currentColor 50%, musta 50%);… väri: # FFD700; / * currentColor on # FFD700 * / 

3. Sekoita taustoja

Elementillä voi olla useampi kuin yksi tausta (taustaväri ja useita taustakuvia). tausta-sekoitus-tilassa sekoittaa ne kaikki yhteen annettujen sekoitusmuotojen mukaan. Tällä hetkellä on yhteensä 16 sekoitusmoodia.

tausta-sekoitus-tila: ero; 

4. Sekoita elementtejä

mix-blend-mode sekoittaa päällekkäisten elementtien sisältöä ja taustoja. Chrome ei näytä tukevan kaikkia tiloja, vaikka Firefox tekee.

mix-blend-mode: väri; 

Otin kaksi elementtiä img osoittaa ruusun kuva ja a jänneväli graafisella taustalla, pinotaan ne ja käytettiin muutamia sekoitus-sekoitus-tiloja.

5. Ohita osoittimen tapahtumat

Voit tehdä elementin tietämättömäksi mihinkään osoittimen tapahtumaan käyttämällä yhtä ainoaa attribuuttia nimeltä osoitin-tapahtumia. Antamalla osoitin-tapahtumia arvo ei mitään elementissä tämä estää sitä olemasta kohdistimen tapahtumien kohde. Mukana IE11 + -tuki.

Seuraavassa demossa on kaksi kuvaketta, jotka on pinottu toistensa päälle. Molemmat kuvat kantavat pointer-tapahtumia: ei mitään, jonka avulla voimme napsauttaa niiden alle haudattua valintaruutua. Valintaruudun tarkistetun tilan perusteella haluttu kuva näkyy, kun toinen piilotettu.

6. Koristele Split-laatikot

Tyypillisesti, kun laatikko on jaettu (kuten silloin, kun rivinvaihtoelementti todistaa rivinvaihtoja), jaettujen osien reunoilla ei ole mitään laatikkotyylejä ja ne näkyvät viipaleina. Tämän välttämiseksi voit käyttää box-koristelu-break: klooni.

Noudata nyt esimerkkiä ja varhain "joulua horisontissa" muistutuksen, tässä on luettelo joulupukin poroista, jotka on kirjoitettu yhteen jänneväli! Ho! Ho! ho!

Huomautus: Vaikka moderni IE tukee box-koristelu-break, jaetun osan reunan reunassa renderointi ei ole tasaista ja tausta näyttää viipaloidulta. Mutta se tekee box-varjo hienosti, minkä vuoksi käytin ruudun varjoja sekä rajalle että taustalle. IE: n reunoissa ei ole myöskään horisontaalista pehmustusta, jonka haluat ehkä täyttää välilyönneillä.

7. Kutista taulukon elementit

näkyvyys: romahtaa on vain taulukkoelementeille, kuten riveille ja sarakkeille, luotu ominaisuus. Jos sitä käytetään muulla tavalla, se käyttäytyy näkyvyys: piilotettu. Chrome kuitenkin käsittelee sitä kätketty jopa pöytäelementteihin.

Kun määrität näkyvyys: romahtaa taulukon elementissä se on piilotettu ja sen tila täytetään lähellä olevalla sisällöllä - kuten miten se käyttäisi display: none sen sijaan.

Mutta toisin display: none joka muuttaa taulukon asettelua tilan poistamisen jälkeen, ulkoasu pysyy samana näkyvyys: romahdus. Näet, miten se toimii tarkemmin täällä.

8. Luo sarakkeet

Voit luoda sisällön sarakkeen asettelun käyttämällä pylväät ominaisuus. Sen avulla voit määrittää, kuinka monta saraketta (sarake-count) ja miten kunkin sarakkeen leveys (sarakkeen leveys) on annettava elementiksi.

Jos sisältö on muu kuin teksti, kuten esimerkiksi kuva, sinun on pidettävä mielessä sen leveys vastaava sarakkeen. Seuraavassa esimerkissä käytin vain sarake-count määrittää, kuinka monta saraketta haluan.

-webkit-column-count: 2; -moz-column-count: 2; sarakkeen määrä: 2; 

9. Tee Elementit Resizeable

Elementti voidaan muuttaa koon mukaan (pystysuoraan, vaakasuoraan tai molempiin) CSS3-määritteen avulla kokoa . Muutettavuus a tekstialue voidaan poistaa käytöstä käyttämällä samaa.

kokoa: pystysuora; kokoa: vaaka; kokoa: molemmat; kokoa: ei; 

10. Luo kuviot

Yksittäiselle elementille voi olla useita CSS3-gradientteja (sekä lineaarisia että säteittäisiä), ja ne voidaan kerätä toisiinsa kuvioiden luomiseksi. Tämä antaa meille mahdollisuuden luoda mukavia taustoja elementtejä käyttämättä ulkoisia kuvia. Työn tekeminen saattaa vaatia hieman käytäntöä.