Gestreepte 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]

Gestreepte tekst

Heb jij de Summer Vibes helemaal te pakken? Is jouw website toe aan een zomerse look en feel? Dan is deze tutorial echt is voor jou!

HTML

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]<h1>Techness </h1>[/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

Wat staat er in de onderstaande code?
• Kleur
• Font
• Schaduw
• Margin
• Positie

Plak de onderstaande code in je tekst editor om jouw tekst deze gestreepte look te geven

[/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=Lily+Script+One);
h1{
color: transparent;
font: 700 280px ‘Lily Script One’, cursive;
text-align: center;
text-shadow: 24px 20px 8px rgba(255, 255, 255, 0.3), 18px 10px 6px rgba(255, 155, 153, 0.39), 8px 6px 6px rgba(0, 0, 0, 0.60), 4px 4px 6px #fff, 0 0 6px #ff9999;
margin: 0.125em 0;
position: relative;
}
h1::before, h1::after{
content: ”;
font: inherit;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
/* let’s add the stripes */
h1::before{
background: -webkit-repeating-linear-gradient(135deg, #d5013f, #d5013f 20px, #fff 20px, #fff 40px);
background: repeating-linear-gradient(-45deg, #d5013f, #d5013f 20px, #fff 20px, #fff 40px);
mix-blend-mode: overlay;
}
h1::after{
background: white;
content: ‘happy holidays’;
color: black;
text-shadow: none;
mix-blend-mode: lighten;
bottom: -20px;
}
/* perfect! except if you try to select the text…but we can fix that */
::selection{
background: #000;
}[/vc_column_text][/vc_column][/vc_row]