15 Noderīgi CSS triki, ko jūs varētu būt skatījuši

Ja esat kādu laiku izveidojis tīmekļa vietnes izstrādātāju, ir liela iespēja, ka jums ir bijis brīdis, kad mēģinājāt uzzināt, kā kaut ko kodēt un pēc mazliet googling, ka “tam ir CSS”. Ja jums nebūtu, tad jūs jau gatavojaties.

Šis ieraksts ir šādu CSS kodu kolekcija, kas var sniegt jums tādas funkcijas kā līmēt elementu, dot jums punktveida līniju, pasvītrojot spējas, plūsmas lapas tekstu īpašā formā vai sasniegt paralaksu. Daži no tiem tiek plaši atbalstīti, bet citi ir ceļā uz pilnīgu atbalstu no visām pārlūkprogrammām.

1. Numerācijas pozīcijas un apakšpozīcijas

   Sakiet, ka jūsu dokumentā ir vairākas pozīcijas un apakšpozīcijas, un jūs tos numurējat manuāli vai ar skriptu. Tā vietā varat izmantot CSS skaitītājus. Šeit jau ir padziļināta ziņa. Un tā kā tas ir no CSS2 spec, jūs varat likt, ka to atbalsta visas pārlūkprogrammas, izņemot, iespējams, IE 6.

2. Spice Up Plain Underlines

   Dažreiz mēs vēlamies pasvītrot ar jauku punktētu vai punktveida līniju, nevis cietu. Tā kā tam nav izvēles, mēs nokārtojam robežu apakšā. Bet robežu apakšā nav labs risinājums, ja teksts, kuru jūs pasvītrojat.

   CSS3 norādīja ne vienu, bet trīs jaunas īpašības, kas paredzētas teksta apdarei teksta-apdares krāsa, teksta apdares līnija, un teksta apdares stils kas var tikt ieskaitīts vecajā labajā teksta apdare.

   Varat tos izmantot, lai stilizētu pasvītrojumu, virsrakstu, pat padarītu teksta mirgošanu un vairāk. Sākot ar 2015. gada aprīli, šo īpašumu atbalsta tikai Firefox, bet jūs varat to iespējot “eksperimentālās tīmekļa platformas funkcijas” izmantot to pārlūkā Chrome.

3. Citējot cenu

   Pirmkārt, nav nepieciešams apgrūtināt īsu kotējumu rakstīšanu īsiem kotējumiem, jo ​​tam ir HTML: tagu, kas norāda inline kotācijas.

   The tag arī rūpējas par citātu kotēšanu ar vienu citātu. Tātad, kur ir “tam ir “CSS”” brīdī?

   Ļaujiet teikt, ka nevēlaties, lai noklusējuma dubultās pēdiņas, vai arī jums ir vairāki ligzdotu citātu līmeņi, varat noteikt citēšanas elementa cenas ar CSS, izmantojot CSS2 cenas īpašums.

4. Nepietiekamu tabulu pārvaldīšana

   Iespējams, esat saskārušies ar lielu tabulu ar atšķirīgu satura izmēru uz vienu šūnu, kas atsakās palikt norādītajā platumā neatkarīgi no tā, ko jūs mēģināt. Atzīmējiet šo tabulu ar tabulas izkārtojums rekvizīts (vienādam kolonnas augstumam sekojiet šai saitei).

   Lai būtu konkrēti, labojums ir tabulas izkārtojums: fiksēts; vērtību. Piešķirot tabulai fiksētu izkārtojumu, tabulu un šūnu platumu nosaka tabulas vai pirmās šūnas rindas (ko var definēt lietotājs) platums, nevis saturs. To atbalsta visas pārlūkprogrammas.

5. Padariet to lipīgu

   Uzlīmes elementi ir lapas elementi, kas netiks skatīti. Citiem vārdiem sakot, tas piestiprinās redzamajai vietai (skatu logam vai ritināšanas lodziņam). To var izveidot ar CSS, izmantojot pozīcija: lipīga;.

   Viņi darbojas kā relatīvi pozicionēti elementi pirms jebkādas ritināšanas un vēlāk, piemēram, fiksētie elementi, kad ir sasniegts ritināšanas slieksnis. Tagad, tikai Firefox to atbalsta.

6. Iegūstiet savu tekstu formā

   Vai vēlaties, lai jūsu lapas teksts labi izliektu kādu attēlu, kas parādīts blakus? Jūs varat mēģināt CSS formas. Lai ieviestu CSS formas, mēs varam izmantot trīs īpašības formas ārpuses, formas starpība un formas-attēla slieksnis. No 2015. gada aprīļa CSS Shapes atbalsta webkit pārlūkprogrammas.

7. Obligātie lauki

   Ja jums ir veidlapa, ir liela iespēja, ka daži lauki ir nepieciešami, bet citi nav. Jums būs jāinformē lietotāji, kas ir kas. CSS šim nolūkam ir : nepieciešams :neobligāti pseido klases. Visas mūsdienu pārlūkprogrammas tos atbalsta.

8. Picky With Colors

   Ja jums nepatīk kāda krāsa, piemēram, zilā krāsā, izvēlēto apgabalu var krāsot ar kādu citu krāsu un :: izvēle pseido elements ir CSS. To atbalsta visas mūsdienu pārlūkprogrammas.

9. Vai es to pārbaudīju?

   Gadījumā, ja ir atzīmēta izvēles rūtiņa, būtu jauki, ja noklusējuma izvēles rūtiņā ir neliela atzīme, lai norādītu, ka vienums ir pārbaudīts.

   Ir CSS par to, kas izmanto saikni starp tiešajiem brāļiem un māsām, divus elementus blakus. CSS ir blakus sibling selektors, kas apzīmēts ar plus + zīme, un mēs varam to izmantot, lai mērķētu uzlīmi blakus izvēles rūtiņai. Bet kā gan vispirms atzīmējiet izvēles rūtiņu? Ir : pārbaudīts pseido klase.

10. Tāpat kā stāstu grāmata

    Tad tas nebūtu jauki, ja pirmais “O” iekš “Sensenos laikos” izskatās diezgan? Mēs varam to izskatīties diezgan, galu galā ir CSS. Lūk, kur :: pirmā vēstule pseidoelements tiek glābts. Tā ir vērsta uz mērķa elementa pirmās rindas pirmo burtu. Lasiet vairāk par to šeit.

11. Vai jūs vēlētos uzzināt vairāk?

    Atribūtam var būt X vai Y dati vai kāda cita vērtība. Ja mums kādreiz ir nepieciešams rādīt šādu elementa atribūtu vērtību, mēs varam to izmantot saturs: attr (X). Tā izgūst elementa X atribūta vērtību, tad mēs varam to parādīt blakus elementam.

12. Mazliet mazāks par kreiso

    CSS iesācēju centrēšanas elementi ir diezgan raksturīgi. Dažādiem elementiem ir nepieciešama atšķirīga CSS īpašību kopa, lai tos centrētu. Mēs aplūkosim vienu no daudziem piemēriem, kas ir pieejami pasaules tīmeklī, lai jūs atceraties, ka CSS ir vērsta uz centru.

13. Atklājiet saites failu formātu

    Kādreiz redzēja nelielu attēlu, kas atrodas blakus saitei, norādot, kas ir šī saite? PDF? vai DOC? Jā, lai to panāktu, ir CSS. The saturs: url () mēs to izmantosim, lai parādītu attēlu aiz saitēm.

14. Iedarbiniet paralaksu

    Paralakses efekts ir efekts, ko izmanto, lai aprakstītu šķietami lēnu fona kustību attiecībā pret priekšplānu. Šis efekts ir populārs tīmekļa vietnēs, kas izmanto paralaksu ritināšanu. Ir dažādi veidi, kā to īstenot, tālāk redzamais piemērs darbojas ar Firefox fona pielikums: fiksēts;.

15. CSS animācijas jauda

    Iespējams, tas nav milzīgs “tam ir CSS” brīdī, kad jūs visi, visticamāk, esat informēti par CSS animācijām. Bet neliels atgādinājums nav kaitīgs. CSS animācijām ir daudz izmantojumu, bet šeit ir vienkāršs krāsojums.

Tagad lasiet: 50 Noderīgi CSS fragmenti Katram dizainerim ir jābūt