Tags: commentary, flowchart, humor, image, life
comment (1) July 21st, 2012 by Robin, in Saturday with the Spark
Tags: creativity, dance, image, inspiration
Though my weak ankles, flat feet, and messed-up knees keep me from most dancing, I still have the little-girl dream of looking and feeling this light and graceful. I may not be able to do it, but I can write about it, and imagine…
July 19th, 2012 by Robin, in Thursday in the Zone
Tags: heroclix, humor, image, star wars miniatures
These are all pictures I took while gaming at various local shops over the years…I generally come up with funny ways to position Clix and SWMinis figures during longer games. xD Scroll down and enjoy!
Star Wars Minisno comments July 18th, 2012 by Robin, in Wednesday in the Word
Tags: bible, image, jesus
According to Colton Burpo, whose amazing experiences formed the basis of the book Heaven is for Real, the above picture is the most accurate earthly representation of Jesus Christ.
The warmth and compassion depicted in this picture brings tears to my eyes every time I view it. This is Who Sunday morning worship is all about, folks. Indeed, He is what every moment of prayer and worship is about. Sometimes we just lose the sense of just Who loved us enough to suffer and die for each one of us to be saved. This picture brings that sharply back into focus.comments (11) July 17th, 2012 by Robin, in Tuesday on the Soapbox
Tags: cg art, digital, image, landscapes, philosophy
Oh, if only these places and vistas really existed…I would definitely have to visit each one! Sometimes the sheer beauty of a place is inspiration enough, and these would be worth the travel time.
Image source: DesktopNexus.com
Image source: mi9.com
Image source: OnlyHDWallpapers.com
Image source: SolarFlareStudios.com
(For each of these images, click to get access to a much larger version, or you can go to the sourced website to retrieve it in a big enough size for your computer.)no comments July 16th, 2012 by Robin, in Monday in the HTMLab
Tags: flowchart, humor, image, webdesign
comment (1) September 19th, 2011 by Robin, in Monday in the HTMLab
Tags: graphics, image, images, layout, webdesign
You probably read this post title and thought, “Shim? What’s that? And why is it transparent?” Well, in the days before CSS padding and margins, transparent shims were a godsend to webdesigners…but they can still help out our modern pages! Read on to find out how!
A Little Shim History
Transparent shims borrow their name from their wooden companions in the carpentry and construction businesses. These thin wooden pieces, often made from scrap wood or plywood, can be used to fill awkward gaps or spaces, help separate a couple of pieces of material, or make something fit more snugly and more level.
In webdesign circa the mid-2000s, a “transparent shim” image was about the only way to precisely position elements on your page. For instance, need an extra 30 pixels of horizontal space between your HTML form’s label and its text entry box? Then you’d just put in a little image tag linking to your shim image between the form label and text entry box, like so:
<img src=”shim.gif” width=”30″ height=”1″>
Or, if you needed more vertical space between your header image and your content, you’d put a little image tag like this between header and content:
<img src=”shim.gif” width=”1″ height=”50″>
Because this image was transparent, it could be stretched to any dimensions using the width and height measurements without the layout looking strangely colored. And, because it started out as a 1px-by-1px GIF file, it loaded quickly and didn’t clutter up slower connections.
These Days: Less Shim, More Padding
With the advent of easier-to-code CSS padding and margins, however, transparent shims have been less and less needed. No more need to call for that shim 50 or 60 times in a page when a couple of well-coded properties in a stylesheet can handle it all, right?
…Well, MOSTLY. There are a couple of instances where transparent shims can still help out:
Shim Situation #1: CSS Padding Rendering Differently Between Browsers
Sometimes Internet Explorer, Firefox, and Chrome will disagree on how to interpret CSS style rules such as “margin: 3px;” or “padding: 1px 10px 1px 10px;”. (CSS box model problems with IE, specifically, have been widely documented for several years.)
Shim Situation #2: Disobedient Layout Elements
Sometimes, an element on the page just will NOT position itself where you want it, and no amount of finagling, debugging, pleading, or shaking your fist at the screen will fix it. Whether text isn’t wrapping like it should, or whether some floated element is somehow “un-floating” itself, display bugs can ruin your webdesign day.
Enter the transparent shim; they act as little peacemakers, going across platforms, being equally accessible and understandable. All you have to do is put in that little image tag wherever you need it, and work with the pixel measurements to your heart’s content.
How to Make a Transparent Shim
- First, open an image program that can make images as well as edit them, and that can make images transparent. Adobe Photoshop Elements is the program I use; Microsoft Paint won’t do it, and neither will most really basic photo editors. Free applications that can make transparent images include GIMP and Pixlr.
- Choose to create a new image rather than edit an existing one, and make sure its width and height are both 1 pixel. Also, choose the “Transparent Background” option (could be in a dropdown list or a checkbox).
- Once you’ve created the image, save it as a transparent GIF or PNG-24 file. (JPEG format doesn’t recognize transparency.) Make sure you click the option to save it as a transparent file, otherwise it will just render as white. (For instance, Photoshop Elements has the “Save for Web…” option, in which you click a little checkbox reading “Transparency” underneath the file format option box. Your image program may be different–check every option before you click “Save!”)
- You should be done! To test transparency, load your new image, sized at 50 pixels by 50 pixels, on a basic black-background web page. If no 50×50 white block shows up at the top left corner, your image is indeed transparent!
Transparent shims are relatively easy to make and work with. If you have an awkward form width, an odd spacing, or even a fairly okay layout that needs just a little adjustment, try placing a shim, and see how heroic 1px by 1px images can be!comments (2)