From 16ad6baa233b7ac7afad66dcee58321a456e81b2 Mon Sep 17 00:00:00 2001 From: marcellus Date: Thu, 6 Mar 2025 17:06:52 +0100 Subject: init: intialization --- SOURCES | 1 + img/wordart.png | Bin 0 -> 2928645 bytes index.html | 23 ++++++ style.css | 9 +++ wordart.css | 226 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 259 insertions(+) create mode 100644 SOURCES create mode 100644 img/wordart.png create mode 100644 index.html create mode 100644 style.css create mode 100644 wordart.css diff --git a/SOURCES b/SOURCES new file mode 100644 index 0000000..f4e4a60 --- /dev/null +++ b/SOURCES @@ -0,0 +1 @@ +https://www.designpieces.com/2017/03/wordart-css3-text-effects diff --git a/img/wordart.png b/img/wordart.png new file mode 100644 index 0000000..06aeff6 Binary files /dev/null and b/img/wordart.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e5873dc --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + The WordArt Kitsch + + + + +

Melonland EZine #3
The WordArt Kitsch

+
+

What?

+
+

Kitsch

+
+

Examples

+
+

WordArt

+
+

Playing with the features

+
+

Dr. Kleiner sings or something

+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..07a5684 --- /dev/null +++ b/style.css @@ -0,0 +1,9 @@ +body { + background: url(img/wordart.png) no-repeat fixed; + background-size: cover; + backdrop-filter: blur(10px); +} + +a { + text-decoration: none; +} diff --git a/wordart.css b/wordart.css new file mode 100644 index 0000000..b25afda --- /dev/null +++ b/wordart.css @@ -0,0 +1,226 @@ +.wordart { + font-family: Arial, sans-serif; + font-size: 4em; + font-weight: bold; + position: relative; + z-index: 1; + display: inline-block; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.wordart.rainbow { + transform: scale(1, 1.5); + -webkit-transform: scale(1, 1.5); + -moz-transform: scale(1, 1.5); + -o-transform: scale(1, 1.5); + -ms-transform: scale(1, 1.5); +} + +.wordart.rainbow .text { + background: red; + background: -webkit-linear-gradient(left, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af); + background: -o-linear-gradient(left, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af); + background: -moz-linear-gradient(left, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af); + background: linear-gradient(to right, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.wordart.rainbow .text:before { + content: attr(data-text); + position: absolute; + z-index: -1; + top: 0.17em; + left: 0.4em; + -webkit-text-fill-color: rgba(50,50,50,0.3); + -webkit-background-clip: border-box; + .transform (skew(60deg, 0) scale(1, 0.5)); +} + +.wordart.blues .text { + font-family: Impact, sans-serif; + color: #24c0fd; + -webkit-text-stroke: 0.01em #0000aa; + filter: progid:DXImageTransform.Microsoft.Glow(Color=#0000aa,Strength=1); + text-shadow: 0.13em -0.13em 0px #0000aa; + letter-spacing: -0.05em; +} + + +.wordart.superhero { + transform: skew(0, -15deg); + -webkit-transform: skew(0, -15deg); + -moz-transform: skew(0, -15deg); + -o-transform: skew(0, -15deg); + -ms-transform: skew(0, -15deg); +} + +.wordart.superhero .text { + font-family: Impact; + background: #fdea00; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, #fdea00 0%, #fdcf00 44%, #fc2700 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdea00), color-stop(44%, #fdcf00), color-stop(100%, #fc2700)); + background: -webkit-linear-gradient(top, #fdea00 0%, #fdcf00 44%, #fc2700 100%); + background: -o-linear-gradient(top, #fdea00 0%, #fdcf00 44%, #fc2700 100%); + background: -ms-linear-gradient(top, #fdea00 0%, #fdcf00 44%, #fc2700 100%); + background: linear-gradient(to bottom, #fdea00 0%, #fdcf00 44%, #fc2700 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdea00', endColorstr='#fc2700', GradientType=0); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.wordart.superhero .text:before { + content: attr(data-text); + position: absolute; + z-index: -1; + text-shadow: 0.01em 0em 0 #802700, 0em 0.01em 0 #c23d00, 0.02em 0.01em 0 #802700, 0.01em 0.02em 0 #c23d00, 0.03em 0.02em 0 #802700, 0.02em 0.03em 0 #c23d00, 0.04em 0.03em 0 #802700, 0.03em 0.04em 0 #c23d00, 0.05em 0.04em 0 #802700, 0.04em 0.05em 0 #c23d00, 0.06em 0.05em 0 #802700, 0.05em 0.06em 0 #c23d00, 0.07em 0.06em 0 #802700, 0.06em 0.07em 0 #c23d00, 0.08em 0.07em 0 #802700, 0.07em 0.08em 0 #c23d00; +} + +.wordart.radial .text { + background: #fffa28; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…BoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-radial-gradient(center, ellipse cover, #fffa28 0%, #ec8a39 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #fffa28), color-stop(100%, #ec8a39)); + background: -webkit-radial-gradient(center, ellipse cover, #fffa28 0%, #ec8a39 100%); + background: -o-radial-gradient(center, ellipse cover, #fffa28 0%, #ec8a39 100%); + background: -ms-radial-gradient(center, ellipse cover, #fffa28 0%, #ec8a39 100%); + background: radial-gradient(ellipse at center, #fffa28 0%, #ec8a39 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffa28', endColorstr='#ec8a39', GradientType=1); + font-family: Impact, sans-serif; + font-weight: bold; +} + +.wordart.tilt { + display: inline-block; + transform: scaleY(2) perspective(1em) rotateX(15deg) translate3d(-19%, -14%, -0.4em); + -webkit-transform: scaleY(2) perspective(1em) rotateX(15deg) translate3d(-19%, -14%, -0.4em); + -moz-transform: scaleY(2) perspective(1em) rotateX(15deg) translate3d(-19%, -14%, -0.4em); + -o-transform: scaleY(2) perspective(1em) rotateX(15deg) translate3d(-19%, -14%, -0.4em); + -ms-transform: scaleY(2) perspective(1em) rotateX(15deg) translate3d(-19%, -14%, -0.4em); +} + +.wordart.tilt .text { + font-family: Arial, sans-serif; + font-weight: bold; + background: #390c0b; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); + background: -moz-linear-gradient(top, #4222be 0%, #a62cc1 73%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4222be), color-stop(73%, #a62cc1)); + background: -webkit-linear-gradient(top, #4222be 0%, #a62cc173%); + background: -o-linear-gradient(top, #4222be 0%, #a62cc173%); + background: -ms-linear-gradient(top, #4222be 0%, #a62cc173%); + background: linear-gradient(to bottom, #4222be 0%, #a62cc173%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4222be', endColorstr='#f6bf28', GradientType=0); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + letter-spacing: -0.01em; + -webkit-text-stroke: 0.01em #A3A3A3; + filter: progid:DXImageTransform.Microsoft.Glow(Color=#a3a3a3, Strength=1); +} + +.wordart.tilt .text:before { + content: attr(data-text); + position: absolute; + z-index: -1; + top: 0.17em; + -webkit-text-fill-color: #6D4916; + -webkit-background-clip: border-box; + transform: perspective(1em) rotateX(65deg) scale(0.77); + -webkit-transform: perspective(1em) rotateX(65deg) scale(0.77); + -moz-transform: perspective(1em) rotateX(65deg) scale(0.77); + -o-transform: perspective(1em) rotateX(65deg) scale(0.77); + -ms-transform: perspective(1em) rotateX(65deg) scale(0.77); +} + +.wordart.purple { + transform: skew(0, -10deg) scale(1, 1.5); + -webkit-transform: skew(0, -10deg) scale(1, 1.5); + -moz-transform: skew(0, -10deg) scale(1, 1.5); + -o-transform: skew(0, -10deg) scale(1, 1.5); + -ms-transform: skew(0, -10deg) scale(1, 1.5); +} + +.wordart.purple .text { + letter-spacing: -0.01em; + font-family: Impact; + background: #4222be; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); + background: -moz-linear-gradient(top, #4222be 0%, #a62cc1 73%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4222be), color-stop(73%, #a62cc1)); + background: -webkit-linear-gradient(top, #4222be 0%, #a62cc1 73%); + background: -o-linear-gradient(top, #4222be 0%, #a62cc1 73%); + background: -ms-linear-gradient(top, #4222be 0%, #a62cc1 73%); + background: linear-gradient(to bottom, #4222be 0%, #a62cc1 73%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4222be', endColorstr='#a62cc1', GradientType=0); + -webkit-text-stroke: 0.01em #B28FFD; + filter: progid:DXImageTransform.Microsoft.Glow(Color=#b28ffd, Strength=1); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.wordart.horizon .text { + font-family: Arial, sans-serif; + font-weight: bold; + background: #7286a7; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, #7286a7 0%, #7286a7 13%, #ffffff 50%, #812f30 56%, #ffffff 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7286a7), color-stop(13%, #7286a7), color-stop(50%, #ffffff), color-stop(56%, #812f30), color-stop(100%, #ffffff)); + background: -webkit-linear-gradient(top, #7286a7 0%, #7286a7 13%, #ffffff 50%, #812f30 56%, #ffffff 100%); + background: -o-linear-gradient(top, #7286a7 0%, #7286a7 13%, #ffffff 50%, #812f30 56%, #ffffff 100%); + background: -ms-linear-gradient(top, #7286a7 0%, #7286a7 13%, #ffffff 50%, #812f30 56%, #ffffff 100%); + background: linear-gradient(to bottom, #7286a7 0%, #7286a7 13%, #ffffff 50%, #812f30 56%, #ffffff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7286a7', endColorstr='#ffffff', GradientType=0); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.wordart.horizon .text:before { + content: attr(data-text); + position: absolute; + z-index: -1; + text-shadow: 0.01em 0em 0 #161616, 0em 0.01em 0 #8d8d8d, 0.02em 0.01em 0 #161616, 0.01em 0.02em 0 #8d8d8d, 0.03em 0.02em 0 #161616, 0.02em 0.03em 0 #8d8d8d, 0.04em 0.03em 0 #161616, 0.03em 0.04em 0 #8d8d8d, 0.05em 0.04em 0 #161616, 0.04em 0.05em 0 #8d8d8d, 0.06em 0.05em 0 #161616, 0.05em 0.06em 0 #8d8d8d, 0.07em 0.06em 0 #161616, 0.06em 0.07em 0 #8d8d8d, 0.08em 0.07em 0 #161616, 0.07em 0.08em 0 #8d8d8d, 0.09em 0.08em 0 #161616, 0.08em 0.09em 0 #8d8d8d, 0.1em 0.09em 0 #161616, 0.09em 0.1em 0 #8d8d8d; +} + +.wordart.italic-outline { + transform: scale(1, 1.3); + -webkit-transform: scale(1, 1.3); + -moz-transform: scale(1, 1.3); + -o-transform: scale(1, 1.3); + -ms-transform: scale(1, 1.3); +} + +.wordart.italic-outline .text { + letter-spacing: -0.01em; + font-family: Arial, sans-serif; + font-weight: bold; + font-style: italic; + color: #fff; + -webkit-text-stroke: 0.01em #000; + filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000, Strength=1); + text-shadow: 0.03em 0.03em 0 #6D6D6D; +} + +.wordart.slate { + transform: scale(1, 1.5); + -webkit-transform: scale(1, 1.5); + -moz-transform: scale(1, 1.5); + -o-transform: scale(1, 1.5); + -ms-transform: scale(1, 1.5); +} + +.wordart.slate .text { + font-family: Times, 'Times New Roman', serif; + font-weight: normal; + color: #2F5485; + text-shadow: 0.03em 0.03em 0px #B3B3B3; +} -- cgit v1.2.3