Ibland är ett ord eller en mening i en text extra viktigt. Det behöver vara särskilt tydligt eller visuellt sticka ut lite extra. Då är överstruken text som med en markeringspenna ett bra sätt att göra det. Så här gör du en färgmarkering av text med CSS som ser ut som att den är struken med markeringspenna.
I exemplet jag visar har jag lagt effekten på ett <span>-element, men det går lika bra att göra det på exempelvis <b> eller <strong>, eller någon helt annan tag om man vill. Jag har också gjort det på det viset att inget synligt händer bara av att lägga ett <span>-element runt ett ord eller en fras. Utöver det krävs också en class som bestämmer vilken färg överstrykningen ska ha. Först då syns effekten av markeringspennan.
Kodexempel
Jag ska förklara css-koden rad för rad.
Den första regeln i exemplet ovan gäller <body>-elementet och har ingenting med effekten av en markeringspenna att göra, så den hoppar vi över.
Förberedelse av <span>-elementet
Andra regeln gäller för alla <span>-element. Ingen utav deklarationerna i den här regeln kommer ge någon synlig effekt, utan dessa är bara förberedande. För att effekten ska se ut mer som en markeringspenna när vi sedan lägger på en bakgrundsfärg. Själva markeringspennan syns bara när vi lägger en bakgrundsfärg på elementet. Men det gör vi med olika class-namn i separata regler.
Det första vi deklarerar för <span>-elementen är padding. Padding skapar utrymme runt innehållet i elementet. Som en distans mellan själva innehållet och kanten på elementet. (Om du inte är bekant med hur padding funkar läser du om det på W3 Schools.)
Nästa grej är marginal – margin. Detta behövs för att återställa positionen på texten i <span>-elementet i förhållande till övrig text före och efter. Distansen som vi skapade med padding på raden ovan gör att innehållet i <span> kommer längre ifrån texten före och efter. Det kompenserar vi genom att ange negativa marginalvärden åt vänster och höger.
Till sist rundar vi också till hörnen på <span> för att försöka härma effekten av överstrykningspenna. Detta gör vi med border-radius. Genom att göra avrundningen oregelbunden, alltså olika i alla hörn, kommer vi få en lite mer organisk effekt. Sådär som det kan se ut när man har strukit över något för hand med en markeringspenna. Därav 4 olika värden på border-radius.
Nu har vi förberett <span>-elementet så att det har formen av en överstykning med en märkpenna. Men ännu syns inget. Det ska vi lösa genom att lägga till bakgrundsfärg. Och vi gör det med class-namn för att enkelt kunna variera färgen.
Färga markeringspennan med class-namn
Att ge något en bakgrundsfärg är ganska enkelt genom att deklarera background-color. Men i det här exemplet ska vi ta det en bit längre. Även detta för att likheten med en text som är struken med markeringspenna ska öka. Därför lägger vi istället en gradient, eller övertoning som bakgrund, istället för en enfärgad.
Så, för det första måste vi hitta på class-namn för färgen. I exemplet ovan har jag valt yellow, eftersom jag vill skapa en gul markering. Min selector blir alltså span.yellow. Kommande deklarationer ska gälla alla <span>-element med classen yellow.
CSS-övertoning med linear-gradient
För att göra en bakgrundsövertoning med css använder man attributet background-image. Men istället för att lägga till en bild med url() som man burkar, använder man linear-gradient-värdet istället.
linear-gradient följs av parenteser, och först i parentesen deklarerar vi gradientens riktning – to right. Riktningen följs av kommatecken, och efter det en kommaseparerad lista med övertoningens stopp. Det vill säja vilka färger övertoningen ska innehålla. Det behöver vara minst två, men kan vara flera. I det här fallet har jag använt tre stopp.
Vad som är lite speciellt också med den här övertoningen är att jag till alla tre stoppen har använt samma gula färg. Det som skiljer dem är opaciteten – genomskinligheten. Genom att ange stoppens färger med rgba-värden kan man kontrollera transparensen för stoppen i övertoningen.
Vi kikar närmare på de tre raderna som börjar med rgba. Är du obekant med rgba-värden kollar du in den här artikeln nu.
span.yellow {
background-image:
linear-gradient(to right,
rgba(255, 254, 55, 0.1),
rgba(255, 254, 55, 0.7) 15%,
rgba(255, 254, 55, 0.3));
}Den första raden – det första rgba-värdet, är det första stoppet. Eftersom riktningen på övertoningen är to right hamnar första stoppet längst till vänster. rgba-värdet ger en gul färg med hög genomskinlighet. Det är den sista siffran 0.1 som reglerar alpha-kanalen och ger genomskinlighet. 0 är helt genomskinligt, eller transparent. 1 är inte genomskinligt eller transparent alls.
På den andra raden är de tre första värdena samma som på raden ovan. Det vill säja att färgen är fortfarande densamma. Gul. Alpha-kanalens värde är justerat till 0.7, så vid det här stoppet är färgen inte lika genomskinlig som vid första. Men det som utmärker den här raden är att ytterligare ett värde 15% är tillagt utanför parentesen. Detta talar om var någonstans det andra stoppet ska vara. Eftersom riktningen på övertoningen är to right gör 15% att stoppet ska vara 15% in till höger från vänsterkanten. Alltså 15% in från där markeringen börjar. 100% är där den slutar.
Den tredje raden är inget annorlunda än de två första. Gul färg och med alpha-värdet 0.3.
Sammanfattning av markeringspennans färg
Eftersom vi sätter tre stopp på övertoningen kan vi styra markerinspennans intensitet med hjälp av alpha-kanalen i rgba-värdena. Det börjar väldigt svagt med 0.1 men tonas upp till 0.7 vid 15%, för att sedan tonas ned igen en aning till 0.3. Detta ger effekten av att pennan är lite torr först. När man stryker med pennan rinner färgen till och ökar i intensitet. Sedan simulerar vi ett lägre tryck med pennan från 15% och till slutet.
Flytta början och slutet på en css-gradient
Stoppen i en css-gradient kan vara många fler än tre om man vill. Men måste vara minst 2 för att det ska bli en övertoning såklart. I exemplet ovan är bara en portion för det andra stoppet satt, nämligen 15%. Det går utmärkt att sätta ett motsvarande värde även för det första och sista stoppet. I så fall börjar eller slutar inte övertoningen vid elementets början och eller slut, utan på den position som är bestämd med respektive värde. Det går också bra att ange stopp-positionens värde med andra enheter än %. Exempelvis px eller em.
Justera värdena för att ge effekten din egen personliga stil
Det här exemplet ger en snygg effekt av markeringspenna på text. Men testa gärna att forma om det här till din egen stil.
Ändra padding-värdena för att låta markeringen gå längre utanför texten. Eller tajtare inpå på om du hellre vill det. Glöm inte att kompensera paddingvärdena med motsvarande marginal bara, så att den markerade texten inte flyttar sej i förhållande till omgivande text före och efter. Skruva på border-radius-värdena för att skapa din egen personliga form på överstrykningen.
Och sist och kanske framförallt, använd dina egna färger i övertoningen. Du kan ju också skapa fler olika färgövertoningar på nya class-namn. Tänk då på att alla övertoningar kan se olika ut. Genomskinligheten och stoppen kan sitta på olika ställen för varje övertoning.
Hoppas att du. har lärt dej något av den här genomgången. Och att du fått inspiration och vill testa detta i något eget projekt. Dela gärna med dej och visa hur det blev i så fall.