Infernal Monologue

Every Child's Favourite Bat-Villian

noreply@blogger.com (Derek) — Wed, 17 Sep 2008 22:54:00 +0000

And with that, my first doubts about the LEGO Batman video game begin.

Facebook is Man-Made!

noreply@blogger.com (Derek) — Sat, 06 Sep 2008 04:54:00 +0000

Facebook just got a whole lot hotter:

But, wait. What's this?

Isn't that just the saddest thing you've ever seen?

Vibe only has one fan. Scipio Garling of The Absorbascon.

I had to preserve it, if only for the sake of accuracy.

Conversations with Dad

noreply@blogger.com (Derek) — Sat, 06 Sep 2008 00:51:00 +0000

Totally not ripping off Ces Marciuliano. (You should really click that link.)

After I spotted a large, fancy-looking walkie-talkie by my dad's computer.

ME: Is that a ham radio or a really old cell phone?

DAD: channel surfing That's a police radio.

ME: Cool.

DAD: Yeah. Remind me to show it to you later.

ME: You gonna become a vigilante?

DAD: I just retired.

ME: Everyone needs a hobby.

Why Yes, I Did

noreply@blogger.com (Derek) — Fri, 22 Aug 2008 21:51:00 +0000

I'm of two minds about Google's gradual takeover of the internet (and eventually the Earth). On the one hand, any one person or group with a lot of control will eventually lead to corruption, abuse of power, and/or reduction in quality of service. On the other hand, Google's pretty awesome.

Take this, for example.

So my brother tells me that there's a new trailer for littlebigplanet out. Like any right-minded American, I immediately scour the internet for the movie of sackboys (littlebigplanet's avatars for exploring player-created levels) in a Godzilla parody.

Google's "Did You Mean" feature, however, had other ideas.

And it was right.

Because even though that wasn't what I meant at the time I hit the "Search" button, my desire to watch a Blackzilla trailer is so strong that it applies retroactively.

They're Not Toys, They're ACTION FIGURES!

noreply@blogger.com (Derek) — Fri, 22 Aug 2008 00:43:00 +0000

I got new toys!

I'm glad I worked today. I managed to snag a full set of DC Universe Wave 3 out from under legitimate customers.

And, like anyone with a new toy (be it a car or iPhone or, you know, actual toys), I want to show them off.

First up is the Bat-Boys themselves, Nightwing and Robin:

These guys are my favourites from this wave. I've always liked the Tim Drake Robin, and ever since Tomasai took over writing duties on Nightwing, I've gained a newfound respect for the character.

Tim's still cooler.

Oh, and because I got the full set, I was able to make the Build-a-Figure. Guess who it is? I'll give you a hint: He was born on a Monday.

Look at 'im. He's huge. For comparison, let's look at him next to Slade Wilson, a.k.a. Deathstroke the Terminator.

I'm so bored with Deathstroke, though. He's not going on display in the entertainment center.

What's that? Oh. Right. The other two figures. Well, I had something special in mind for them.

Sleestak, this one's for you:

Ah, yes. A Hal Jordan Head Injury. No better way to start the day.

Overheard at a Midnight Showing

noreply@blogger.com (Derek) — Sat, 19 Jul 2008 03:01:00 +0000

The Spirit of Convention

noreply@blogger.com (Derek) — Thu, 15 May 2008 00:45:00 +0000

Normally, the comics of Penny Arcade range from "meh" to "chuckle-worthy". They serve more as an entertaining footnote to the far more interesting news posts.

But today's comic is hilarious. It truly captures the fun of con cosplay and the awesomeness of geek parents.

I can easily imagine the same scenario featuring a mom and a Green Lantern costume.

They'll Leave the Light on for Ya

noreply@blogger.com (Derek) — Tue, 06 May 2008 00:27:00 +0000

Last Saturday was Free Comic Book Day, an industry-wide event to bring new people into comic shops and hopefully turn them into regular customers. My LCS participated, and I made sure to show up.

I had work in the morning, so I didn't get to the store until ten minutes before they closed. (Needless to say, I missed out on the Iron Man heroclix.) Even so, there was more people inside than I had ever seen before. Apparently they had a really busy day, which they were half-griping about. Mostly they were talking about how much of a success it was and how many people showed up, which was encouraging.

I tried to do my part by letting all my friends and co-worker know about Free Comic Book Day. I didn't see any of them there, but... Well, you have to try, don't you?

There was an employee I'd never seen before (a manager from another store, I think) who was really nice and helpful. Just the sort of attitude you need for FCBD (or any day, really).

He helped me pick out some trades (I didn't want to just grab some free comics and take off. As a regular, I feel like FCBD isn't for me, so I wanted to spend some money to support FCBD as an endeavor). I got Avengers: Initiative and Nextwave: Agents of H.A.T.E.

Now, I don't usually stand around and talk comics in the store. I've got this weird hangup where I feel like I'm loitering, even if I am paying for my comics and even if "standing around talking comics" is an important part of the LCS community. So it was pleasantly unusual that he and I spent about 45 minutes discussing what makes a good comic and what needs to be done to really bring in the customers.

For those of you keeping track: yes, I said 45 minutes, and yes, I showed up 10 minutes before they closed.

I didn't know that they closed much earlier than usual on Saturdays, so I ignorantly blathered on about Wonder Woman for thirty-five minutes after the store officially closed. The gentleman (I never did get his name) never said boo about it, though. I was really embarrassed when I saw the posted hours after getting back into my car.

All in all, I had a great time. Even if I didn't get that Heroclix figure.

Update 5/7/2008: Okay, this settles it.

As I was picking up my comics today, Jim presented me with an Ironman Heroclix figure he had thoughtfully set aside for me.

I thought I was gonna cry.

You guys rock.

Just a Reminder

noreply@blogger.com (Derek) — Fri, 28 Mar 2008 20:36:00 +0000

Kids love Guy Gardner.

Idol Speculation

noreply@blogger.com (Derek) — Sun, 14 Oct 2007 00:47:00 +0000

In February of 2008, WizKids is releasing a new DC Heroclix expansion, Crisis.

Since he played a large part in the Crisis of Infinite Earths, a Crisis expansion means we should be getting a new, much-needed Blue Beetle figure.

I'm ecstatic. The only Ted Kord Blue Beetle figures available are from the Hypertime set, which are frankly horrible. They are only vaguely representative of the character and nigh unplayable.

To be fair, Hypertime was the first DC set, so you can hardly blame them for not being on the ball, dial-wise. Things are different now, though. I can't wait to see what the people at WizKids come up with for good ol' Ted.

Here's what I'm hoping for:

#cstm003 E Blue Beetle
Team: No Affiliation
Range: 0 /
Points: 59
Keywords: Justice League International, Super Buddies

Attack - BB Gun: Blue Beetle has Force Blast, Incapacitate, and Smoke Cloud. Treat these powers as if Blue Beetle had a Range of 6.
Defense - Go To Hell, Max: Blue Beetle has Willpower and Toughness. If targeted by a ranged attack, Blue Beetle has -2 to his Defense Value.

Made with Dial Generator.

DC in December

noreply@blogger.com (Derek) — Wed, 19 Sep 2007 03:35:00 +0000

DC's December solicits are up. I don't usually have much to say on these, but a few things caught my eye.

GOTHAM UNDERGROUND #3
Written by Frank Tieri
Art by J. Calafiore & Jack Purcell
Cover by Calafiore
This issue has it all: Scarecrow confronts Penguin! The Riddler reveals Nightwing’s secret! A surprise attack on the Iceberg Lounge! Matches Malone vs. Mr. Zsasz — to the death! All this plus guest appearances by Robin, Oracle and the Ventriloquist!
On sale December 26 • 3 of 9 32 pg, FC, $2.99 US

Um, anyone have any idea if this is going to be good or not? Only, it's got Riddler and Penguin and Matches Malone and Robin and Oracle, so I feel like I have to pick it up, but I seem to remember reading somewhere that Gotham Underground was awful.

Maybe that was Batman: Confidential...

BOOSTER GOLD #5
Written by Geoff Johns & Jeff Katz
Art and cover by Dan Jurgens & Norm Rapmund
"52 Pick-Up" continues! Booster Gold has been tasked with preventing the origins of the world's greatest heroes from unraveling. Next up is his greatest challenge yet: preventing one of the most horrific wrongs that's ever befallen a hero in the DC Universe.
Leaping into the pages of BATMAN: THE KILLING JOKE, Booster attempts to stop a tragedy that he discovers never should've happened — the Joker shooting and paralyzing Barbara Gordon, Batgirl.
Plus, what dark secret is Rip Hunter keeping from Booster?
On sale December 12 • 32 pg, FC, $2.99 US

Booster Gold has quickly become my favourite title on the shelves. It's just the right mix of fun, adventure, and poignancy.

Which is why I'm a little worried about this issue.

The storyline in which Barbra Gordon is shot and paralyzed is decidedly dark, and I wonder if it might be too dark a subject for this book. I'm not one of those fans who think their comics shouldn't be graphic or serious, but I think it may be too soon in the series to be pulling out the heavy stuff.

There again, Geoff Johns has be at the top of his game recently, so I think I'm just gonna trust him on this one.

JUSTICE LEAGUE UNLIMITED #40
Written by Ben McCool
Art by Dario Brizuela
Cover by Zach Howard
The Justice League’s shadows are missing! Only Zatanna and Dr. Fate know how to fight such terrible magic, but they’re in over their heads!
On sale December 5 • 32 pg, FC, $2.25 US

I love this cover. Batman is adorable. And Martian Manhunter looks so scared!

And finally:

BATMAN VS. THE JOKER STATUE
Sculpted by Jonathan Matthews
FIRST IN A SERIES OF STATUES FEATURING BATTLES BETWEEN NOTORIOUS NEMESES!
Featuring work by some of DC Direct’s premiere sculptors, this new line of statues featuring classic confrontations begins with a battle between notorious enemies Batman and The Joker.

Sure to be two of the most talked about characters this year, Batman and The Joker are depicted here in a classic scenario: Batman fights to prevent The Joker from escaping Arkham Asylum!

BATMAN VS. THE JOKER is a limited-edition, hand-painted, cold-cast porcelain statue measuring approximately 14" tall x 7" wide x 8" deep. It includes a Certificate of Authenticity and is packaged in a 4-color box. This limited edition statue is manufactured to order.
Advance-solicited; on sale May 14, 2008 • Statue• $195.00 US

Okay, I will admit that this statue looks pretty damn cool. However-

One-hundred and ninety-five freakin' dollars!?!

That way lies madness, my friends.

Baby's First Brick

noreply@blogger.com (Derek) — Fri, 14 Sep 2007 02:06:00 +0000

We'll I finally paid for my Heroclix brick this Wednesday. It took me a while to save up the eighty bucks as I've only just started my new job. Luckily, the dudes at my Local Comic Shop were kind enough to hold it for me until I could afford it. Not only that, they also slipped me the exclusive map (a bank!) that you're only supposed to get if you buy TWO bricks. Thanks, guys!

In the Justice League set, I can't even count the number of figures I want to get my hands on, but there were four in particular that I MUST have. Let's see how I did:

jl001 Batman (pretty decent figure, if not entirely necessary)
jl002 Aquaman x2 (I've just recently discovered Busiek's run on Aquaman, so I'm thrilled to have this)
jl003 Creeper
jl004 Firehawk
jl005 Mento x2
jl006 Heat Wave x2 (I need a new Riddler figure so I can make my Anti-Villain team)
jl008 Lex Luthor
jl009 The Joker x3 (technically. Two now 'cause I gave one to my brother)
jl011 Black Canary
jl012 Crimson Fox x2
jl013 Dr. Light x2
jl015 Gypsy
jl016 Bouncing Boy (finally, the Legion has someone to build a team around)
jl017 Parasite
jl018 Firestorm x2
jl019 Merlyn
jl020 Black Hand

Bzzzt! What's this? An empty space where my King Shark should be? O calamity!

As I mentioned above, I've only just recently read the first trade of Kurt Busiek's Aquaman: Sword of Atlantis and I loved it.

The stand out character by far is King Shark, the son of the shark god and enemy of the original Aquaman. He's monstrous in every sense of the word. He's seven or eight feet tall, powerfully built, with the head of a shark and razor-sharp claws at the ends of his fingers and toes.

He has a gruff, no-nonsense personality and accepts that nearly everyone he meets will either attack him or run away. His acceptance isn't some namby-pamby "They just don't understand!" philosophy. He treats it as any other fact of nature, like his own place in the food chain.

He doesn't angst over it. He doesn't constantly lament his lack of friends. He's not a MARVEL character. And he doesn't kowtow to the social mores of the meat around him. When he finds himself attacked by people who are afraid of him, you know what he does?

From Aquaman: Sword of Atlantis #50. Click to see the whole page.
He bites people's heads off until they aren't afraid anymore.

How do you not like someone like that?

jl022 Professor Ivo
jl023 Toyman
jl024 Chronos
jl025 Dr. Alchemy
jl026 Captain Boomerang
jl027 The Flash (no Barry. I was promised Barry)
jl029 Zariel (the atheist pulls an angel figure. Har har.)
jl030 Plastic Man
jl031 Tharok
jl032 Bronze Tiger (need to make a Suicide Squad team)
jl033 Vigilante
jl034 August General in Iron (probably the least interesting of the Great Ten)
jl036 Granny Goodness
jl037 Wonder Woman (except not)
jl038 Batman and Robin (neat, but I still say Tim Drake doesn't need backup)
jl039 Batzarro
jl041 Mr. Mxyzptlk

Another of my must-haves. I want to make an Omnipotent Beings team and see how they'd stack up against, say, a single Hulk figure.

Of course, I'd have them play on my Mxyzptlk map.

jl043 Dr. Polaris

I'm so glad I got this. I want to make a Blog Mascot team, and this one is a vital addition. Besides, if I didn't get it Dr. Polaris would- shh! Here he comes!

jl045 Aztek
jl047 Hourman
jl055 Green Lantern

There we go. Guy Gardner, Jackass of the Green Lantern Corps.

It's hard to describe why Guy's my favourite Lantern. On the surface, Guy's the guy everyone hates. But should you dig deeper (and why would you), you realize Guy is a complicated character and actually the most caring and loyal of the Lanterns. I've wanted a figure of him for a while, and I'm glad I finally got it.

jl057 The Flash (except not)
jl059 Wonder Woman (except not)

And that's it. Three out of four ain't bad, I suppose, but King Shark WILL be mine. And I might just get a Dweller in the Depths figure made, as well.

Home Brew Rules: Harder They Fall

noreply@blogger.com (Derek) — Tue, 28 Aug 2007 20:27:00 +0000

Check it out, my first custom feat card:

This card will go great on any Batman Ally, really any martial artist character. It allows you to maneuver your opponents into more advantageous positions. Like, say your Superman is based next to your Robin who is being beat on by the Joker. Well, if Robin knows Judo, he can throw Joker right next to Supes, who can then pound the Clown Prince of Crime into oblivion.

You can also use it to hit one enemy with another. This helps when your martial artist gets surrounded and you need a little breathing room, and it even does a little damage to each enemy. Plus, it can lead to some great game moments.

OPPONENT: "Did Batman just hit the Joker with the Riddler?"

YOU: "That's right."

OPPONENT: "Sweet."

Edges! Crap, I forgot about throwing people off of Elevated Terrain. Ah well. It wouldn't have fit on the card anyway. Besides, I'm sure you guys know enough that non-flying characters take 2 clicks of damage when falling off of Elevated Terrain.

The question is whether you ignore abilities like Leap/Climb and Phasing/Teleport... They are being thrown, after all... But I can imagine characters teleporting to avoid damage when falling.

Hmm. I don't know. What do you think?

Home Brew Rules: Finders Keepers

noreply@blogger.com (Derek) — Mon, 27 Aug 2007 03:56:00 +0000

Once again, Scipio knows best. He suggested I make some special objects for use on the Micro Map. I thought it best to have a full set of objects; four light objects and two heavy ones.

The Light Objects:

The matchstick, the dime, and the bottlecap were all suggested by Scipio. The washer was my idea. Not much to say; I don't want to give any special rules for this set. These are all things you'd find in your backyard or in the park.

The Heavy Objects:

It was hard trying to come up with a second "heavy" small object. Luckily, Scipio provided me with the pebble. The nail came to me after (no kidding) three hours of thought.

Okay! That should be it for the Micro Map. Time to get to work on some new maps.

Turn of the Century Slang

noreply@blogger.com (Derek) — Mon, 27 Aug 2007 01:20:00 +0000

Whip your weight in wildcats - To soundly defeat an opponent much larger or stronger than you. Boxing term.
Ooooh....

Now I get it.

Not-So-Special Powers

noreply@blogger.com (Derek) — Sat, 25 Aug 2007 22:43:00 +0000

What's the deal, WizKids?

#061 LE The Phantom Stranger
Team: Quintessence
Range: 8 //
Points: 171
Keywords: Justice League of America, Mystical, Quintessence

from HCRealms

You introduce Special Powers, announce the Justice League set's send-away figure is the Phantom Stranger, and then give us a dial of basic powers?

I can't really complain about how the powers were chosen - they all fit with the character as far as I know - but after all the fun we had speculating about Special Powers of ridiculously powerful characters, this is a little underwhelming.

I mean, look at Mr. Mxyzptlk:

#041 U Mr. Mxyzptlk
Team: Superman Enemy
Range: 6 /
Points: 107
Keywords: (No Keywords)

Speed - KLTPZYXM! : Mr Mxyzptlk can use Phasing/Teleport. When he does, roll a d6 before moving him. On a result of 1, deal Mr. Mxyzptlk 1 unavoidable damage, place him in an unoccupied square in his starting area, and then move him normally.

Attack - Object Animation: Give Mr. Mxyzptlk a power action and roll a d6 for each opposing character that has zero or one action token, that is in a square 4 or fewer squares away to which Mr. Mxyzptlk has a clear line of fire, and that is carrying an object or adjacent to or occupies either a square of hindering terrain or a square that has an object. On a result of 3-6 give the character an action token.

His Speed Special Power is perfect. It fits the character, and it knocks him down a peg which is what you want for a character of nearly limitless power.

His Attack Special Power seems pretty useless to me. There's a lot of qualifications to use it, and even if you meet them, all you get is a glorified Incapacitate.

All things considered, I think Phantom Stranger came out okay. He just wasn't what I was expecting. Which, I suppose, is entirely in keeping with the character.

Booster Gold #1

noreply@blogger.com (Derek) — Fri, 17 Aug 2007 06:34:00 +0000

That's how the cover of Booster Gold #1 should have looked like, because this whole comic was basically a love letter to yours truly.

It starts with the cover (click on the image above to see an enlarged version of the real cover). Those playing cards have a bunch of characters I can't wait to see in this series. Guy Gardner; Wonder Woman; if that Robin at the bottom is Tim, then double points; and take a look below the title and above Booster's head. Vic Frickin' Sage.

Secondly, take the writing. Everyone is wonderfully in-character. From the more serious Booster attempting (and succeeding) to join the Justice League, to the newly softened Batman sticking up for his former teammate and trying to do right by Blue Beetle, to the ever-consistent Skeets providing high-tech help in between subversive sarcasm. I could practically hear Billy West's voice when I read Skeets' dialogue.

Also, Mr. John's gives us some excellent meta-comedy throughout the book. "This isn't the greatest the League will ever be." "Punching history. Please." "If freaking Geo-Force is on the team, I definitely deserve a spot." I guffawed (I seriously did. It was weird) each time I read one of these.

Speaking of, this is the first comic I've ever read more than once. It may in fact be the greatest comic I've ever read.

It's on my pull-list, needless to say, and it should be on yours.

Oh, and Geoff?

Home Brew Rules: 5th Dimensional Chess Game

noreply@blogger.com (Derek) — Sat, 04 Aug 2007 05:19:00 +0000

or Mxyzptlk, Tea, and Me

Got another one for yez.

Believe it or not, this isn't the screwiest map concept I've come up with. But this one got made. Let's all hope and pray The Other Map doesn't.

But let's talk about this one, shall we?

First thing you should notice is the chess board itself. It's three times the length of a standard chess board. In fact, the four columns on either side of the board are normal, the bit in the middle has raised platforms. So I like to imagine Mr. Mxyzptlk took a standard chess board and sort of "opened it up" into something more to his liking.

The platforms are simply raised out of the ground, so you'll need Leap/Climb, Phasing/Teleport, the ability to fly, or at least know somebody who does to get up there.

Another thing I want to point out is the Elevated/Water Terrain in the form of a cup of tea. I put that in there because I thought there ought to be a cup of tea. That's it, really. But afterwards I thought it was neat to have Water Terrain up high, where Aquatic characters can be brought up there and just snipe people on the ground. They do have to be Aquatic, otherwise you take 1 click of damage at the beginning of your turn. That stuff's hot!

The other thing at the top of the map is Mr. Mxyzptlk's hand. It's Blocking Terrain because Mr. Mxyzptlk isn't going to take any guff from a bunch of game pieces.

The last item of interest is the books on the bottom. The top book is Elevated Terrain which you can climb up via the red book on the bottom. The top book is The Book Nobody Read, which is really about Copernicus, but I just picked it because it sounded like a book Mr. Mxyzptlk would have in his library.

Special rule time. At the beginning of each player's turn, roll a die. If you roll a 1, your opponent chooses one of your figures that has one or more action tokens on it and moves it to any square adjacent to Mr. Mxyzptlk's hand.

This is Mxy getting upset with that figure's previous action and plucking it from play. Why? Because 5th dimension, that's why.

And that's it. I'm thinking of making a special set of chess pieces, possibly based on DC heroes and villains, to use with this map, but it's ready to play as is.

Enjoy!

To download:
Micro Map - PDF
Special Map Rules - DOC or TXT

Home Brew Rules: Insect Army

noreply@blogger.com (Derek) — Fri, 03 Aug 2007 04:41:00 +0000

As per Scipio's advice, I have made some ant pogs (Bystander Tokens) to go with my Micro Map. Along with some others.

First up is the Red Ant. It's pretty standard, as far as its stats go. I wanted to keep it cheap so you could fill up your team with them.

I gave all the insects the JLA team ability. That will give them free movement, which is important if you plan on playing a lot of them at once. (I stole this idea from Scipio's fishclix. Thanks, Scip!)

Second, we have the harmless Pill Bug. This guy won't be doing any damage, but his high Defense Value and Toughness make him a great meat shield.

He's also pretty slow, though. Handily enough, the Pill Bug can roll itself into an easy-to-carry ball, so you can just carry him with you into battle!

Next up is the sleek agent of death, the Wasp.

The Wasp is a flying character with a 10 movement speed, so it can reach anyone quickly. It has a Damage of 2 when it gets there and can also Poison your enemies at the beginning of each turn.

She's a little more expensive than the first two, but she's worth it.

Finally, the common household jumping spider, also known as the Zebra Spider.

This guy is vicious. He's got Leap/Climb, so there's no place to hide from him on the map. I gave him Incapacitate and a range of 10 so it can shoot webs at your opponents. Is there anything more terrifying than being trapped in a spider web and watching as those jittering mandibles close in on you?

The Zebra Spider's damage is 0, but it does have Close Combat Expert. I didn't want it to be able to hurt people at long range just because it had Range, but I did want it to be able to do some damage close up.

This is the most expensive insect pog because of Incapacitate and the higher Attack Value. You might only be able to fit one of these puppies on your team, but it'll pull its weight.

And there you are. Your very own insect army. All you need to do is print them out and play. Have fun!

Home Brew Rules: Micro Map

noreply@blogger.com (Derek) — Mon, 30 Jul 2007 19:59:00 +0000

or Honey, I Shrunk the Justice League

I have an idea for a Heroclix map that I think could be really fun.

A lot of superheroes have the ability to shrink. The Atom, Shrinking Violet, Wasp, and so on. These guys are not exactly heavy hitters. A fact reflected in Heroclix, where their figures are rarely played and generally only because of their high defensive values.

So I figured that there should be a map that would turn the weakest figures in Heroclix into the most formidable. Put them in their element.

I give you, the Micro Map:

As you can see, it is simple terrain of the backyard variety, zoomed in until a dandelion can provide four squares of Elevated Terrain. I'm not the greatest graphic artist, especially with the sheer size the map 36" x 24") so please forgive its simplicity.

Now, how about some Special Map Rules? Par exemple, shrinking characters should be able, as part of a move action, to change into a Giant Character. This would use the same rule flying characters use when going from hovering to soaring or vice versa (e.g. the figure's speed value is reduced by one for each change during its movement action).

As a Giant Character, the figure does not have Leap/Climb, Phasing/Teleport, or Stealth. On the plus side, it gains a +1 to its Attack Value and a +2 to its Damage.

I couldn't think of any other rules to add. That seems like enough, I suppose. If you, my non-existent audience, have any ideas, let me know. I might add them should I re-do the map (the grass still looks pretty wonky).

To download:
Micro Map - PDF
Special Map Rules - DOC or TXT

Edit: Scipio suggested I make some ant pogs to go with this map. As a loyal Absorbacommando, I do as I'm ordered.

The Universally Useful Cascading Style Sheets!

noreply@blogger.com (Derek) — Mon, 21 May 2007 20:47:00 +0000

Hi, boys and girls! Is everyone ready for another adventure in the magical, fantastical Internet?

Yeah!

Well, all right!

This week we're going to learn how to take any HTML tag and bend it to our will. Do you remember how HTML tags work, boys and girls? Let's take a look at a standard image tag:

<img src="http://www.infernal-monologue.com/images/mfiBanner.gif" alt="Magical, Fantastical Internet banner" title="Ta-da! Rollover text!" height="300" width="400" />

It's always a good idea to define your heights and widths, kids, and the title is great for rollover text. And don't forget to add your alt text or Angry Mr. Ada will get you! The image tag above should give us:

Now that we're reminded how an HTML tag works, let's look at two new tags: div tags and span tags. We'll start with div tags.

Did you notice up above, when I showed you the HTML code? Don't bother scrolling up, I'll recreate it down here:

<img src="http://www.infernal-monologue.com/images/mfiBanner.gif" alt="Magical, Fantastical Internet banner" title="Ta-da! Rollover text!" height="300" width="400" />

But that's a little too much to work with, isn't it, kids? Let's clean it up:

The quick brown fox jumped over the lazy dog.

Much better! Now let's take a look at how it works:

<div style="font-family: Courier New, Courier, mono; background-color: #B2B299; padding: 10px;">The quick brown fox jumped over the lazy dog.</div>

Wow. A lot to take it, right, boys and girls? Well, don't panic, we'll take it one step at a time.

First of all, you can see our actual text right at the end there, followed by the closing div tag. Nothing new there.

The new bit is the "style" attribute. This is what makes Cascading Style Sheets work. You can use the style attribute to change darn near anything about any HTML tag.

Let's take a look at the "properties" - the first part of the style, before the colon - used. There's "font-family", which lets you choose and prioritize fonts; "background-color", which lets you change the color of the background; and "padding", which lets you set how much spacing you have between the text and the border.

The best part is that the properties are pretty self-explanatory. But the "values" of the properties are where the action's at.

I wanted the HTML example to look like the Create a Post area of Blogger, so I went with monospace fonts like Courier New and Courier. I wanted the background to be a slightly darker colour than than my normal background colour, and with a bit of tweaking I discovered that #B2B299 fit the bill nicely. And I wanted to make it as easy to read as possible, so I put 10px (or "pixels") worth of space between the text and the border.

But wait. We don't have a border, do we, boys and girls? Wanna make one?

Yeah!

Okay! We'll keep it simple, since this is the first time you all at home are adding a CSS property, but then we'll try a special project, okay?

So, since we want a border, what do you suppose the property is going to be? That's right, "border". To make it show up, we have to tell it what kind of border we want, like "solid". And what colour do we want to make the border? How about "red", keeping in the theme of this site? That leaves us with this:

border: red solid;

And we just add that to the style attribute we used earlier:

<div style="font-family: Courier New, Courier, mono; background-color: #B2B299; padding: 10px; border: red solid;">The quick brown fox jumped over the lazy dog.</div>

Hey, look at that! Nice job.

Now, as a special project, let's try to recreate a narration box from the latest issue of Flash, the Fastest Man Alive. In it, the new Flash, Bart Allen, has specially colured narration boxes, like the one on the right.

What all do we have there? The actual text, of course. But it's red, on a yellow background, with a red border. Given that, we have:

<div style="color: red; background-color: yellow; border: solid red;">Besides, I've<br />always been a<br />bit... <span style="font-weight: bold;">impulsive</span>.</div>

Did you catch that? We just had the first appearance of the span tag! It's essentially the same as the div tag, but it can be used "inline" instead of changing an entire block of text. I also added line breaks so it will match the narration box. So now we've got: