diff options
| -rw-r--r-- | img/Puppy.png | bin | 0 -> 1185533 bytes | |||
| -rw-r--r-- | img/Teapot.png | bin | 0 -> 747049 bytes | |||
| -rw-r--r-- | img/features.png | bin | 0 -> 13829 bytes | |||
| -rw-r--r-- | img/momg.png | bin | 0 -> 517919 bytes | |||
| -rw-r--r-- | img/squiggly.png | bin | 0 -> 504447 bytes | |||
| -rw-r--r-- | img/stolen.png | bin | 0 -> 237274 bytes | |||
| -rw-r--r-- | index.html | 22 | ||||
| -rw-r--r-- | style.css | 11 |
8 files changed, 32 insertions, 1 deletions
diff --git a/img/Puppy.png b/img/Puppy.png Binary files differnew file mode 100644 index 0000000..db5343f --- /dev/null +++ b/img/Puppy.png diff --git a/img/Teapot.png b/img/Teapot.png Binary files differnew file mode 100644 index 0000000..542b560 --- /dev/null +++ b/img/Teapot.png diff --git a/img/features.png b/img/features.png Binary files differnew file mode 100644 index 0000000..839f318 --- /dev/null +++ b/img/features.png diff --git a/img/momg.png b/img/momg.png Binary files differnew file mode 100644 index 0000000..b885488 --- /dev/null +++ b/img/momg.png diff --git a/img/squiggly.png b/img/squiggly.png Binary files differnew file mode 100644 index 0000000..5dc6699 --- /dev/null +++ b/img/squiggly.png diff --git a/img/stolen.png b/img/stolen.png Binary files differnew file mode 100644 index 0000000..fbde6db --- /dev/null +++ b/img/stolen.png @@ -10,14 +10,34 @@ <div class="wordart superhero"><h2 class="text">What?</h2></div> <br> <div class="wordart tilt"><h3 class="text">Kitsch</h3></div> + <p>For me <b>kitsch</b> defines something that stands out in it's overly <i>cliché</i>-looks. Wikipedia defines <a href="https://en.wikipedia.org/wiki/Kitsch"><b>kitsch</b></a> as "a term applied to art and design that is perceived as naïve imitation, overly eccentric, gratuitous or of banal taste", and from my interpretation of this definition, <b>kitsch</b> defines a design choice made to accentuate certain artistic elements to create the very typical looks of <b>kitsch</b>. <b>Kitschy</b> designs sometimes tend to represent visions of outdated scenes by gathering key elements together in such ways that they end up looking too much in-place, and make the result out-of-place (if that makes sense). They often also end up looking flashy, boasting lots of bright colors and shiny details. <b>Kitsch</b> can sometimes also be seen as a form of caricature of past or present situation/objects.</p> <br> <div class="wordart tilt"><h3 class="text">Examples</h3></div> <br> + <figure> + <img src="img/Puppy.png" alt="Puppy"> + <figcaption><u>Puppy</u>, Jeff Koons</figcaption> + </figure> + <figure> + <img src="img/Teapot.png" alt="Teapot and milk jug"> + <figcaption><u>Teapot and milk jug</u></figcaption> + </figure> + <figure> + <img src="img/momg.png" alt="A random momg page"> + <figcaption>Or kind of anything taken out of the <a href="https://momg.neocities.org">Museum Of Modern Gifs</a></figcaption> + </figure> <div class="wordart tilt"><h3 class="text">WordArt</h3></div> + <p>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 <i>cliché</i>, or <i>kitsch</i>.<br> +In case you had never heard about <b>WordArt</b>, 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 <a href="https://www.makewordart.com/">web editor</a> as well as some css snippets I <s>stole</s> found <a href="https://www.designpieces.com/2017/03/wordart-css3-text-effects">here</a> and <a href="https://codepen.io/front-end-developer/pen/omYJax">there</a> to style this article. These showcase some features of <b>WordArt</b>, but feel free to try out what PowerPoint has to offer, as the full power of <b>WordArt</b> won't be covered in the span of this article.</p> <br> <div class="wordart superhero"><h2 class="text">Playing with the features</h2></div> + <p>While CSS technically allows for more features, the core features of <b>WordArt</b> include (along the usual color/highlighting/outline/etc. customizations) text effects ranging from good old shadows to letter 3-D shaping and text distortion :</p> + <img src="img/features.png" alt="sowwy no features"> + <p>Here's a global showcase (stolen from <a href="https://www.makewordart.com/images/meta/meta.png">makewordart</a>) of what WordArt is capable of ! + <img src="img/stolen.png" alt="I totally stole this one but I really need to finish this article"> <br> <div class="wordart superhero"><h2 class="text"><a href="https://www.youtube.com/watch?v=M9J6DKJXoKk" target=blank>Dr. Kleiner sings or something</a></h2></div> + <p>Overall, I believe that kitsch isn't (or at least shouldn't be) a pejorative term. The "decay" of <b>WordArt</b> (or anything considered as kitsch) is a chance for a return marked by nostalgia and remembrance.</p> <br> - <footer>Written by 👋 with ❤️ in a short amount of ⌛ by Marcellus, going back to my compiler project</footer> + <footer>Written by 👋 with ❤️ in a short amount of ⌛ by <a href="https://marcellus.cc">Marcellus</a>, going back to my compiler project</footer> </body> @@ -7,3 +7,14 @@ body { a { text-decoration: none; } + +p { + border-width: 2px; + border-style: solid; + border-image: linear-gradient(yellow 0%, green 90%, blue 25%) 50; + margin-right: 20%; + margin-left: 5%; + padding: 20px; + background: #fffdfa77; + font-family: sans-serif; +} |
