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!

Gestreepte tekst - TechnessHTML

Plak de onderstaande code in je tekst editor

<h1>Techness </h1>

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

@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;
}

Leave a Reply