15 Užitečné CSS triky, které jste mohli přehlédnout

Pokud jste na chvíli vývojářem webového rozhraní, je velká šance, že jste měli chvilku, kdy jste se pokoušeli zjistit, jak něco naprogramovat a uvědomit si, že po trošce googlingu “je to CSS”. Pokud jste to neudělali, tak se chystáte.

Tento příspěvek je sbírka takových kódů CSS, která vám může poskytnout funkce, jako je přeměnit prvek lepkavý, dát vám přerušované čáry podtrhující schopnosti, tok textu vaší stránky ve zvláštním tvaru nebo dosáhnout efektu paralaxy. Některé z nich jsou široce podporovány, zatímco jiné jsou na cestě za plnou podporou všech prohlížečů.

1. Číslování čísel a podpoložek

   Řekněme, že máte v dokumentu sadu nadpisů a podpoložek a číslování je prováděno ručně nebo pomocí skriptu. K tomu můžete použít čítače CSS. Na tomto místě je již důkladný příspěvek. A protože je to z CSS2 spec, můžete se vsadit, že je podporován všemi prohlížeči, s výjimkou snad IE 6.

2. Spice Up Plain Podtrhuje

   Někdy chceme podtrhnout pěknou tečkovanou nebo přerušovanou čarou namísto pevné. Vzhledem k tomu, že pro to neexistuje žádná možnost, spokojujeme se hraniční. Ale hraniční není dobrým řešením v případě, že text, který podtrháváte, zakrývá.

   CSS3 specifikoval ne jednu ale tři nové vlastnosti pro textovou výzdobu text-dekorace-barva, text-line-line, a text-dekorace-styl které mohou být zkráceny do starého dobrého text-dekorace.

   Můžete použít ty, aby styl podtržení, přeškrtnutí, dokonce i text blikat, a další. Od dubna 2015 tuto vlastnost podporuje pouze Firefox, ale můžete ji povolit “funkce experimentální webové platformy” použít v prohlížeči Chrome.

3. Citace citace

   Za prvé, není třeba se obtěžovat psát správné kudrnaté citace pro krátké citace, protože tam je HTML: tag, který označuje inline citace.

   tag se také stará o citování vnitřních citací s jednoduchými uvozovkami. Tak, kde je “tam je 'CSS'” moment?

   Řekněme, že nechcete výchozí dvojité uvozovky nebo máte více než jednu úroveň vnořených uvozovek, můžete pomocí nabídky CSS2 definovat předvolby nabídky pro prvek nabídky pomocí CSS2 citáty vlastnictví.

4. Správa neslušných tabulek

   Možná jste narazili na velký stůl s různou velikostí obsahu na buňku, která odmítá zůstat v šířce, kterou jste zadali, bez ohledu na to, co zkusíte. Pokřte ten stůl s rozložení tabulky vlastnost (pro stejnou výšku sloupce, následujte tento odkaz).

   Chcete-li být konkrétní, oprava je v rozvržení tabulky: pevné; hodnota. Když přiřadíte pevnou strukturu tabulky, tabulka a šířka buňky jsou určeny šířkou tabulky nebo prvního řádku buněk (které mohou být definovány uživatelem) a nikoli obsahem. To je podporováno všemi prohlížeči.

5. Udělej to lepkavý

   Lepivé prvky jsou prvky na stránce, které nebudou posouvány mimo zobrazení. Jinými slovy se drží na viditelné ploše (výřez nebo rolovací rámeček). Můžete to vytvořit pomocí CSS pomocí poloha: lepkavá;.

   Působí jako relativně postulované prvky před rolováním a později jako pevné prvky, jakmile je dosaženo rolovacího prahu. Pro teď, pouze Firefox podporuje ji.

6. Získejte svůj text ve tvaru

   Chcete, aby se text na vaší stránce pěkně ohnul nad nějakým obrázkem, který jste vedle něj zobrazili? Si můžete vyzkoušet Tvary CSS. Pro implementaci CSS tvarů můžeme využít tři vlastnosti tvar-venku, tvar-okraj a práh tvaru-obrazu. Od dubna 2015 jsou podporovány CSS Shapes prohlížeče webkit.

7. Povinná pole

   Máte-li formulář, je velká šance, že některá pole v něm jsou vyžadována, zatímco jiná nejsou. Budete muset dát uživatelům vědět, který je který. CSS pro to je :Povinný :volitelný pseudo tříd. Všechny moderní prohlížeče je podporují.

8. Picky S Barvy

   Pokud se vám určitá barva nelíbí, jako modrá, můžeme vybranou oblast zbarvit jinou barvou a barvou ::výběr pseudo element je CSS. To je podporováno všemi moderními prohlížeči.

9. Zkontroloval jsem to?

   V situaci, kdy bylo zaškrtávací políčko zaškrtnuto, by bylo hezké mít další indikaci odděleně od malé zaškrtávací značky uvnitř výchozího políčka označující, že položka byla zkontrolována.

   Tam je CSS pro to, které využívá vazby mezi bezprostředními sourozenci, dva prvky vedle sebe. CSS má přilehlý volič sourozenců označený plus + a můžeme jej použít k cílení štítku vedle zaškrtávacího políčka. Co je však s tím, že nejprve zaškrtnete zaškrtnuté políčko? Tam je :kontrolovány pseudo třída za to.

10. Jako příběh

    Pak by nebylo hezké, kdyby první “Ó” v “Bylo nebylo” vypadá hezky? Můžeme to vypadat hezky, po tom všem je CSS. Zde je místo ::první dopis pseudoprvek přichází na záchranu. Zaměřuje se na první písmeno prvního řádku cílového prvku. Přečtěte si o tom více zde.

11. Chtěli byste vědět více?

    Prvek může mít třídu X nebo data Y nebo jinou hodnotu atributu. Pokud někdy potřebujeme zobrazit takovou hodnotu atributu prvku v jeho blízkosti, můžeme použít obsah: attr (X). Načte hodnotu atributu X prvku, pak ho můžeme zobrazit vedle prvku.

12. Trochu Vlevo

    Centrování prvků pro začátečníky CSS je dost výkon. Různé elementy vyžadují odlišnou sadu CSS vlastností pro jejich vycentrování. Podíváme se na jeden příklad z mnoha, který je k dispozici v celosvětové síti, takže si můžete vzpomenout, že CSS je možné soustředit na věci..

13. Rozdělit formát souborů odkazů

    Viděl jste někdy malý obrázek v blízkosti odkazu, který označuje, jaký je tento odkaz? PDF? nebo DOC? Ano, k dosažení tohoto cíle existuje CSS. obsah: url () je to, co použijeme k zobrazení obrázku za odkazy.

14. Trigger Parallax Effect

    Efekt paralaxy je efekt, který se používá k popisu zdánlivě pomalého pohybu pozadí vzhledem k popředí. Tento efekt je populární na webových stránkách, které implementují paralaxové rolování. Existují různé způsoby, jak jej implementovat, níže uvedený příklad funguje ve Firefoxu pozadí-příloha: pevná;.

15. Síla CSS animací

    Pravděpodobně ne obrovský “je to CSS” momentu, protože jste si s největší pravděpodobností vědomi CSS animací. Ale malá připomínka není na škodu. Existuje mnoho použití pro CSS animace, ale tady je jeden pro jednoduché barvení cvičení.

Nyní si přečtěte: 50 Užitečné CSS úryvky Každý Designer by měl mít