thecityofrest.citystreets

This page isn't anything special, it's just a dumping ground for various HTML/CSS/Javascript things I've tried to do. I might share code if I manage to make it concise enough to be worth sharing.

If you want to use some code from this page, go ahead!

Please note that this page will be VERY animation-heavy.

Experiment 1: Marquee-less Marquee

Objective: Create a working replacement for the Marquee tag, which is unsupported on Firefox.
Additionally, this marquee should be a) paused on hover and b)toggleable.
I don't really like marquee elements myself, and I don't think they fit the vibe of this site. But I did want to try my hand at making one.
My button collection is not very large so please bear with me. trust me, these work
The original Marquee code was pulled from here: Marquee without using a Marquee tag

Exhibit 1: Horizontal / Becomes Button Wall

A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right. A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right. A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right. A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right.

View a simplified example and download the code HERE

Exhibit 2: Horizontal / Becomes Scrollable

A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right. A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right. A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right. A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right.

View a simplified example and download the code HERE

Exhibit 3: Vertical / Becomes Scrollable
(left version for buttons, right version for blinkies)

A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right. A small 88x31 button. A red chair and a sleeping cat are outside of a large glass window depicting a city skyline with many buildings and a large white skyscraper. The sky turns from day to night, and then all of the city's lights suddenly disappear. The words 'Welcome to the City. The City of Rest.' appear in white text on solid black. An 88x31 button. The new Firefox logo is on the left with the text Firefox Now! on the right. An 88x31 button. It is the asexual flag with the words 'asexual' written on the bottom right. An 88x31 button. It is the aromantic flag with the words 'aromantic' written on the bottom right. An 88x31 button. It is the sunset-colored aroace flag with the words 'aroace' written on the bottom right. An 88x31 button. On a navy blue background, it says in white text 'I Survived the 2018 Tumblr Apocalypse' with the Tumblr logo on the right.
Blinkie that says 'i'm at my fucking limit' with a smiley face. Blinkie that says 'Radiant Dawn' in black with a pleasing orange, pink, and yellow gradient background. Blinkie that says 'thirsty?' with a dripping blood animation and black background. Blinkie that says 'scene kid!' with a rainbow equalizer effect. Blinkie that says 'fuck my life!' with an animation of a white person hitting the floor and a light grey background. Blinkie that says 'stressed' in red letters with a sad kaomoji. with a white background. Blinkie that says 'DA BLINKIE?' in flashing letters in reference to the 'DA VINKI' meme. The twins from that meme are pictured on the left. Blinkie that represents a terminal, saying 'Command' with an ASCII arrow and a blank space. Blinkie that says 'I glow in the dark' in green

View a simplified example and download the code HERE

Experiment 2: RGBorders

Objective- Make buttons with borders that have gradient animations on hover.
The second version is a more sophisticated version of the first that utilizes keyframes.
The real capital-G Gamers out there would probably want them to have rounded borders, but I couldn't figure those out, so you get these square corners instead.
Used these two articles for reference: We can finally animate CSS gradients and CSS Gradient Borders

View a simplified example and download the code HERE

View a simplified example and download the code HERE

Hello World!