CSS Coded Opacity Borders
Opacity Works in Opera 9.0
Thinking inside of the box...
Borders are usually around the outside of a photograph but we thought it might be interesting to apply the border to the inside of this photograph. This is a white border with 50% opacity applied. Opacity works in IE, Firefox, and Opera.
Copy and paste this in your Blog or Web page.
Note: The line breaks are removed so that the code doesn't interfere with the Blogging tool.
It will look like this (image included).
Curios About the Code?
Outer Div
Opacity Border
End Outer Div
Put it all together and it will still look like this.
We used the image calla.jpg as a background in the first div.
In the second div we put a white border with opacity applied.
Coding Details:
The first div that contains the background image is 300 x 200. The second div with the opacity border applied is 280 x 180. To position the border inside of the image we calculate the placement of the border. For example, we are using a 10 pixel border. That's 10 pixels on the left, right, top and bottom.
- Image: calla.jpg
- Border: 10 pixels
- Background: 300 x 200 pixels
- Border: 280 x 180
- 300 - 20 = 280
- 200 - 20 = 180
Photograph with permission from the notReality Gallery of Punkclown.
This Opacity border works in version 9.0 of Opera that we found at the
OPERA DESKTOP TEAM The proprietary -moz-opacity:.50 is no longer needed but is included for possible backward compatibility in Mozilla.
does not consist
in gazing at
each other
but in looking
together
in the same
direction."
- Antoine De Saint-Exupéry
Copy and paste in your Blog or Web page.
Float the Quote
Add a Picture
Clear the Float
It will look like this.
does not consist
in gazing at
each other
but in looking
together
in the same
direction."
- Antoine De Saint-Exupéry
Dedicated to Stu and Cornelia who had the love of Wilma for many years before she passed a year ago.
Interesting Content and
Search Engine Techniques
At Designers Who Blog they create a unique an interesting approach for Blog posts. Based on the visually pleasing banners and a bite-sized description of Blogs they will continue to grow in popularity. They take our photograph and rework it into graphic creative banner and a screen print that lures us in. Only after seeing it did I realize that we probably all would like to see what someone creates to represent a Blog, for curiosity if not plain old vanity. They didn't trash the image like I did to RoadApples new photo in the quilt (bottom row far right). It's interesting (to me) to see the Designers Who Blog Creation. It's good content so we linked.
Rankings
Their Google Page Rank today is average while they are climbing in Alexa. That comes to mind because of some questions yesterday about how to get search engines to recognize your Blog or Web site and how to get higher rankings.
Search Engine Techniques
We don't use any techniques but have read a number of ideas. We know not to add a page to Google until it's final and supposedly how to write a description and keywords although we stopped paying attention and now just create new pages sometimes without unique descriptions or keywords. It gets indexed either way. Stu avoid certain words and uses controversy effectively enough that we read it. It was easy to predict that his blog would become as popular as he is today.
Secret Techniques
Do you have a secret technique? Do you follow any of the rules for getting a higher ranking? Recommended reading? The big question is for those who focus on higher rankings to make advertising money. Do you make any money from the advertisements? Or, do you have to run with the big dogs to make money?
Our Valentines
Typography
The Five Simple Steps to Better Typography addresses some terminology and techniques that might help us make that last post look better and make our text more readable. We have copy-and-paste code for CSS Leading and Kerning and look forward to applying the techniques to the CSS Style tips and tricks.
The Shorter Version
CAPTION
The sun is shining here in West Sacramento, California. The plants think it is spring. The Bird of Paradise bloomed yesterday and it's time to do spring cleaning in the backyard. Have a great Saturday.
Copy and paste this in your Blog or Web page.
It will look like this.
CAPTION
The rest goes here.
We are using the absolute-size keyword x-large. The possible values are xx-small, x-small, small, medium, large, x-large, and xx-large.
Image and Pullquote Style
I'm wondering if there is a code to put a "pull quote" type paragraph like the orange pullquotes next to an image keeping the pull quote about the same size as the image?
~Jeff
Orange Pull Quote
The Orange Pullquote that Jeff is referring to looks something like this. This is the paragraph. In the code the paragraph is the second part. The pull quote that floats to the right actually comes first in the code. Isn't that confusing. Coding is like that. The right float comes first in this one so we have to flip-flop our thinking to keep coding.
Width
The pull quote is in a <div> defined as 160 pixels wide. Following the pull quote (in the code) is the text that displays on the left in a paragraph. The paragraph width is not defined.
Height
The height is not defined in the <div> or in the <p> in the orange pull quote example.
Define the width and height
Image on left instead of paragraph
We found an image that is 160 x 239 pixels. We will define the width and height of the pullquote to be the same size as the image. Let's try it with a black background we can see what the pull quote looks like.
Colored Pull Quotes
Copy and paste this in your Blog or Web page.
It will look like this.
Tighter Pullquotes
We are floating the text to the right as far as our post stretches. The image will be flush left. To make it tighter we can contain the two in a div that is a little wider than the 160 width times 2.
We fiddled with the words to make them fit. If we continued to type it would of course overflow.
Copy and paste this in your Blog or Web page.
It will look like this.
Words in the right side box...
And we can keep typing after the div has been cleared and it will look like this in your browser. If the image separates from the text increase the width. It might take a few times to get it just right with your image.
If the colored pullquotes are higher than we defined height:239px then Firefox and Opera will overflow. IE stays within the width defined. This is not a deficiency in any of the browsers, it's just how this particular code is rendered in various flavors.
The Spill Effect
This screen capture shows how the spill effect works in Opera and Mozilla.
No Spill
Borders On
Maybe we don't want it to spill in any browser. We can put the image in a <div> with a defined width for this effect. We'll turn the borders on so that we can see what the left side is doing and how the right side aligns.
Maybe we don't want it to spill in any browser. If we contain the image in a <div> with a defined width then we get another effect type this before the end </div> that has a defined width and contains the image.
Now we can continue typing. We are continuing while we are still in the outer div. We can type as much as we want to type. Your text goes here.
Image and Pullquotes Without Borders
Transparent Spill
Maybe we don't want it to spill in any browser, or we don't want to highlight the spill. We can put the image in a <div> with a defined width for this effect. We'll turn the borders off now that we can know what the left side is doing and how the right side aligns.
Maybe we don't want it to spill in any browser. If we contain the image in a <div> with a defined width then we get another effect. We type this before the end </div> that has a defined width and contains the image.
Now we can continue typing. We are continuing while we are still in the outer div. We can type as much as we want to type. The spill is transparent now and of no consequence. You text goes here.
Copy and paste this in your Blog or Web page.
It will look like this.
Maybe we don't want it to spill in any browser. If we contain the image in a
Now we can continue typing. We are continuing while we are still in the outer div. We can type as much as we want to type. The spill is transparent now and of no consequence. You text goes here.
The Short Version
YOUR TEXT GOES HERE
The rest of your text goes here.
Copy and paste this in your Blog or Web page.
It will look like this.
YOUR TEXT GOES HERE
The rest of your text goes here.
Notice that we increased the width to 100%. If the image splits away from the pull quote try increasing the width in pixels or percents.
