From 9a6fd996e4627dfe9e7db09c89a97a247fd07eb1 Mon Sep 17 00:00:00 2001 From: "martial.simon" Date: Mon, 24 Mar 2025 14:12:57 +0100 Subject: feat: finished --- index.html | 16 ++++++++++------ style.css | 22 +++++++++++++++++++--- wordart.css | 10 +++++----- 3 files changed, 34 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index e0a6af0..6c67f60 100644 --- a/index.html +++ b/index.html @@ -28,16 +28,20 @@

WordArt

WordArt has become easily recognizable in it's primary uses (PowerPoint presentations and technically every Office suite program), to the point of becoming overused and associated to the fact that it was overused. This led to this feature slowly turning old-fashioned. If someone today was to use WordArt in a presentation, it would be immediately noticed as being cliché, or kitsch.
-In case you had never heard about WordArt, it's a feature that's been present in PowerPoint for a while now (1991), which allows you to make some cool-ahh text effects. Rather than installing some unnecessary bloatware on my computer, I'm using a web editor as well as some css snippets I stole found here and there to style this article. These showcase some features of WordArt, but feel free to try out what PowerPoint has to offer, as the full power of WordArt won't be covered in the span of this article.

+In case you had never heard about WordArt, it's a feature that's been present in PowerPoint for a while now (1991), which allows you to make some cool-ahh text effects. Rather than installing some unnecessary bloatware on my computer, I'm using a web editor as well as some css snippets I stole found here and there to style this article (honorable mention to this website which I found out about way too late). These showcase some features of WordArt, but feel free to try out what PowerPoint has to offer, as the full power of WordArt won't be covered in the span of this article.


Playing with the features

-

While CSS technically allows for more features, the core features of WordArt include (along the usual color/highlighting/outline/etc. customizations) text effects ranging from good old shadows to letter 3-D shaping and text distortion :

- sowwy no features -

Here's a global showcase (stolen from makewordart) of what WordArt is capable of ! - I totally stole this one but I really need to finish this article +

+
While CSS technically allows for more features, the core features of WordArt include (along the usual color/highlighting/outline/etc. customizations) text effects ranging from good old shadows to letter 3-D shaping and text distortion :
+ sowwy no features +
+
+
Here's a global showcase (stolen from makewordart) of what WordArt is capable of !
+ I totally stole this one but I really need to finish this article +

Dr. Kleiner sings or something

-

Overall, I believe that kitsch isn't (or at least shouldn't be) a pejorative term. The "decay" of WordArt (or anything considered as kitsch) is a chance for a return marked by nostalgia and remembrance.

+

Overall, I believe that kitsch isn't (or at least shouldn't be) a pejorative term. The "decay" of WordArt (or anything considered as kitsch) is a chance for a return marked by nostalgia and remembrance. I think WordArt just doesn't fit in today's graphical standard of everything being over-simplified and clean looking (which is a shame), and I've always seen WordArt as the Web revival equivalent of PowerPoint presentation styles. I believe that kitsch mostly means outdated, and that WordArt still has a chance in our presentations.


diff --git a/style.css b/style.css index ab8b1b1..b497f24 100644 --- a/style.css +++ b/style.css @@ -11,10 +11,26 @@ a { p { border-width: 2px; border-style: solid; - border-image: linear-gradient(yellow 0%, green 90%, blue 25%) 50; + border-image: linear-gradient(yellow 0%, blue 25%, green 90%) 50; margin-right: 20%; margin-left: 5%; padding: 20px; - background: #fffdfa77; - font-family: sans-serif; + background: #fffdfa88; + font-family: serif; + font-size: large; } + +figure { + border-width: 2px; + border-style: solid; + border-image: linear-gradient(salmon 0%, red 25%, orange 90%) 50; + margin-right: 20%; + margin-left: 5%; + padding: 20px; + background: #fffdfa88; + font-family: serif; +} + +figure img { + width: 100%; +} \ No newline at end of file diff --git a/wordart.css b/wordart.css index b25afda..03bc21d 100644 --- a/wordart.css +++ b/wordart.css @@ -50,11 +50,11 @@ .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); + transform: skew(0, -10deg); + -webkit-transform: skew(0, -10deg); + -moz-transform: skew(0, -10deg); + -o-transform: skew(0, -10deg); + -ms-transform: skew(0, -10deg); } .wordart.superhero .text { -- cgit v1.2.3