So you want to learn CSS? The drop caps effect is relatively easy to code using CSS. Initially, I had attempted to use the effect with the CSS3 pseudo classes :first-child and :first-letter. The results were unpredictable. A method needed to be worked out to selectively choose which particular letter required the effect. The steps are very simple, but require a tiny bit of post editing:  - Create the CSS code for the drop caps style (class .drop-it, in this example)  - Select the letter to apply the drop caps effect  - Edit the HTML, wrapping the letter in <code class="drop-it">T</code>  - That’s it! For personal use, I set up a dashboard style so I can see the drop caps effect within my post as I write it. If a dashboard style is not applied, the letters will appear “weird” since they are contained within code tags. Just look at the letters as they appear in this post as opposed to how they look when styled, as shown in the screenshots. To view the drop caps effect in all its glory, click through this post to view it on my blog. Alternatively, a background image could be used instead of a background color. This would add a unique flair without any need for special modifications for each drop caps effect letter selected. The best part is additional bold or italic font styling can be added within the tumblr post editor. The down side is the style is really only useful for posts you author. Of course it could be applied to other posts as well, but that would involve a lot of post specific editing, which can become a very long, involved process, with very little “payback”. View the CSS

So you want to learn CSS?

The drop caps effect is relatively easy to code using CSS. Initially, I had attempted to use the effect with the CSS3 pseudo classes :first-child and :first-letter. The results were unpredictable. A method needed to be worked out to selectively choose which particular letter required the effect.

The steps are very simple, but require a tiny bit of post editing:
  - Create the CSS code for the drop caps style (class .drop-it, in this example)
  - Select the letter to apply the drop caps effect
  - Edit the HTML, wrapping the letter in <code class="drop-it">T</code>
  - That’s it!

For personal use, I set up a dashboard style so I can see the drop caps effect within my post as I write it. If a dashboard style is not applied, the letters will appear “weird” since they are contained within code tags. Just look at the letters as they appear in this post as opposed to how they look when styled, as shown in the screenshots. To view the drop caps effect in all its glory, click through this post to view it on my blog.

Alternatively, a background image could be used instead of a background color. This would add a unique flair without any need for special modifications for each drop caps effect letter selected.

The best part is additional bold or italic font styling can be added within the tumblr post editor. The down side is the style is really only useful for posts you author. Of course it could be applied to other posts as well, but that would involve a lot of post specific editing, which can become a very long, involved process, with very little “payback”.

View the CSS

1 note
Tagged: css, web design, theme, dashboard, so you want to learn css, .
  1. ohnemitleid posted this

Welcome to my CSS Toy Box

This is where I test CSS toys. You are currently looking at a variant of Steven Bradley's 3 Column CSS Layout.

This Simple Auto-Playing Slideshow might move a bit fast, but each slide either contains a link or actually is a link. There is a wee bit of jquery in use for the slideshow to function.

The Title is a good example of a CSS Toy. Blurred text changing to 3D Text with a CSS timed transition.

Initially all I wanted was to create Post Drop-Shadows without using images. This rapidly grew into something else.

I've seen a lot of fancy tricks for links, but most of them required javascript or some variant. I wanted a pure CSS Slider menu, hopefully one that allowed images.

Please take a look around. There are lots of little things I have toyed with, from the rounded inner corners of the avatar frame to the linear gradient background with a semi-opaque "noise" filter overlay.

I'm trying to utilize what I have learned, not just post links to what you might be able to do with CSS. Enjoy!