15 Hasznos CSS trükkök, amelyekre nézett

Ha már régóta webes fejlesztő volt, nagy esély van arra, hogy van egy pillanat, amikor megpróbálta kideríteni, hogyan kell valamit kódolni és egy kicsit googling után kideríteni, hogy “van CSS”. Ha mégsem, jól jön.

Ez a bejegyzés olyan CSS-kódok gyűjteménye, amelyek olyan funkciókat biztosítanak, mint például egy elem tapadós ragasztása, szaggatott vonal aláhúzása a képességek kiemelésére, az oldal szövegének speciális formában való áramlása, vagy parallaxishatás elérése. Némelyiküket széles körben támogatják, míg mások az összes böngésző teljes körű támogatását szolgálják.

1. Számozási címsorok és alszámok

   Mondja el, hogy van egy sor fejléc és alfejezet a dokumentumban, és számozod őket kézzel vagy egy szkript segítségével. Ehelyett használhatja a CSS számlálókat. Itt már van egy alapos hozzászólás. És mivel ez egy CSS2 specifikációból származik, fogadhat, hogy az összes böngésző támogatja, kivéve talán IE 6.

2. Spice Up Plain Underlines

   Néha egy szaggatott vonallal vagy szaggatott vonallal szeretnénk aláhúzni a helyét. Mivel erre nincs lehetőség, mi rendezünk border-bottom. De border-bottom nem jó megoldás, ha a szöveget aláhúzza.

   A CSS3 nem egy, hanem három új tulajdonságot adott meg a szövegdíszítéshez text-dekoráció színes, text-dekoráció-line, és text-dekoráció-style melyet a jó öregbe lehet felvinni text-dekoráció.

   Ezeket használhatja az aláhúzás, a felülnézet, a szöveg villogása és még sok más. 2015 áprilisától csak a Firefox támogatja ezt a tulajdonságot, de engedélyezheti “kísérleti webes platform funkciók” használni a Chrome-on.

3. Idézet idézet

   Először is, nincs szükség a rövid idézetekre vonatkozó helyes göndör idézetek megírására, mert HTML-kód van: a címke, amely az inline idézeteket jelzi.

   A A címke gondoskodik a belső idézőjelek idézőjelzéséről is. Szóval, hol van a “van „CSS”” ebben a pillanatban?

   Tegyük fel, hogy nem akarod az alapértelmezett idézőjeleket, vagy ha több szinttel rendelkezel a beágyazott idézőjelek, akkor megadhatod a CSS-ben az idézet elemre vonatkozó idézet beállításait a CSS2 használatával idézetek ingatlan.

4. A nem megfelelő táblák kezelése

   Előfordulhat, hogy egy olyan nagy asztalra jutott, amely különböző cellákonként változó tartalommal rendelkezik, és nem hajlandó a megadott szélességben maradni, függetlenül attól, hogy mit próbál. Ragadja meg ezt a táblát a table-layout tulajdonság (egyenlő oszlopmagasság esetén kövesse ezt a linket).

   Ahhoz, hogy specifikus legyen, a javítás a táblázat-elrendezés: fix; érték. Ha rögzített elrendezést rendel a táblázathoz, a táblázatot és a cellaszélességet a táblázat szélessége vagy az első cellasor (amelyet a felhasználó határozza meg) határozza meg, és nem a tartalom. Ezt minden böngésző támogatja.

5. Make It Sticky

   A ragadós elemek olyan oldalak, amelyek nem lesznek görgetve a nézetből. Más szavakkal, egy látható területre tapad (nézetablak vagy görgető doboz). Ezt a CSS használatával hozhatja létre helyzet: ragadós;.

   A görgetési küszöb elérésekor a görgetés előtt és a rögzített elemekhez hasonlóan viszonylag pozicionált elemekként működnek. Átmenetileg, csak Firefox támogatja.

6. Szerezd meg a szövegedet

   Szeretné, ha az oldalad szövege szépen görbülne a kép mellett, amelyet a mellette látható? Megpróbálhatod CSS formák. A CSS formák megvalósításához három tulajdonságot használhatunk alak-kívül, forma-különbözet és forma-image-küszöb. 2015 áprilisától a CSS Shapes-t támogatja webkit böngészők.

7. Kötelező mezők

   Ha van egy űrlapod, nagy esély van arra, hogy bizonyos mezőkre szükség van, míg mások nem. Meg kell adnia a felhasználóknak, hogy melyik. Ehhez a CSS :kívánt :választható pszeudo osztályok. Minden modern böngésző támogatja őket.

8. Picky With Colors

   Ha nem tetszik egy bizonyos szín, mint a kék, akkor a kiválasztott területet más színnel és színnel is színezhetjük ::kiválasztás a pszeudoelem a CSS. Ezt minden modern böngésző támogatja.

9. Megnézem?

   Abban az esetben, ha egy jelölőnégyzet be van jelölve, jó lenne, ha az alapértelmezett jelölőnégyzeten belül egy kis jelölőnégyzet van, amely jelzi, hogy az elem be van jelölve.

   Az a CSS, amely kihasználja a közvetlen testvérek közötti kapcsolatot, két elemet egymás mellett. A CSS szomszédos testvérválasztóval rendelkezik, amelyet a plusz jelöl + jelet használhatunk, és arra használhatjuk, hogy a címkét a jelölőnégyzet mellett De mi a helyzet az ellenőrzött négyzet bejelölésével? Ott van a : ellenőrzött pszeudo osztály.

10. Mint egy mesekönyv

    Akkor nem lenne jó, ha az első “O” ban,-ben “Egyszer volt, hol nem volt” jól néz ki? Elég szépnek tűnhetünk, hiszen CSS van. Itt van, ahol ::első levél a pszeudo elem a mentésre kerül. Célja a célelem első sorának első betűjét. További információ erről itt.

11. Szeretne többet tudni?

    Egy elemnek lehet egy osztálya X vagy egy Y adat vagy más attribútum értéke. Ha valaha is meg kell jelenítenünk egy ilyen elem attribútumértékét a közelben, használhatjuk a tartalom: attr (X). Megkeresi az elem X attribútumának értékét, majd megmutathatjuk az elem mellett.

12. Egy kicsit több a balra

    A CSS kezdők számára a középpont eleme eléggé fontos. Különböző elemek különböző CSS tulajdonságokat igényelnek, hogy központosítsák őket. A világhálón elérhető számos példából fogunk megnézni, hogy emlékezzen újra arra, hogy CSS van a központban..

13. Nyissa meg a linkek fájlformátumát

    Valaha láttam egy kis képet a link közelében, jelezve, hogy mi a kapcsolat? PDF? vagy egy DOC? Igen, CSS van ennek eléréséhez. A tartalom: url () amit a linkek mögötti kép megjelenítéséhez fogunk használni.

14. A parallaxis hatás indítása

    A parallaxis hatás olyan hatás, amelyet a háttér látszólag lassú mozgásának az előtérhez viszonyított leírására használnak. Ez a hatás a parallaxis görgetést végrehajtó webhelyeken népszerű. A megvalósítás különböző módjai vannak, az alábbi példa Firefoxban működik háttér-rögzítés: fix;.

15. A CSS animációk teljesítménye

    Valószínűleg nem egy hatalmas “van CSS” pillanatban, mert mindannyian valószínűleg tisztában vannak a CSS animációkkal. De egy kis emlékeztető nem árt. A CSS animációk sokféle felhasználására van szükség, de itt van egy egyszerű színezés.

Most olvassa el: 50 Hasznos CSS-töredékek Minden tervezőnek rendelkeznie kell