CSS Animations & Public Chat

I've got a lot of exciting things to talk about this time!

The main thing I've been working recently are the CSS animations you can find throughout the site. For instance, when you hover over a header that's changing colors, it does this cool little zoom effect. On some pages, the text goes outside the frame and looks a little weird. That happens on this page, on the article titles. I'll work on fixing it in the future, but it's going to be very annoying. Also, the navigation bar at the top now has this cool gray background bar appear when you mouse over it. For mobile users, this stuff won't be as noticeable. Even a few of the things won't be to noticeable on desktop. They just add a subtle effect that makes the website look more interactive.

I did this using the CSS animation I mentioned a little bit in the vector post. CSS is mainly meant for styling text and div tags (which make up every box on a page). And in CSS 3, we can use keyframe animations to make things happen when you mouse over an object. Here's the actual code for the nav bar background appearing:

MOUSE OVER ME AND I GROW!
IF YOU'RE ON MOBILE THEN TAP IT!

AND A GRAY BACKGROUND HERE! IF YOU'RE ON MOBILE THEN TAP IT!

So, you can see that the code breaks generally start with a .shutter. The period signifies in CSS that this is a class, and the name is shutter. The first code block makes an invisible box around the item, and sets the duration of the transition. The second one has some resets to make sure the text is still in line and tidy, despite it having an invisible box around it. the :before signifies that the stuff there appears before the text does on the page. And the bottom actually sets it so that the item will transform once you :hover over it. Then, I can simply add the class prefix into any item on the page, and it will have the shutter affect. Here's the code for the example that's above:

It's as simple as just applying that to anything, and boom, shutter. That's why CSS makes website development so modular. With a few letters, I could change what font every single paragraph on the site uses.

We also now have a public chat! Using an embedded chatroom from a handy website called chatovod, anyone can now chat anonymously on the website. I think this is a cool feature to just talk to people or post random stuff. It's cool. Here's the chatroom embedded right here!

You can view the chatroom on the main homepage, and you can also access it under the 'Other' navigation tag in a full page format. And yes, you can and will be banned if you're racist or something. I literally don't care what you talk about as long as it isn't insanely insulting or sexual.

And with that, I wrap up another successful post. Still trying to conquer SSL, and I hope that next time I post here that's what the article's about.