If we ever bring back Wrath

User avatar
Bongo Bill
Imperisaurus Rex
Posts: 207
Joined: Mon Jan 20, 2014 6:23 pm

If we ever bring back Wrath

Postby Bongo Bill » Wed Jun 25, 2014 7:36 pm

With the advent of modern web technology, we can make a hypothetical future Wrath more garish than we have ever dared to imagine. For instance, today, as part of an unrelated and flagrantly unnecessary side project (I was looking into a way to end another community's debate over where avatars should be located in relation to posts), I wrote some CSS that would put an arbitrary webm video in the background of a post, with the text in the foreground designed to look like subtitles.

It goes a little something like this (obviously the full version wil be more detailed and require some tweaks, such as throwing a text-align: center in there somewhere to complete the effect):
HTML:

Code: Select all

<div class="post">
    <div class="post-body">
        <div class="post-content">
            <p>This is a post.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="background">
        <video class="bgvideo" loop muted autoplay><source src="something.webm" type=video/webm></video>
    </div>
</div>

CSS:

Code: Select all

.post-body {
    font-family: sans-serif;
    font-weight: bold;
    color: yellow;
    text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px 1px 0px black, -1px -1px 0px black;
    margin: 1em;
    padding: 1em;
    position: relative;
    overflow: hidden;
}
.background {
    position: absolute;
    z-index: -1;
    top: 50%; left: 50%; right: -50%; bottom: -50%;
    margin: 0 auto;
    text-align: center;
}
.bgvideo {
    vertical-align: middle;
    min-width: 100%; min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


Then, obviously, set up the server-side code code so that it gives each post a different URL to a different, random (determined by the post ID, so it's always the same video under a given post) decontextualized video hosted on the server. Strip the audio from them ('cause they'll be muted anyway) and keep the length down, and it might even not completely destroy the server's bandwidth! There's a good chance it'll melt users' computers, though.

If I have any other good ideas for how to create the most obnoxious forum on the internet, I'll post them here, for safekeeping.
...but is it art?

User avatar
Thad
Posts: 13165
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: If we ever bring back Wrath

Postby Thad » Wed Jun 25, 2014 7:42 pm

Here's the most hideous CSS3 animation site I've ever had to put together:

MD Motivational Drink

It wouldn't be too difficult to make images fly all over the screen in a loop and not stop.

There's really quite a lot of potential in the transform:rotate attribute, too.

Hell, you could combine the two -- make all the text on the site rotate back and forth, constantly.

User avatar
Mongrel
Posts: 21290
Joined: Mon Jan 20, 2014 6:28 pm
Location: There's winners and there's losers // And I'm south of that line

Re: If we ever bring back Wrath

Postby Mongrel » Wed Jun 25, 2014 8:24 pm



This site is Poe's Law in a can.

I mean, I can hear the Powerthirst narration of that site in my head.
Image

User avatar
Thad
Posts: 13165
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: If we ever bring back Wrath

Postby Thad » Wed Jun 25, 2014 8:43 pm

I assure you, the guy is 100% serious.

And you'd better believe every questionable design decision was made at his insistence and against my protestations. (I tried mightily to put the text against a white background instead of directly on top of the image; he demanded it be changed. And then complained that it wasn't legible and insisted I make it bigger. And then complained that it still wasn't legible and insisted I make it even bigger. This went on over a period of about two weeks.)

I kept the original sketch he sent in for the graphic designer to work on. Maybe I'll dig it out one of these days.

User avatar
Bongo Bill
Imperisaurus Rex
Posts: 207
Joined: Mon Jan 20, 2014 6:23 pm

Re: If we ever bring back Wrath

Postby Bongo Bill » Wed Jun 25, 2014 9:11 pm

Here's a Wrathful spoiler tag, with incredibly verbose and exhaustive vendor fallbacks:
CSS:

Code: Select all

.blurry {
    color: transparent;
    text-shadow: 0 0 1em rgba(0,0,0,1);
    animation-name: blur;
    animation-duration: 150ms;
    animation-fill-mode: forwards;
    -moz-animation-name: blur;
    -moz-animation-duration: 150ms;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: blur;
    -webkit-animation-duration: 150ms;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-name: blur;
    -ms-animation-duration: 150ms;
    -ms-animation-fill-mode: forwards;
    -o-animation-name: blur;
    -o-animation-duration: 150ms;
    -o-animation-fill-mode: forwards;
}
.blurry:hover {
    animation-name: focus;
    animation-duration: 150ms;
    animation-fill-mode: forwards;
    -moz-animation-name: focus;
    -moz-animation-duration: 150ms;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: focus;
    -webkit-animation-duration: 150ms;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-name: focus;
    -ms-animation-duration: 150ms;
    -ms-animation-fill-mode: forwards;
    -o-animation-name: focus;
    -o-animation-duration: 150ms;
    -o-animation-fill-mode: forwards;
}
@keyframes blur {
    .01% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: transparent; text-shadow: 0 0 1em rgba(0,0,0,1); }
}
@-moz-keyframes blur {
    .01% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: transparent; text-shadow: 0 0 1em rgba(0,0,0,1); }
}
@-webkit-keyframes blur {
    .01% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: transparent; text-shadow: 0 0 1em rgba(0,0,0,1); }
}
@-ms-keyframes blur {
    .01% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: transparent; text-shadow: 0 0 1em rgba(0,0,0,1); }
}
@-0-keyframes blur {
    .01% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: transparent; text-shadow: 0 0 1em rgba(0,0,0,1); }
}
@keyframes focus {
    99.9% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: inherit; text-shadow: 0 0 0em rgba(0,0,0,1); }
}
@-moz-keyframes focus {
    99.9% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: inherit; text-shadow: 0 0 0em rgba(0,0,0,1); }
}
@-webkit-keyframes focus {
    99.9% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: inherit; text-shadow: 0 0 0em rgba(0,0,0,1); }
}
@-ms-keyframes focus {
    99.9% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: inherit; text-shadow: 0 0 0em rgba(0,0,0,1); }
}
@-o-keyframes focus {
    99.9% { color: transparent; text-shadow: 0 0 0em rgba(0,0,0,1); }
    to { color: inherit; text-shadow: 0 0 0em rgba(0,0,0,1); }
}
...but is it art?

Who is online

Users browsing this forum: No registered users and 13 guests