Monday, 29 August 2011

How quick they grow up

My, how quick they grow up. One day a baby and the next, a young lass with a fondness for prancing and dancing and chattering away in pretty girl’s dresses. Yes, our one and only grandchild is on the verge of turning two.

Becoming a grandparent makes you feel old doesn’t it? Where I stand, I’m well and truly on the road to being really old. With the decades behind me tallying just over five, they’ll surely outweigh the ones that lay before me; that’s life.

But you have to admit, while grandchildren remind us of our own mortality, they bring out the youth in us and rekindle our knee high to a grasshopper memories. And wasn’t I perfect little Angel back then; not.

birthday_girl

Boy, in those days the years took forever to go by, unlike today when everything flashes by so fast; if only we could slow things down.

Separated by time and distance we can’t see our granddaughter as much as we like but she can rest assured that we love her dearly.

Mind you, with holidays just around the corner, paying a flying visit to see the apple of our eye will do everyone good, especially Ma and Pa and you know who.

You might also like:
Article link
Isn't Life Just Grand
Article link
Ten Steps To Happiness
Article link
Emmi's Easter Sunday
Atom/RSS
Atom/RSS
Atom/RSS

Read more...

Thursday, 11 August 2011

View Posts by Topic

The list below contains major topics for the period: May 1 2007 until 11 August 2011. Clicking on any of them will take you to posts with that label, aka, Tags.


Enjoy!

Read more...

Tuesday, 2 August 2011

Image Protection: CSS Image Layering

Unlike my last post this example of image protection uses the z-index property to place a transparent image on top of the image you want showcased.

What did I want to achieve by this and what other resources did I use?

(1) Saving the image by right clicking will only save the transparent image
(2) Google’s URL shortener was used to convert the normal image addresses
(3) The benefits of URL shortening are detailed here
(4) Low resolution images
(5) No click link to a larger image

Mouse Trap

Before I forget, many thanks to MediaCollege.com: Free video, audio and electronic media resources, who I looked to for guidance as I went about trying to replicate their example.

Now, while web feed results were a mixed punch it appears I’ve overcome a few hurdles in getting it right here.

First hurdle:

Formatting a centered HTML table and inserting into this two images (one transparent and the other the image above) inside a div. They were then positioned using CSS, and the transparent image with its greater z-index number being placed on top of the mousetrap image. (see code below)

Second hurdle:

My blog HTML gives post images the background colour of my post area. This gave my transparent image a background colour which hid the image I wanted visible. (see bolded text)

.post img { margin: 5px; padding: 5px; background: #f0f0e9; border: 1px solid #f0f0e9; }

This was overcome by giving the transparent image a transparent background in my code (see code below).

Third hurdle:

My level of CSS skill and all things like that in general.

A gentle reminder

For us bloggers it’s impossible to prevent images from being copied. The good news is that we can make things hard for novices.

Open Source Code

<br /> <table style="margin: 0px auto" border="0" cellspacing="0" cellpadding="0" align="center" border-spacing="0"><tbody> <tr> <td> <div style="width: 462px; height: 234px"><img style="z-index: 300; position: absolute; padding-bottom: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; float: none; padding-top: 0px" src="http://goo.gl/vmpws" width="462" height="234" /><img style="z-index: 3000; position: absolute; text-align: center; padding-bottom: 0px; margin: 0px auto; padding-left: 0px; padding-right: 0px; display: block; background: none transparent scroll repeat 0% 0%; float: none; padding-top: 0px" title="Mouse Trap" border="0" alt="Mouse Trap" src="http://goo.gl/HpLJx" width="462" height="234" /></div> </td> </tr> </tbody></table> <br />

Other Open Source Image Posts:
Article link
Image Slicing and URL Shortening
Article link
LinkWithin Alternative Howzat
Article link
LinkWithin Alternative Howzat Part II
Atom/RSS
Atom/RSS
Atom/RSS

Read more...

  © Free Blogger Templates Spain by Ourblogtemplates.com 2008 / Header Image Credit - Athaydesbr

Back to TOP