15 Užitočné triky CSS, ktoré by ste mohli prehliadnuť

Ak ste na chvíľu vyvíjali webový vývojár na fronte, existuje veľká šanca, že ste mali chvíľku, kedy ste sa pokúsili zistiť, ako niečo kódovať a uvedomili si to po trochu googlingu, že “tam je CSS”. Ak ste to neurobili, dobre sa chystáte.

Tento príspevok je zbierka takýchto kódov CSS, ktoré vám môžu poskytnúť funkcie, ako napríklad zaseknúť prvok lepkavý, poskytnúť vám prerušované funkcie podčiarknutia, tok textu vašej stránky v špeciálnom tvare alebo dosiahnuť efekt paralaxy. Niektoré z nich sú široko podporované, zatiaľ čo iné sú na ceste na plnú podporu zo všetkých prehliadačov.

1. Číselné položky a podpoložky

   Povedz, že máte v dokumente nadpisy a podpoložky a číslujete ich ručne alebo skriptom. Namiesto toho môžete použiť čítače CSS. Na ňom je už hĺbkový príspevok. A pretože je to z CSS2 spec, môžete sa staviť, že je podporovaný všetkými prehliadačmi, okrem IE 6.

2. Spice Up Plain Underlines

   Niekedy chceme podčiarknuť s peknou bodkovanou či prerušovanou čiarou namiesto pevnej. Keďže na to nie je žiadna možnosť, uspokojujeme sa border-bottom. ale border-bottom nie je dobrým riešením, ak podčiarknete text.

   CSS3 neurčuje jednu, ale tri nové vlastnosti pre dekoráciu textu text-dekorácie-color, text-dekorácie-linka, a text-dekorácie v štýle čo môže byť skrátené do starého dobrého text-decoration.

   Môžete ich použiť na štýl podčiarknutia, overline, dokonca aj blikajúci text a ďalšie. Od apríla 2015 podporuje túto službu iba Firefox, ale môžete ju povoliť “experimentálne funkcie webovej platformy” používať ho v prehliadači Chrome.

3. Citácia citácie

   Po prvé, nie je potrebné obťažovať sa zadávaním správnych kučeravých úvodzoviek pre krátke citácie, pretože pre to je HTML: značka označujúca inline citácie.

   značka sa tiež stará o citovanie vnútorných kotácií s jednotlivými úvodzovkami. Takže, kde je “na to je "CSS"” moment v tomto?

   Povedzme, že nechcete mať predvolené dvojité úvodzovky alebo máte viac ako jednu úroveň vnorených úvodzoviek. Môžete definovať svoje predvoľby cenových ponúk pre prvok cenových ponúk pomocou CSS pomocou CSS2 quotes vlastnosť.

4. Správa nespravodlivých tabuliek

   Možno ste narazili na veľký stôl s rôznou veľkosťou obsahu na bunku, ktorý odmieta zostať v šírke, ktorú ste zadali, bez ohľadu na to, čo vyskúšate. Stlačte tento stôl s table-layout vlastnosť (pre rovnakú výšku stĺpca, nasledujte tento odkaz).

   Ak chcete byť konkrétny, fix je v rozloženie tabuľky: opravené; hodnota. Pri priradení pevného rozloženia tabuľky sa tabuľka a šírka buniek určujú podľa šírky tabuľky alebo prvého riadka buniek (ktoré môže používateľ definovať) a nie podľa obsahu. Toto sú podporované všetkými prehliadačmi.

5. Učiniť to lepkavé

   Dôležité prvky sú prvky na stránke, ktorá sa nebude zobrazovať. Inými slovami, drží na viditeľnej ploche (výrez alebo rolovacia schránka). Môžete to vytvoriť pomocou služby CSS pozícia: lepkavá;.

   Pred každým posunom a neskôr ako fixné prvky sa správajú ako relatívne umiestnené prvky po dosiahnutí prahu rolovania. Na Teraz, iba Firefox podporuje to.

6. Získajte svoj text v tvare

   Chcete, aby sa text na vašej stránke dobre prekrývaval obraz zobrazený vedľa nej? Si môžete vyskúšať CSS Shapes. Na implementáciu tvarov CSS môžeme využiť tri vlastnosti tvar, mimo, Tvar-okraj a Tvar-image-prah. Od apríla 2015 sú tvary CSS podporované webové prehliadače.

7. Povinné polia

   Ak máte formulár, existuje vysoká šanca, že niektoré polia sú potrebné, zatiaľ čo iné nie sú. Budete musieť nechať používateľov vedieť, čo je. CSS pre toto je :požadovaný : voliteľná pseudotriedy. Všetky moderné prehliadače ich podporujú.

8. Skvelé s farbami

   Ak sa vám nepáči určitá farba, podobne ako modrá, môžeme vybrať oblasť s inou farbou a :: výber pseudo prvkom je CSS. To všetko podporujú všetky moderné prehliadače.

9. Skúsil som to?

   V situácii, keď je začiarknuté políčko, bolo by pekné mať iný indikátor od seba od malého začiarknutia vo vnútri predvoleného zaškrtávacieho políčka označujúceho, že položka bola skontrolovaná.

   Existuje CSS pre to, čo využíva väzbu medzi bezprostrednými súrodencami, dva prvky vedľa seba. CSS má priľahlú selekciu súrodenca označenú plusom + a môžeme ho použiť na zacielenie štítku vedľa začiarkavacieho políčka. Ale čo najskôr zaškrtnúť začiarknuté políčko? Tam je : zaškrtnuté pseudo trieda pre to.

10. Ako príbeh

    Potom by nebolo pekné, keby prvé “O” v “Kde bolo, tam bolo” vyzerá pekne? Môžeme to vyzerat pekne, po tom všetkom je tu CSS. Tu je miesto ::prvé písmeno pseudo element prichádza na záchranu. Zameriava sa na prvé písmeno prvého riadku cieleného prvku. Prečítajte si viac o tom tu.

11. Chceli by ste vedieť viac?

    Prvok môže mať triedy X alebo dáta Y alebo nejakú inú hodnotu atribútu. Ak budeme niekedy potrebovať zobraziť takúto hodnotu atribútu prvku v jeho blízkosti, môžeme použiť Obsah: attr (X). Načíta hodnotu atribútu X prvku, potom ho môžeme zobraziť vedľa prvku.

12. Trochu viac doľava

    Centrovacie prvky pre začiatočníkov CSS je dosť úctyhodný. Rôzne prvky vyžadujú odlišnú sadu vlastností CSS na ich centrovanie. Pozrime sa na jeden z mnohých príkladov, ktoré sú k dispozícii na celom svete, takže si môžete znovu zapamätať,.

13. Zverejniť súborový formát odkazov

    Videli ste niekedy malý obrázok v blízkosti odkazu, ktorý ukazuje, aký je tento odkaz? PDF? alebo DOC? Áno, CSS to dosiahne. Obsah: url () je to, čo budeme používať na zobrazenie obrazu za odkazmi.

14. Trigger Parallax Effect

    Paralaxový efekt je efekt používaný na opis zdanlivo pomalého pohybu pozadia vzhľadom na popredie. Tento efekt je populárny na webových stránkach, ktoré vykonávajú rolovanie paralaxy. Existujú rôzne spôsoby, ako ho implementovať, príklad nižšie pracuje vo Firefoxe s pripojenie na pozadí: opravené;.

15. Sila animácií CSS

    Pravdepodobne nie je obrovský “tam je CSS” moment, pretože všetci ste si s najväčšou pravdepodobnosťou vedomí animácií CSS. Ale malá pripomienka nie je žiadna ujma. Existuje veľa použitia pre animácie CSS, ale tu ide o jednoduché sfarbenie.

Teraz čítaj: 50 Užitočné CSS úryvky Každý návrhár by mal mať