Highlight jouw tekst

[vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]

Highlight jouw tekst

Altijd al willen leren hoe je tekst kan markeren door te coderen? Dan is dit jouw kans! Leer teksten te highlighten!

HTML

Allereerst begin je met het schrijven van de content. Zoals je weet start je altijd door een te openen

tot slot sluit je de div af. In dit voorbeeld gebruiken wij een h1 tag, ofwel de title tag. Door in de span de class highlight aan te geven kan vervolgens met de CSS het element vormgeven.
[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]

Plak de onderstaande code in je tekst editor

[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” bg_color=”#e8e8e8″ scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]<div id=”text”>
<h1>Highlight jouw tekst</h1>
<p><p>Wil jij leren hoe je tekst kan highlighten door te coderen? <span class=”highlight”>Stapje voor stapje! <span class=”highlight”></span> In dit blogartikel leggen wij het precies uit! </p></p>
</div>[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]

CSS

Nu de HTML geschreven is, kan er stijl opgemaakt worden. Voor dit voorbeeld is er gekozen voor een Google Font, font-family: Coming Soon.
Wat staat er in de onderstaande code?
• Font
• Grootte
• Kleur
• Breedte
• Margin

Plak de onderstaande code in je tekst editor om te highlighten

[/vc_column_text][/vc_column][/vc_row][vc_row type=”in_container” full_screen_row_position=”middle” bg_color=”#e8e8e8″ scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid”][vc_column_text]@import url(https://fonts.googleapis.com/css?family=Coming+Soon);
 
body{
font-family: “Coming Soon”;
line-height: 2;
}
 
.highlight{
background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
}
 
#text{
width: 40%;
margin: 0 auto;
}
 
#text p{
font-size: 18px;
}[/vc_column_text][/vc_column][/vc_row]