Sorry for the delay between posts lately. Thankfully, life seems to be settling into a predictable routine and I’m able to spend more time on the comic. With a bit of luck, a couple of pots of coffee, and a late night or two, we should be back on track with a new post next week. Speaking of which…
Next Week: Maddie’s Turn
(addendum: I googled ‘atom ant’ the other day and it turns out there was an obscure Hannah-Barbara character by that name from. Whoops.)
Hey there! I found your site through the Comicpress forum and was wondering if you wouldn’t mind imparting a little wisdom? I’m a big fan of having a transparent look to the post body, such as it is on your site, but I’m weak when it comes to CSS. Is there any chance I could snag the code off you? And sorry for posting this in your comments section, but I didn’t see a contact page. Thanks much!
Hi Justin
There’s a bunch of different ways you can get transparency in your site design. I’ve experimented with a few.
For my site I’ve applied semitransparent .png images as background tiles to specific divs.
For example, you would want to start by creating a light, neutral color in an image editing program like photoshop and setting the layer or fill color to a desired transparency. It’s necessary to save you image as a png-24 file format since this supports the alpha transparency, unlike gifs which only support single single-bit transparency (it’s either on or off), while jpegs don’t support transparency at all. The downside to using pngs is that older web browsers don’t fully support them, so some users may end up looking at a design that has no transparent or semi-transparent. If it’s an alpha transparency, then they’ll see the ‘solid’ version of that color. Make the tile really small. Usually 1 pixel should work. The background-image property repeats an image horizontally and vertically by default.
The CSS code might look like this:
#my_textbox_name {background-image:url(‘my_image_name.png’);}
Here’s a good resource:
http://www.w3schools.com/css/css_background.asp
Another way to do it is entierely through CSS:
There are a couple of declarations you need to use for different browsers.
To set up a text area with a white (#ffffff) background with a 60% opacity your code would look something like this:
#my_textbox_name
{
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
The downside to this technique is the transparency is inherited through the cascade, other stuff placed within the div like text and images and not just the background will receive the 60% opacity.
This article gives a pretty good explanation on how to use them. This site is also a great resource for other questions about designing websites.
http://www.w3schools.com/css/css_image_transparency.asp
Good luck with your own site. I like your background images, and I look forward to seeing your comics.
Thanks for the heads up on my contact information. It’s in there, but I should make it a bit more apparent.
Oh man. Stage fright sucks – thing is, if you can just tough it out, people will be sympathetic. Once you realize that, you’re good to go!
Stumbled across your comic through Redux Deluxe. Really like the style. Puts me in mind of the Tintin comic. You’ve got yourself another reader!
Thanks, Mike! I’m a big fan of the ‘clear line’ school of European comics, where Tintin is probably the best known example. I also look to Joost Swarte and George McManus for inspiration from their clean compositions and economy of line.