From 8b469ded9af4e5d3bea8ee9db4eed51fbdd30418 Mon Sep 17 00:00:00 2001 From: Robert Njenga Date: Wed, 6 Oct 2021 16:20:11 -0500 Subject: [PATCH] Added css_gradient_border --- css_gradient_border/index.html | 12 +++++++ css_gradient_border/style.css | 66 ++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+) create mode 100644 css_gradient_border/index.html create mode 100644 css_gradient_border/style.css diff --git a/css_gradient_border/index.html b/css_gradient_border/index.html new file mode 100644 index 00000000..55b7c418 --- /dev/null +++ b/css_gradient_border/index.html @@ -0,0 +1,12 @@ + + + + + + + Hacktoberfest + + +
Happy
Hacktoberfest!
+ + diff --git a/css_gradient_border/style.css b/css_gradient_border/style.css new file mode 100644 index 00000000..eb1201de --- /dev/null +++ b/css_gradient_border/style.css @@ -0,0 +1,66 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +:root { + --border-width: 3px; +} + +* { + box-sizing: border-box; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; + background: #222; +} + +.gradient-border { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 500px; + height: 400px; + font-family: 'Roboto', sans-serif; + font-size: 2.5rem; + text-transform: uppercase; + color: white; + background: #222; + border-radius: var(--border-width); +} + +.gradient-border::after { + position: absolute; + content: ''; + top: calc(-1 * var(--border-width)); + left: calc(-1 * var(--border-width)); + z-index: -1; + width: calc(100% + var(--border-width) * 2); + height: calc(100% + var(--border-width) * 2); + background: linear-gradient( + 60deg, + hsl(224, 85%, 66%), + hsl(269, 85%, 66%), + hsl(314, 85%, 66%), + hsl(359, 85%, 66%), + hsl(44, 85%, 66%), + hsl(89, 85%, 66%), + hsl(134, 85%, 66%), + hsl(179, 85%, 66%) + ); + background-size: 300% 300%; + background-position: 0 50%; + border-radius: calc(2 * var(--border-width)); + animation: moveGradient 4s alternate infinite; +} + +@keyframes moveGradient { + 50% { + background-position: 100% 50%; + } +} \ No newline at end of file