Saturday, August 27, 2011

Ready For Irene

It's been a busy day thanks to Irene, damn her. There was a lot to do but I think it's all done and I'm as ready as I'll ever be

  • The grass was high already and I knew I won't be able to mow it for days so I took care of that today.
  • I got all the patio furniture moved into the shed, as well as the trash cans. That's less things to look for later.
  • I pulled the window unit air conditioner in the master bedroom so I could seal up the window, then made sure all the storm windows in the house are closed up tight and the weep holes in all of the storm window frames aren't blocked or clogged. I left a towel in each of the 4 bedrooms upstairs for use later if the wind starts pushing the rain in through the storm windows so I'm prepared for that. I learned my lesson about that from Isabel back in '03.
  • Everything in the basement has been put up on shelves and/or moved out of the low side so it has a better chance of staying dry.
  • I made sure to fully charge my cell phone, and have batteries and flashlights set out as well as a few candles and a lighter.
  • I'm stocked with plenty of water in case we lose water pressure again.
  • I'm stocked on food I can eat with no preparation needed (including cat food for Zeus) plus I cooked a bunch of food because I probably won't be able to cook anything for a couple days once I lose power, and I have two big bags of ice in the freezer to keep all the perishables cold.
  • I doubt I'll need to leave but just in case I even filled the fuel tank in my truck so I'm good to go even if the gas stations are all closed due to power failure.
  • I have cash in case I need to leave and any purchases are required since no electricity means no credit card or debit card processing. A lot of the local small businesses will open for cash sales.

I'm as ready as I'll ever be.

Wednesday, August 17, 2011

Pseudo-elements Offer More Customization Options

Pseudo-elements are basically a part, portion or specific form of an element. The correct syntax to use with a pseudo-element is selector:pseudo-element{property:value;}. You're most likely already partially familiar with these, even if you don't know it. To make it easier to explain them I will group them into three categories; links, actions and text or content.

Link pseudo-elements are the type probably already familiar to you. They are :link:visited and :active. They style the specific form of links, a:link{property:value;}  would style all unvisited links, a:visited{property:value;} would style only those links which had already been clicked and a:active{property:value;} would style the appearance of a link as it is clicked. You can use the :hover pseudo-element with links also, just be sure to use all of the link pseudo-elements in the correct sequence or :active and :hover won't work. The correct sequence is :link, :visited, :hover, :active. You don't have to use all of them, as long as you keep them in this order they'll still work

Next are the action type of pseudo-elements, :hover and :focus. Most are already familiar with :hover, it's pretty self explanatory. When used, it styles how something looks when the cursor is hovered on it. You can use :hover for more than just links. For example, I tend to use dark themes which would of course require a light colored text in order for the text to be visible. This is opposite of everything else we read since we are accustomed to a light background with dark text. What I did was enclose all of my blog entries in a div with a custom selector (.blog) then styled .blog in my custom CSS. Through the use of .blog:hover all of my blog entries now become easier to read when hovered, the colors change to a light background with dark text. There are a lot of uses for :hover, from changing text properties to replacing images. Then there's :focus, this one is of more limited use. It works only in places where user input is allowed, basically comments and replies, or forms. I've used this to make it easier and more natural to comment on previous sites. I used .selector{background-color:black;}, this turned the background of the comment text entry box black so it matched my theme. Then I added .selector:focus{background-color:white;} which caused the background of that same area to turn white when it's clicked. That box blends perfectly into my theme but when anyone clicks it to type a comment it reverts back to what people are used to when writing or reading, a light background with dark text.

Last are the text or content category of pseudo-elements, these are :first-letter, :first-line, :first-child, :before and :after. These can be used to add some interest to text items on your site. I'll use the previous example from my own site to explain these. I enclose all of my blog entries (and a few other odds and ends) in a div, giving them a class of .blog with <div class="blog"> then style .blog in my Custom CSS. The following all pertain to this setup

  • :first-letter will style only the first letter of the selector used. Using my site as just described, if I added .blog p:first-letter{property:value;} to my custom CSS I could individually style the first letter of each paragraph contained in my .blog selector. I used this with font-size to make the first letter of each paragraph appear larger than the rest of the font. You could use color, font-face, whatever you wish. 
  • :first-line will style only the first line of the selector to which it  is applied. Using my setup as an example .blog p:first-line{font-variant:small-caps;} would style the first line of text in every paragraph in my .blog div, changing the lower case letters to small upper case letters.
  • :first-child will style only the first child element of the type specified. For example, in my .blog div I may have several paragraphs written using the HTML <p> tags. Those paragraphs, being contained within the .blog div, are the children of the .blog div. So if I were to add .blog p:first-child{color:red;} to my CSS then in every blog entry I'd enclosed in my .blog div the first paragraph would have a red font color. If I added something to it, like .blog p:first-child i {color:green;} then anything italicized in the first paragraph of any .blog div content would be green.
  • :before will allow you to add content in front of existing content while :after will allow you to add content after existing content. You can add text or an image this way.

Tuesday, August 9, 2011

Layering Multiple Background Colors/Images

While goofing around with inline CSS I accidentally stumbled across a way to use multiple background colors and/or images. For this post I'm using only colors to keep the sample code short and easily read. I see no reason why you couldn't break this out of inline CSS by assigning each div a different class or id. This is not done with a table or multiple tables, it's purely CSS.

<div style="width:98%;height:450px;position:relative;border:3px ridge black;margin:auto;">
<div style="height:90%;width:90%;background-color:green;position:relative;margin:auto;top:5%;border:2px solid black;">
<div style="height:80%;width:80%;background-color:blue;position:relative;;margin:auto;top:10%;border:1px dashed black;">
<div style="height:70%;width:70%;background-color:red;position:relative;margin:auto;top:15%;border:1px dotted black;">

The code above produces this: