#CodingTrends — Moving Gradient Background & Outlined text in CSS
Published in
2 min readDec 10, 2020
Hey-hey 👋
Today we are coding trends. This is an easy quick tutorial that you can follow on the video below:
You may find the source code here 👀:
Part I. Moving Gradient Background
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Coding Trends # 1 — Moving CSS gradient</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body></body>
</html>
/* GRADIENT */ body {
background: linear-gradient(-45deg, #00076f, #44008b, #9f45b0, #e54ed0, #ffe4f2);
background-size: 300% 300%;
animation: gradient 15s ease infinite;
} /* KEYFRAMES */ @keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Part II. Outlined Text
<!-- Add these <span> to the body tag --><span class="normal">To Major Tom</span>
<span class="outlined">Ground Control</span>
/* TEXT */ .normal {
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
top: 50%; left: 50%;
font-family: sans-serif;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 2px;
color: white;
font-weight: bold;
} /* OUTLINED TEXT */ .outlined {
margin: 0;
padding: 0;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-family: sans-serif;
font-size: 10em;
text-transform: uppercase;
letter-spacing: 2px;
color: white;
/* OUTLINE */
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
}
Thank you so much for reading ✨
#CodingTrends Series | nº1 Moving Gradient & Outlined Text
✨Website: https://dev-glowup.myportfolio.com/
✨Github: https://github.com/dev-glowUp
✨Pinterest: https://www.pinterest.pt/dev_glowup/
