Wednesday, August 29, 2012

Background Image with Opacity Using CSS


A class assignment required using a company logo as a background image behind text. The company logo was required to be 70% transparent. The opacity property renders the logo and the text transparent because it is an inherited property. How do you keep the text visible? This requirement had me stumped as I tried different approaches.

One reason this concept was so difficult for me was because I remember making images transparent in Photoshop with the touch of a button. Because of this, it was difficult for me to understand what has to happen for a logo to be partially transparent without affecting the text and without using Photoshop or another image editing  application.

This is the scheme. The logo is applied to a div as a background image. The text is placed in a nested div inside the logo div. A background color (matching the body color) is applied to the text div. It covers up the logo, right? The transparency of the background color is adjusted to let the logo show through as desired. You do this with the rgba color property:
background-color: rgba(94, 153, 150, .75) where the .75 is the opacity (alpha value) of the background color.  To get the logo to be very faint at 30% opacity, we cover it up with a background color on the text div with an alpha value of .7. It is a background color and does not affect the text.

GEM #6 The key here is to understand that you’re working with a layer (div) on top of the logo div to create the transparency.

A helpful video for this concept is by hdvidsonly.

Saturday, August 25, 2012

When a Virus Attacks


The saying “If it’s not broke, don’t fix it,” has a lot of merit. I was interested in trying out a new text editor. Previously, I had used Dreamweaver in code view. I found myself making minor typing errors like leaving off a semicolon or curly brace with terrible results when a browser interprets the CSS code.

I suspected there were text editors that would catch the code errors, and save me hours in tracking down my mistakes and reducing eye strain. Dreamweaver highlights code errors in html, but I haven’t found it to highlight CSS errors.  I downloaded Notebook ++ and then the craziness started.

I was following a HTML5 Canvas Tutorial and had 10 or so lines of code written. I pressed enter to move to the next line, and the curser started racing down the page adding blank lines to the code. Line numbers in the hundreds raced up the page. I managed to get to the top of the page and copied the few lines of program. I pasted them in a new Dreamweaver site, and the curser took off down the page in that application. I switched over to Microsoft word, and, still trying to save my precious few lines of code, started to paste when page after page of blank pages started piling onto my document. I moved to my browser, Mozilla Firefox, and windows started opening. Some were duplicates of the code I’d been working on, and some were blank blue screens. When I closed out Firefox, it reported I had 400 plus windows open!!

I did some things that didn’t help my situation, but I won’t go into that now.  I uninstalled the Notebook ++. A system restore got me out of my jam. This takes your computer back in time before the incident that caused the virus or whatever disrupted your system. Once I made it back to my desktop screen, I clicked that oft ignored button, HP Recovery Manager, and followed the easy directions to restore. I chose the most recent date [to restore back to] which was a week ago.
After the restore, I started my McAfee Virus Scan. This took several hours to complete, and didn’t report any problems.

I was most concerned about work I could lose with the restore. I had set up 3 FTP sites with Dreamweaver and those were gone. Fortunately, I had the sites saved and could easily import them. The precious 10 lines of canvas code were still in Dreamweaver with all that extra space. I copied the lines I needed and set up a new file. Then I deleted the file with hundreds of blank lines. I pulled up the word document, copied the pages that weren’t blank, opened a new document to paste them into, and deleted the many-paged monstrosity created by the “virus.” All in all, I was able to recover in a couple of hours and get back to my tutorial.

I use the term “virus” generically. I’ve described what I saw on my computer screen, and, to the best of my knowledge, those are symptoms of a computer virus. Certainly the technician at McAfee’s Techmaster service agreed wholeheartedly that I had a virus, and would be glad to remove the virus for a one-time fee of $129 or a year contract for $179. 

Additionally, I don't know that Notebook ++ downloaded a virus. I only know that 20 minutes after the download, my problems started. A classmate of mine downloaded the program 6 months ago, and is thrilled with it.


Monday, August 6, 2012

Access Denied Message in Adobe Flash Professional

I started up my Flash Professional CS5.5 to continue a tutorial and the screen said, "Access Denied." My heart started racing and I wanted to run for the hills. Nooooooooo.

My natural reflex was to google the problem. The solutions were not warm and fuzzy. I got lucky and tried something that worked so I'll pass it on.

This is what gave me the Access Denied message:

Start Menu> Select Flash Professional>Select Recent File and click

This is how I avoided it:

Start Menu> Select Flash Professional and click

Problem solved....whew!

It would be interesting to know why this happened...leave a comment if you have any insight.