15 Hyödyllisiä CSS-temppuja, jotka ehkä olette nähneet

Jos olet ollut jonkin aikaa web-sivuston kehittäjä, on olemassa suuri mahdollisuus, että sinulla on ollut hetki, kun yritit selvittää, miten koodata jotain ja tajusi googlingin jälkeen, että “siihen on CSS”. Jos et olisi, niin sinä olet aikeissa.

Tämä viesti on kokoelma tällaisia ​​CSS-koodeja, jotka voivat antaa sinulle ominaisuuksia, kuten kääntää elementin tahmea, antaa katkoviivan alleviivata ominaisuuksia, virrata sivusi tekstiä erityisessä muodossa tai saavuttaa parallaksivaikutusta. Jotkut niistä ovat laajalti tuettuja, kun taas toiset ovat matkalla kaikilta selaimilta.

1. Numerointiotsikot ja alanimikkeet

   Sano, että sinulla on joukko otsakkeita ja alanimikkeitä asiakirjassa ja numeroit niitä manuaalisesti tai komentosarjan kautta. Sen sijaan voit tehdä tämän CSS-laskurien avulla. Siinä on jo syvällinen viesti. Ja koska se on peräisin CSS2 spec, voit lyödä vetoa, että se tukee kaikkia selaimia, paitsi ehkä IE 6.

2. Spice Up Plain Underlines

   Joskus haluamme alleviivata mukavan pisteviivan tai katkoviivan sijasta kiinteän. Koska siihen ei ole mitään vaihtoehtoa, sovimme border-bottom. Mutta border-bottom ei ole hyvä ratkaisu, jos teksti, jota olet korostanut kääreitä.

   CSS3 ei määritellyt tekstiä koristamaan yhtä vaan kolmea uutta ominaisuutta text-decoration väri, text-decoration line, ja text-decoration tyyliä joka voidaan lyhentää vanhaan vanhaan text-decoration.

   Voit käyttää niitä tyylin alleviivaus-, yliviiva- ja jopa tekstin vilkkumiseen ja paljon muuta. Huhtikuusta 2015 lähtien vain Firefox tukee tätä ominaisuutta, mutta voit ottaa sen käyttöön “kokeelliset web-alustan ominaisuudet” käyttää sitä Chromessa.

3. Lainaus lainauksesta

   Ensinnäkin ei ole syytä huolehtia siitä, että kirjoitat lyhyitä tarjouksia oikein, koska HTML-koodi on: tunniste, joka ilmaisee inline-lainaukset.

   tag myös huolehtii siitä, että sisäiset lainausmerkit mainitaan yhdellä lainauksella. Joten missä on “siihen on "CSS"” hetki tässä?

   Voit sanoa, että et halua oletusarvoisia kaksoissopimuksia tai sinulla on useampi kuin yksi sisäkkäisten lainausmerkkien taso, voit määrittää lainausasetukset CSS: llä CSS2: n avulla. lainausmerkit omaisuus.

4. Hallitsemattomien taulukoiden hallinta

   Olet ehkä törmännyt suureen taulukkoon, jonka sisällön koko vaihtelee solua kohden ja joka kieltäytyy säilyttämästäsi leveydestä riippumatta siitä, mitä yrität. Tame tuo pöytä table-layout ominaisuus (samanarvoinen sarakekorkeus, seuraa tätä linkkiä).

   Ollakseen tarkempi, korjaus on taulukon asettelu: kiinteä; arvo. Kun määrität taulukon kiinteän asettelun, taulukko ja solun leveys määräytyvät taulukon tai ensimmäisen solulinjan (jota käyttäjä voi määrittää) leveyden eikä sisällön perusteella. Tätä tukevat kaikki selaimet.

5. Tee se tahmeaksi

   Sticky-elementit ovat sivun elementtejä, joita ei voi vierittää näkymästä. Toisin sanoen se tarttuu näkyvään alueeseen (näkymäporttiin tai vierityslaatikkoon). Voit luoda tämän CSS: n avulla asema: tahmea;.

   Ne toimivat kuten suhteellisen positiota elementtejä ennen mitä tahansa vieritystä ja myöhemmin kiinteitä elementtejä, kun vierityskynnys on saavutettu. Toistaiseksi, vain Firefox tukee sitä.

6. Hanki tekstisi muotoon

   Haluatko, että sivusi tekstin käyrä ylittää jonkin kuvan vieressä olevan kuvan? Voit kokeilla CSS-muodot. CSS-muotojen toteuttamiseksi voimme käyttää kolmea ominaisuutta muotonsa ulkopuolella, muoto-marginaali ja muoto-kuva-kynnyksen. Huhtikuusta 2015 alkaen CSS-muotoja tukee webkit-selaimet.

7. Pakolliset kentät

   Jos sinulla on lomake, on suuri mahdollisuus, että tietyt kentät ovat pakollisia, kun taas toiset eivät ole. Sinun täytyy antaa käyttäjille tietää, mikä on mikä. CSS tähän on :vaaditaan :valinnainen pseudo-luokat. Kaikki nykyaikaiset selaimet tukevat niitä.

8. Picky With Colors

   Jos et pidä tiettyä väriä, kuten sininen, voimme värittää valitun alueen jollakin muulla värillä ja ::valinta pseudoelementti on CSS. Tätä tukevat kaikki nykyaikaiset selaimet.

9. Tarkistin sen?

   Tilanteessa, jossa valintaruutu on tarkistettu, olisi mukavaa, että oletusarvoisen valintaruudun sisällä on pieni merkki, joka osoittaa, että kohde on tarkistettu.

   Siellä on CSS, joka hyödyntää välittömien sisarusten välistä sidosta, kaksi elementtiä vierekkäin. CSS: llä on vierekkäinen sisarenvalitsin, jota merkitsee plus + merkki, ja voimme käyttää sitä kohdistaa merkinnän valintaruudun vieressä. Entä sitten tarkistaa valintaruutu ensin? On : tarkistettu pseudo-luokka.

10. Kuten tarinankirja

    Sitten, eikö olisi mukavaa, jos ensimmäinen “O” vuonna “Olipa kerran” näyttää hyvältä? Voimme tehdä sen näyttämään hyvältä, kun kaikki on CSS. Tässä on missä ::ensimmäinen kirjain pseudoelementti tulee pelastukseen. Se kohdistetaan kohdistetun elementin ensimmäisen rivin ensimmäiseen kirjaimeen. Lue lisää tästä.

11. Haluaisitko tietää enemmän?

    Elementillä voi olla luokka X tai data Y tai jokin muu arvo attribuuttiin. Jos meidän on koskaan näytettävä sellaisen elementin ominaisuusarvo lähellä sitä, voimme käyttää sitä pitoisuus: attr (X). Se hakee elementin X attribuutin arvon, niin voimme näyttää sen elementin vieressä.

12. Pieni bitti vasemmalle

    CSS-aloittelijoille tarkoitettujen elementtien keskittäminen on melkoinen. Eri osatekijät edellyttävät eri keskuksen CSS-ominaisuuksia. Tarkastelemme yhtä esimerkkiä monista, jotka ovat saatavilla maailmanlaajuisessa verkossa, jotta voit muistaa uudelleen, että CSS keskittyy asioihin.

13. Julkaise linkkien tiedostomuoto

    Oletko koskaan nähnyt pientä kuvaa linkin viereen, mikä kertoo, mikä linkki on? PDF? tai DOC? Kyllä, CSS on saavuttanut sen. sisältö: url () käytämme sitä, että näytämme linkkien takana olevan kuvan.

14. Käynnistä parallaksivaikutus

    Parallaksivaikutus on vaikutus, jota käytetään kuvaamaan taustalla olevaa hitaasti liikkuvaa taustaa suhteessa etualaan. Tämä vaikutus on suosittu verkkosivuilla, jotka käyttävät parallaksia. On olemassa erilaisia ​​tapoja toteuttaa se, alla oleva esimerkki toimii Firefoxissa tausta-kiinnitys: kiinteä;.

15. CSS-animaatioiden teho

    Luultavasti ei ole valtava “siihen on CSS” hetki, koska olet kaikki tietoinen CSS-animaatioista. Mutta pieni muistutus ei ole haitallista. CSS-animaatioita on monia, mutta tässä on yksi yksinkertainen väritysharjoitus.

Nyt Lue: 50 Hyödyllisiä CSS-katkelmia Jokaisen suunnittelijan pitäisi olla