15 Användbara CSS-trick du kanske har förbisedt

Om du har varit en främst webbutvecklare ett tag, finns det en stor chans att du har haft ett ögonblick när du försökte ta reda på hur du kodar något och realiserat efter lite googling, det “det finns CSS för det”. Om du inte hade det, ska du väl.

Det här inlägget är en samling sådana CSS-koder, som kan ge dig funktioner som att vända ett element klibbigt, ge dig utmärkta linjers underliningskapacitet, flytta texten på din sida i en speciell form eller uppnå parallaxeffekt. Några av dem stöds brett medan andra är på väg för fullt stöd av alla webbläsare.

1. Nummerrubriker och underrubriker

   Säg att du har en uppsättning rubriker och underrubriker i ditt dokument och du numrerar dem manuellt eller via ett manus. I stället kan du använda CSS-räknare för att göra detta. Det finns redan en djupgående post på den här. Och eftersom det är från en CSS2-spec kan du satsa på att det stöds av alla webbläsare, förutom kanske IE 6.

2. Spice Up Plain Underlines

   Ibland vill vi understryka med en fin prickad eller streckad linje istället för en solid. Eftersom det inte finns något alternativ för det, löser vi oss för border-botten. Men border-botten Det är inte en bra lösning om texten du understryker wraps.

   CSS3 specificerade inte en utan tre nya egenskaper för textdekoration text-decoration-färg, text-decoration-line, och text-decoration-stil som kan shorthanded i den goda gamla text-decoration.

   Du kan använda dem för att stila understruken, överlappa, till och med göra text blinka med mera. Från och med april 2015 stödjer Firefox endast den här egenskapen, men du kan aktivera “experimentella webbplatskomponenter” att använda den på Chrome.

3. Citerar ett citat

   Först och främst behöver du inte bry dig om att skriva rätt kröna citat för korta citat eftersom det finns HTML för det: tagg som anger inline citat.

   De taggen tar också hand om citering av de inre citat med enkla citat. Så var är “det finns "CSS" för det” ögonblick i detta?

   Låt oss säga att du inte vill ha standard dubbla citat eller om du har mer än en nivå av kapslade citat, kan du definiera dina citatpreferenser för citatelementet med CSS genom att använda CSS2 citat fast egendom.

4. Hantera obotliga tabeller

   Du kan ha stött på ett stort bord med varierande innehållsstorlek per cell som vägrar att förbli inom en bredd du har angivit, oavsett vad du försöker. Tämma det bordet med tabell-layout egendom (för samma kolumnhöjd, följ den här länken).

   För att vara specifik är fixen i tabell layout: fast; värde. När du tilldelar en fast layout för bordet bestäms bordet och cellbredden av bredden på tabellen eller den första raden av celler (som kan definieras av användaren) och inte av innehållet. Detta stöds av alla webbläsare.

5. Gör det klibbigt

   Klibbiga element är element på en sida som inte rullas ur synvinkel. Med andra ord sitter det fast vid ett synligt område (visningsport eller rullningslåda). Du kan skapa detta med CSS med position: klibbig;.

   De fungerar som relativt postioned-element innan någon rullning och senare som fasta element när en rullningsgräns nås. Tills vidare, bara Firefox stöder det.

6. Få din text i form

   Vill du att texten på din sida ska snygga över en bild som du visade bredvid den? Du kan försöka CSS-former. För att implementera CSS-former kan vi utnyttja tre egenskaper form utanför, form-marginal och form-image-tröskel. Från och med april 2015 stöds CSS Shapes av webkit webbläsare.

7. Obligatoriska fält

   Om du har en blankett finns det en stor chans att vissa fält i det krävs medan andra inte är. Du måste låta användarna veta vilket är vilket. CSS för detta är :nödvändig :valfri pseudoklasser. Alla moderna webbläsare stöder dem.

8. Picky med färger

   Om du inte gillar en viss färg, som blå, kan vi färga det valda området med någon annan färg och ::urval pseudoelement är CSS för det. Detta stöds av alla moderna webbläsare.

9. Kontrollerade jag det?

   I en situation där en kryssruta har blivit kontrollerad, skulle det vara trevligt att ha en annan indikation ifrån det lilla kryssrutan i standardrutan för att ange att objektet har kontrollerats.

   Det finns CSS för det som utnyttjar bindningen mellan de närmaste syskon, två element sida vid sida. CSS har närliggande syskonväljare betecknad med pluset + signera, och vi kan använda den till att rikta in etiketten bredvid kryssrutan. Men vad sägs om att markera kryssrutan först först? Där är :kontrollerade pseudoklass för det.

10. Gilla en berättelsebok

    Då skulle det inte vara trevligt om den första “O” i “Det var en gång” ser vacker ut? Vi kan få det att se bra ut, trots allt finns det CSS för det. Här är var ::första bokstaven pseudoelement kommer till räddningen. Den riktar sig till första bokstaven i den första raden i det riktade elementet. Läs mer om det här.

11. Vill du veta mer?

    Ett element kan ha klass X eller data Y eller något annat värde till ett attribut. Om vi ​​någonsin behöver visa ett sådant attributvärde för ett element nära det, kan vi använda innehåll: attr (X). Den hämtar värdet av attributet X av elementet, då kan vi visa det bredvid elementet.

12. En liten bit mer till vänster

    Centreringselement för CSS-nybörjare är ganska bra. Olika element kräver en rad olika CSS-egenskaper för att centrera dem. Vi kommer att undersöka ett exempel av många som finns tillgängliga på World Wide Web, så att du kan komma ihåg igen att det finns CSS att centrera saker.

13. Uppge filformat av länkar

    Har du någonsin sett en liten bild nära en länk som indikerar vad den här länken är? En PDF? eller en DOC? Ja, det finns CSS för att uppnå det. De innehåll: url () är vad vi ska använda för att visa bilden bakom länkarna.

14. Trigger Parallax Effect

    Parallaxeffekten är en effekt som används för att beskriva bakgrunden till synes långsam rörelse i förhållande till förgrunden. Denna effekt är populär på webbplatser som implementerar parallaxrullning. Det finns olika sätt att implementera det, exemplet nedan fungerar i Firefox med bakgrundsfästning: fast;.

15. Kraften av CSS Animationer

    Förmodligen inte en stor “det finns CSS för det” ögonblick, för du är alla troligen medveten om CSS-animationer nu. Men en liten påminnelse är ingen skada. Det finns många användningsområden för CSS-animationer, men här är en för en enkel färgövning.

Nu läser: 50 Användbara CSS-fragment som varje designer borde ha