of Magazine Style
Drop Caps in CSS
For this drop cap we want to force the first big letter to span about four or five lines. The font-size for the big first letter is exactly 100 pixels while the line height is 70 pixels. We tried a line-height of 80 but that leaves a little too much white space. A top padding of 2 pixels allows the first big letter to align with the top of the first line of text. Two pixels is a slight drop. No math, just guestimating.
Magazine style CSS can enhance the page if there is enough text to make the adornment work for the text and not against it. We need more text to get the look we want here. Actually for this example we need a lot more text, either that or we lessen the text width which is what we are doing here.
The drop cap code is easy. We used Inline CSS Style since we will probably never need to use this particular drop cap again.
Copy and paste this in your Blog or Web page.
It will look like this.
For this drop cap we want to force the first big letter to span about four or five lines. Of course we have to type about four or five lines of text to make it work.
Done!
Another way to do the same thing
CSS Style If you want to use the
large drop cap again the style can be added to
your external style sheet or the
top of your page between the <style>
and </style>.
Then you only need to reference
the defined style. The style code is nearly identical to the
inline style. We insert the
.abigletter {
}
and then put the inline style in the external style sheet.
The CSS looks something like this.
.abigletter {
float:left;
color:#D4D4C7;
font-size:100px;
line-height:70px;
padding-top:2px;
font-family: times;
}
The HTML to type in your page looks like this.
It will look like this.
F or this drop cap we want to force the first big letter to span about four or five lines. Of course we have to type about four or five lines of text to make it work.
Overlay Text an Image
Forever
Has
Lasted
Too
Long
Copy and paste this in your Blog or Web page.
It will look like this.
Forever
Has
Lasted
Too
Long
- Display the background image with a
div - Define the desired width and height.
- Insert another
divto hold the text.
A FEW GOOD BLOGS
ALL SHOOK UP
HTML, CSS, DIV, SPAN
ELVIS DID EVERYTHING
The Elvis centered box with a border is made with the DIV while the color change inside the bordered box is done with the SPAN.
Copy and paste this in your Blog or Web page.
It will look like this.
ELVIS DID EVERYTHING
This code works best when you listen to Elvis. For more color choices open the color chart. We used the hexidecimal background color background:#E6E6D7. You can open the named color chart to find colors like gold, pink, and green.
ALL SHOOK UP
CSS STYLESHEET
Copy and paste this in your CSS style sheet.
The HTML looks like this.
It will look like this.
before anyone did anything
elvis did everything
The color change inside the box can be done with the span. This includes a correction, the removal of some stray code that didn't have any impact on the rendering, but a lot of extra code. And I can see now that the capitalize isn't the keyword I was looking for. It's uppercase.
of Magazine Style
Magazine Style in CSS
Magazine Style spiffed up with copy and paste code works well on the Web. We like the use of Magazine style drop caps on a long textual page, or for your style a first big letter may be the technique to add visual interest to a long post or otherwise undecorated text. The Kauai Magazine Style Background post complete with copy and paste code may be a good one to start with. We noticed quite a few who were able to make the code their own to use in a Blog post.
The Easy Inline Pullquote has a magazine style although I'm partial to the Colored Pullquotes and the Orange Pullquotes when there is room.
For those who are writing books, or documenting family history, the How to Make Clickable Chapters Headings may be of some use. Again, it's all served copy and paste style.
The New Yorker Magazine
The New Yorker has such a nice three-column layout that a new Russian magazine mirrors it. Interesting. Weren't we all trying to get away from that
three-column look?
" It's the icon of American intellectualism. You know this magazine, the one with the thought-provoking artwork on the cover, with those black-and-white cartoons sprinkled throughout the glossy, three-column layout. It's that magazine with ads for watches with astronomical price tags. "
from: New Russian magazine mirrors The New Yorker by JENNIFER LUDDEN
source: Weekend Edition - Sunday (NPR), November 20, 2004.
via:
HighBeam Research
Help!
We've received a few emails regarding Mandarin and hope someone can help us out.
"I've been receiving the XP IE error closure box every time I've accessed your site for around six or eight weeks now. It then shuts down all my windows. I'm not running SP2.
I don't know if anybody else has had this problem, but I find it with no
other site I visit on a regular basis. Could it be some script you're
running or do I just put it down to XP?..."
Mike Golby
"...Not a new phenomenon, I've seen it in the past too, and ignored it as not security-relevant.
It's independent of which site(s) I visit after MD, so it's not as if their sites are pulling pix from yours or so.
It stops when I close and restart the session.
It's outgoing traffic from here to www.mandarindesign.com 66.224.110.140 with remote MAC 86-59-20-00-01-00. TCP via port 80. My firewall is using the rule "Ask all running apps" for this traffic, there are 10 to 20 messages passed each time.
Were I paranoid, I'd say someone was tracking my surfing habits, some
advertising somewhere perhaps.
(I'm clean of spyware & virusfree). Not that it bugs me, I just thought it
peculiar and thought you should know.
Stu Savory
Have you had problems with Mandarin? I've tried four PCs on every page and numerous browsers and can't duplicate the problem. Are you seeing the problem? Any guesses what might be going on? I haven't added any new scripts that I remember.
Help please...
Polaroid Picture Borders
Method 1: CSS Inline Style
Noded posts photographs with a Polaroid style border. The border looks something like this.
Copy and paste this in your Blog or Web page.
It will look like this.
The code above was tested in IE 5.5, IE 6.0, and Mozilla Firefox. It should work in all browsers, if you don't see a Polaroid looking border in your browser please leave a message in the comments.
Polaroid Picture Borders
Method 2: CSS Style Sheet
CSS Style for Polaroid Border
For one-time or occasional use CSS Inline Style works fine.
If you want to reuse the Polaroid effect you can add a style
to your external style sheet or in the HEAD section
of your page.
Where do you put the style code?
If you are using a template look for the <style type="text/css"> and put the code below it. Noded added a class named polaroid to the style sheet for easy reference. The style looks something like this.
To reference polaroid and polaroidtext type this in your Blog or Web page.
It will look like this.
Combining Borders and Text Overlay
We used the calla.jpg image that is 300 x 225. The trick is to use negative spacing to move the text
up inside the border in the polaroidtext rule.
This post could be title 100 Ways to Use One Borrowed Image. Thanks Dude for the photo and thanks to Noded for the border technique.
More Picture Border Styles
- White Mattes
- Triple Matte and Border
- CSS White Borders
- Matted Style Border Gold: Float Left
- CSS Coded Opacity Borders
- CSS Filmstrip Frame Border
Spider ART Generator
Enter your Internet address (URL) and watch it spider graphic images and create a collage based on your links. If you like what it creates print the screen to your clipboard and paste in your graphic tool. We found the Robot stencil automation link at Bryk's blog. There's a lot to this site, we had to search to find the SpiderArt generator. Let us know if you find more treasures.
We watched it paint graphics and text from vlca, chessnut, Fridayfishwrap, Easybakeoven, Other_side, dianasplace, fatshadow, and more.
Firefox 1.0 Free Download
The browser wars are over. Firefox won.
Overheard:101 things that the Mozilla browser can do that IE cannot. Via email from Stu Savory.
Has anyone joined
Blogarama? Why?
Another place we noticed is
BlogExplosion that promises to bring new visitors. Does it work? Good visitors or junk hits?
We aren't big joiners but wonder, are we missing any good blog related sites?
Same Code Without Opacity
Opaque
This is the same post as yesterday without opacity applied. Opacity is a no-harm effect. Some might think it looks better without the opacity applied.
Opacity Blending Effects
Opacity
Hover over the square link. That's pure CSS in action and it only needs to be added to the style sheet once. The link squares have CSS opacity hover applied. There isn't any OnMouseover scripting for this hover effect.
Veterans Day 2004
Veterans Day
"Americans live in freedom because of our veterans' courage, dedication to duty, and love of country. On Veterans Day, we honor these brave men and women who have served in our Armed Forces and defended our Nation."
Today is Veterans Day, a day to honor the men and women who have served our country. It's a national holiday so most Americans have the day off work to attend parades and ceremonies. Some will put flowers and flags on the graves of our Veterans. It's raining here today in Sacramento so some of the planned activities probably aren't going as planned, but that's how plans go.
Cleveland Jackson
On the eleventh day, of the eleventh month, blogger Stephen James last year offered in memory of a fallen soldier the name: Cleveland Jackson. His name didn't make it on the Vietnam Veteran Memorial Wall. His memory is honored by bloggers.
How to Float the Veterans Day Poster
The technique for floating an image with a caption is simple. It's a paragraph with CSS style added to the paragraph that contains the image.
<p style="width:125px;float:left;"> <img src="picture.gif" width="100"> <br>Caption </p>
The text will wrap around the image. The poster is 100 pixels wide so we made the paragraph wider with width:125px; so that there would be some whitespace between the poster and the text.
Copy and paste this in your Blog or Web page.
It will look like this (image included).
Veterans Day
"Americans live in freedom because of our veterans' courage, dedication to duty, and love of country. On Veterans Day, we honor these brave men and women who have served in our Armed Forces and defended our Nation."
THE REST OF YOUR TEXT GOES HERETorturing Tables with Opacity
Table Cell Opacity
This is a simple table with a background image. The first cell contains plain text. The next cell has 50% opacity applied. The text is barely visible at 50%.
| This is a cell in a table |
| This is a cell with 50% opacity applied. |
The code looks like this.
Table Background Opacity
This table has the opacity applied to the background image. The table cell inherits the opacity of 50%.
| This is a cell in a table with a background opacity of 50% |
The code looks like this.
Table Background Opacity with Position:relative
This table has the opacity applied to the background image. The table cell inherits the opacity of 50%.
Adding position:relative; to the cell style will make the text fully visible (fully opaque) in Internet Explorer.
| This is a cell in a table with a background opacity of 50%. This text is fully visible (fully opaque) in Internet Explorer. |
The code looks like this.
Table Background Opacity with Fully Opaque Text
The fully opaque text achieved with position:relative; only works in Internet Explorer. At first it seems like it should work to simply apply opacity to the table background image and then apply an opacity of 1.0 to bring the text back to fully opaque. It doesn't work. The 1.0 is applied to the 50% opacity so we still end up with opacity of 50%. Opacity is applied across the entire object, in this example the table.
The position:relative; that works in IE in this opacity example isn't a hack or a trick. It works in other browsers when used in a div as demonstrated in CSS Opacity Applied to Background, but the code is not intuitive.
http://music.trentadams.com
The effect that Trent achieves (look at it in IE) is done by putting the opacity on top of the image. It doesn't use tables. Take a look at the effect, it can work in Mozilla with a minor change to the stylesheet. We can see that Trent attempted it to make the opacity work in Mozilla, the syntax is only slightly off. Trent (no email) if you see this here's the CSS external style sheet code that will make it work in other browsers.
#content {
position:absolute;
top:180px;
left:10px;
width:600px;
filter: alpha(opacity=70, style=0);
opacity:.70;
-moz-opacity:.70;
background-color: #FFFFFF;
padding:2px;
border:2px solid #0099FF;
}
Have a great Wednesday. Really, I'm nearly finished with opacity.
CSS Coded Opacity Borders
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.
Copy and paste this in your Blog or Web page.
It will 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.
Tip: 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.
The first div that contains the background image is 300 x 225. The second div with the border is 280 x 205.
- Image: calla.jpg
- Border: 10 pixels
- Background: 300 x 225 pixels
- Border: 280 x 205
- 300 - 20 = 280
- 200 - 20 = 205
Some blogging tools insert stray <br> breaks or <p> paragraph tags where you think there are only blank lines. If the copy and paste code doesn't work try removing extra whitespace using the delete key.
CSS Filmstrip Frame Border
Three pictures, each 100 pixels wide.
- Filmstrip frame width 306px
- Image dimensions 100 x 75 (three 100 x 75 images)
- The top border and the bottom are the same code.
- The Font size 5pt makes a small square.
- Remove white space in the code.
Copy and paste this in your Blog or Web page.
It will look like this.
It looks like a lot of code but it's just the same code repeated as many times as needed to create a top border. Who is that lovely mother? My daughter. Today is her birthday. Happy Birthday Lanissa.
