15 nuttige CSS-trucs die u misschien hebt over het hoofd gezien

Als je een tijdje een frontend webontwikkelaar bent geweest, is de kans groot dat je een moment hebt gehad dat je probeerde te achterhalen hoe je iets moest coderen en dat je je realiseerde na een beetje googelen, dat “daar is CSS voor”. Als je dat niet had gedaan, nou, je staat op het punt.

Dit bericht is een verzameling van dergelijke CSS-codes, die u functies kunnen geven zoals een element kleverig maken, u streeplijnonderstrepen geven, de tekst van uw pagina in een speciale vorm laten vloeien of parallaxeffect bereiken. Sommigen van hen worden breed ondersteund terwijl anderen op weg zijn voor volledige ondersteuning door alle browsers.

1. Nummering koppen en subkoppen

   Stel dat u een reeks kopjes en subkoppen in uw document hebt en u ze handmatig of via een script nummert. In plaats daarvan kunt u CSS-tellers gebruiken om dit te doen. Er staat hier al een diepgaande post op. En omdat het een CSS2-specificatie is, kun je er zeker van zijn dat het door alle browsers wordt ondersteund, behalve misschien IE 6.

2. Spice Up Plain onderstreept

   Soms willen we onderstrepen met een mooie gestippelde of onderbroken lijn in plaats van een stevige lijn. Omdat er geen optie voor is, nemen we genoegen met border-bottom. Maar border-bottom is geen goede oplossing als de tekst die u onderstreept omwikkelt.

   CSS3 heeft niet één maar drie nieuwe eigenschappen voor tekstversiering opgegeven text-decoration-color, text-decoration-lijn, en text-decoration-stijl die kan worden opgeschoven in de goede oude text-decoration.

   U kunt deze gebruiken om onderstrepen, overlinken, zelfs tekst te laten knipperen, en meer. Vanaf april 2015 ondersteunt alleen Firefox deze eigenschap, maar u kunt inschakelen “experimentele webplatformfuncties” om het te gebruiken in Chrome.

3. Een citaat citeren

   Allereerst is het niet nodig om de moeite te nemen om de juiste gekrulde aanhalingstekens te typen voor korte citaten omdat daarvoor HTML is: de tag die inline citaten aangeeft.

   De tag zorgt ook voor het citeren van de binnencitaten met enkele aanhalingstekens. Dus, waar is het “daar is 'CSS' voor” moment hierin?

   Laten we zeggen dat je de standaard dubbele aanhalingstekens niet wilt of dat je meer dan één niveau van geneste offertes hebt, je kunt je citaatvoorkeuren voor het quote-element met CSS definiëren met behulp van de CSS2 citaten eigendom.

4. Onregelmatige tabellen beheren

   Mogelijk bent u een grote tafel tegengekomen met een verschillende inhoudsgrootte per cel, die weigert binnen de door u opgegeven breedte te blijven, ongeacht wat u probeert. Bedek die tafel met de table-layout eigenschap (voor gelijke kolomhoogte, volg deze link).

   Om specifiek te zijn, zit de oplossing in de tabelopmaak: vast; waarde. Wanneer u een vaste lay-out voor de tabel toewijst, worden de tabel en de celbreedte bepaald door de breedte van de tabel of de eerste rij cellen (die kan worden gedefinieerd door de gebruiker) en niet door de inhoud. Dit wordt ondersteund door alle browsers.

5. Maak het plakkerig

   Kleverige elementen zijn elementen op een pagina die niet uit het zicht worden geschoven. Met andere woorden het kleeft aan een zichtbaar gebied (kijkvenster of schuifvak). Je kunt dit maken met CSS via positie: kleverig;.

   Ze fungeren als relatief geposte elementen vóór het scrollen en later als vaste elementen zodra een schuifdrempel is bereikt. Voor nu, alleen Firefox ondersteunt het.

6. Krijg je tekst in vorm

   Wil je dat de tekst op je pagina mooi over een afbeelding naast je gaat? Je kan het proberen CSS-vormen. Om CSS-vormen te implementeren, kunnen we gebruik maken van drie eigenschappen -vorm buiten, shape marge en shape-beeld-drempel. Vanaf april 2015 wordt CSS Shapes ondersteund door webkit-browsers.

7. Verplichte velden

   Als u een formulier hebt, is de kans groot dat sommige velden hierin vereist zijn, terwijl andere dat niet zijn. U moet de gebruikers laten weten wat wat is. De CSS hiervoor is :verplicht : optioneel pseudo klassen. Alle moderne browsers ondersteunen ze.

8. Kieskeurig met kleuren

   Als je niet van een bepaalde kleur houdt, zoals blauw, kunnen we het geselecteerde gebied kleuren met een andere kleur en het ::selectie pseudo-element is daar de CSS voor. Dit wordt ondersteund door alle moderne browsers.

9. Heb ik het gecontroleerd?

   In een situatie waarin een selectievakje is aangevinkt, zou het leuk zijn om een ​​andere indicatie te hebben, afgezien van het kleine vinkje in het standaard selectievakje om aan te geven dat het item is gecontroleerd.

   Er is CSS voor datgene wat de band tussen de directe broers en zussen uitbuit, twee elementen naast elkaar. CSS heeft een aangrenzende broer / zus-selector die wordt aangeduid met de plus + teken, en we kunnen het gebruiken om het label naast het selectievakje te targeten. Maar hoe zit het met het richten van het aangevinkte selectievakje eerst? Daar is de : aangevinkt pseudo klasse voor dat.

10. Like A Storybook

    Zou het dan niet leuk zijn als de eerste “O” in de “Er was eens” ziet er mooi uit? We kunnen het er mooi uit laten zien, er is tenslotte CSS voor. Hier is waar ::eerste brief pseudo-element komt te hulp. Het is gericht op de eerste letter van de eerste regel van het doelelement. Lees hier meer over.

11. Zou je meer willen weten?

    Een element kan klasse X of gegevens Y of een andere waarde voor een kenmerk hebben. Als we ooit zo'n attribuutwaarde van een element in de buurt ervan moeten weergeven, kunnen we de Inhoud: attr (X). Het haalt de waarde van attribuut X van het element op, dan kunnen we het naast het element tonen.

12. Een beetje meer naar links

    Centrerende elementen voor CSS-beginners is een hele prestatie. Verschillende elementen vereisen verschillende CSS-eigenschappen om ze te centreren. We zullen één voorbeeld bekijken van de vele die beschikbaar zijn in het world wide web, zodat je opnieuw kunt onthouden dat er CSS is om dingen te centreren.

13. Openbaar bestandsformaat van links

    Heb je ooit een kleine afbeelding in de buurt van een link gezien die aangeeft wat die link is? Een pdf? of een DOC? Ja, er is CSS om dat te bereiken. De Inhoud: url () is wat we zullen gebruiken om de afbeelding achter de links weer te geven.

14. Parallax-effect activeren

    Het parallax-effect is een effect dat wordt gebruikt om de schijnbaar langzame beweging van de achtergrond ten opzichte van de voorgrond te beschrijven. Dit effect is populair op websites die parallax scrollen implementeren. Er zijn verschillende manieren om het te implementeren, het onderstaande voorbeeld werkt in Firefox met achtergrond-bijlage: vast;.

15. De kracht van CSS-animaties

    Waarschijnlijk niet enorm “daar is CSS voor” moment, omdat jullie nu waarschijnlijk allemaal op de hoogte zijn van CSS-animaties. Maar een kleine herinnering is niet schadelijk. Er zijn veel toepassingen voor CSS-animaties, maar hier is er een voor een eenvoudige kleuroefening.

Nu lezen: 50 nuttige CSS-fragmenten die elke designer zou moeten hebben