Pizza CSS

TOP (2 images) - HTML and display result
BOTTOM - HTML with CSS applied

Custom hover “tooltips” demo. Hover any object (text or image) displayed.
Optimal display performance (transitions) for Firefox.
Fails on Internet Explorer.

Demo available here.

…no such thing as a stupid idea?
In the spirit of applying more CSS, the goal of this project was to design tooltips for new tumblr users. The web page object in question would be outlined in red upon hover. A tooltip would then display with the function/tips (whatever…) for the hovered object.
Then my own logic prevailed. Would a tumblr newcomer make the leap to finding the post and/or how to install, enable/disable a style from userstyles.org for this “Help” style? The odds are very much against that. Project scrapped.
The project may have been scrapped, but what I have learned in the process has not. I have an idea. Let’s make a pizza. With CSS.
Next up: Pizza.
Wait until you smell it cooking before you decide you’re not hungry.

…no such thing as a stupid idea?

In the spirit of applying more CSS, the goal of this project was to design tooltips for new tumblr users. The web page object in question would be outlined in red upon hover. A tooltip would then display with the function/tips (whatever…) for the hovered object.

Then my own logic prevailed. Would a tumblr newcomer make the leap to finding the post and/or how to install, enable/disable a style from userstyles.org for this “Help” style? The odds are very much against that. Project scrapped.

The project may have been scrapped, but what I have learned in the process has not. I have an idea. Let’s make a pizza. With CSS.

Next up: Pizza.

Wait until you smell it cooking before you decide you’re not hungry.

Out of Thin Air

I was never really impressed by this. It was always just a graphic and a saying. I decided to recreate it using minimal HTML, then styling the rest with CSS. Well, except for the background image.

Firefox, Opera and Safari - Looks great!
Chrome - The rotated edges appear “sharpish”. Even with image-rendering: optimizeQuality it seems as though Chrome overrides this with optimizeSpeed.
Internet Explorer
- Fail i.e. met expectations.

Available for viewing here. Check out the source code, if you are so inclined. The majority of CSS is taken up by vendor prefixes for background gradients and transforms.

This is all for the HTML. Originally I had recreated the project as a tumblr post. This was later changed to a single page to avoid any clutter with blog theme code if viewing the source code was desired.

<p><code class="envelope">envelope</code></p>
<p><code class="card"><code class="redfont">card</code></code></p>
<p><code class="card-heart">card-heart</code></p>
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 &lt;code class="drop-it"&gt;T&lt;/code&gt;  - That&#8217;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 &#8220;weird&#8221; 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 &#8220;payback&#8221;.
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

So you want to learn CSS?

So you want to learn CSS?

So you want to learn CSS?

This is going to move fast, shortcutting to the important part: setting a variable for a CSS style published on userstyles.org. Fast forward past creating a publishable CSS style, visiting userstyles.org, creating an account, selecting the My Account link, then finally selecting Create New Style.

Here is the information for the camera icon style (refer to screenshot above):

Name: tumblr - Camera Icon Fix
Description: Fixes the camera icon background color to match post color.
Additional Info: Enable this style after your initial problem dashboard style.
CSS: CSS style code
Style Settings: “Add Color Setting” is selected (see below)
Before and After Screenshots: I usually just use “After” for both since it is the image shown when the style is selected for installation

For reference, the published style is available for viewing here.

In order to make the Camera Icon Fix style universal, the value for background-color should be set to a variable. The background color line for the CSS is edited for the user-defined variable. The variable for this example is CAMERABACKGROUND. The syntax places the variable name inside hard brackets, contained within a CSS comment, like this: /*[[CAMERABACKGROUND]]*/. Within the edited CSS style?

.photo_reply,
*:hover photo_reply {
  background-color: /*[[CAMERABACKGROUND]]*/ !important;
opacity: 1 !important;
  background-position: 0 0 !important;
}

Returning to the Style Settings / “Add Color Setting” selection presents you with form fields for the following:
Setting display name: Post background color (default = white)
Setting placeholder: CAMERABACKGROUND
Options (Default): #FFFFFF

Upload a preview image and select Save. The completed style should now display as it would be seen by visitors. The final test as a publisher should be to install the style using both Chrome and Firefox to verify it functions as advertised.

Speaking of advertising, why not create a post on tumblr, advertising your latest publication?

Next up: Drop Caps for your tumblr posts

So you want to learn CSS?
The tumblr camera icon CSS uses a shorthand rule for background. While this is a nice technique, it changes everything at once, without the specificity necessary here. What is really needed when creating a custom tumblr dashboard style, is to assign the background-image (the camera icon), and the background-color separately.
Repairing the camera icon requires graphic replacement. Two cloned images of the camera icon are created. The image opacity for the inactive icon is set to .65 (65%). The image opacity for the active icon is set to 1 (100%). I would like to make it clear these are the opacity properties of the images. The CSS comes later.
The CSS code does the following:- Sets the icon background color (white by default).- Sets the icon opacity to 100% to override current tumblr CSS. The images, by design, will handle the correct opacity.- Sets the icon background position. This needs to be altered since the icon already has a background position assigned by the tumblr CSS.- Assigns a different background image for inactive/active hover states.
NOTE: The code below has been abbreviated. Data URI was used in place of actual PNG images. Data URI information would be quite lengthy to show in this post.
.photo_reply,*:hover photo_reply {  background-color: white !important;  opacity: 1 !important;  background-position: 0 0 !important;}.photo_reply {  background-image: url(&lt;DATA URI&gt;) !important;}*:hover .photo_reply {  background-image: url(&lt;DATA URI&gt;) !important;}
The CSS style could now be made &#8220;universal&#8221;. The style would simply need to be edited to allow for post background color variance.
Next up: Publishing on Stylish with variance in mind

So you want to learn CSS?

The tumblr camera icon CSS uses a shorthand rule for background. While this is a nice technique, it changes everything at once, without the specificity necessary here. What is really needed when creating a custom tumblr dashboard style, is to assign the background-image (the camera icon), and the background-color separately.

Repairing the camera icon requires graphic replacement. Two cloned images of the camera icon are created. The image opacity for the inactive icon is set to .65 (65%). The image opacity for the active icon is set to 1 (100%). I would like to make it clear these are the opacity properties of the images. The CSS comes later.

The CSS code does the following:
- Sets the icon background color (white by default).
- Sets the icon opacity to 100% to override current tumblr CSS. The images, by design, will handle the correct opacity.
- Sets the icon background position. This needs to be altered since the icon already has a background position assigned by the tumblr CSS.
- Assigns a different background image for inactive/active hover states.

NOTE: The code below has been abbreviated. Data URI was used in place of actual PNG images. Data URI information would be quite lengthy to show in this post.

.photo_reply,
*:hover photo_reply {
  background-color: white !important;
opacity: 1 !important;
  background-position: 0 0 !important;
}

.photo_reply {
  background-image: url(<DATA URI>) !important;
}

*:hover .photo_reply {
  background-image: url(<DATA URI>) !important;
}

The CSS style could now be made “universal”. The style would simply need to be edited to allow for post background color variance.

Next up: Publishing on Stylish with variance in mind

So you want to learn CSS?
The camera icon is contained in an iframe. To paraphrase the definition of an HTML iframe, you&#8217;re basically placing an HTML document in a frame inside of another HTML document. In the case of the camera icon, viewing the HTML document reveals the CSS style specifically for the icon.
This could be accomplished by visiting the link for the photo reply and viewing the HTML source, or by examining the document using the DOM inspector.
If you examine the HTML source code of a photo reply post, you would see something like this for the iframe information:
&lt;iframe src="/upload/image?photo_reply=tqhBz0VW&amp;post=00123456789"  width="21" height="19" border="0" scrolling="no" allowTransparency="true" frameborder="0" &gt;&lt;/iframe&gt;
In this example, the URL for the photo reply HTML would be:
http://www.tumblr.com/upload/image?photo_reply=tqhBz0VW&amp;post=00123456789
(This isn&#8217;t really a valid URL. It was altered and is shown for purposes of illustration. A valid URL would appear the same except for the unique reply id number at the end.)
The image shown above is from DOM inspector for the photo reply HTML document. If you were to view the HTML source code for the photo reply page, you would see a section for the CSS that begins with &lt;style type="text/css"&gt;. Can you see how the two are directly related, both in visual tree directory form (DOMi) and in text (HTML source)?
In both cases, the CSS styling for the camera icon is as follows:
.photo_reply {  width: 21px;  height: 19px;  background: url(/images/dashboard_master_sprite.png?2) no-repeat scroll -500px -327px transparent;  opacity: 0.65;  filter: alpha(opacity=65);  -moz-opacity: 0.65;}.photo_reply.already_photo_reply {  background-position: -531px -327px;  opacity: 1 !important;  filter: alpha(opacity=100) !important;  -moz-opacity: 1 !important;}:hover .photo_reply {  opacity: 1;  filter: alpha(opacity=100);  -moz-opacity: 1;}#loader {  padding-top: 2px;  padding-left: 2px;}
It gives the opacity levels, selectors, size, image location, positioning&#8230; everything! I thought it was awesome anyway.
Next up: Camera icon cloning

So you want to learn CSS?

The camera icon is contained in an iframe. To paraphrase the definition of an HTML iframe, you’re basically placing an HTML document in a frame inside of another HTML document. In the case of the camera icon, viewing the HTML document reveals the CSS style specifically for the icon.

This could be accomplished by visiting the link for the photo reply and viewing the HTML source, or by examining the document using the DOM inspector.

If you examine the HTML source code of a photo reply post, you would see something like this for the iframe information:

<iframe src="/upload/image?photo_reply=tqhBz0VW&post=00123456789" 
width="21" height="19" border="0" scrolling="no"
allowTransparency="true" frameborder="0" ></iframe>

In this example, the URL for the photo reply HTML would be:

http://www.tumblr.com/upload/image?photo_reply=tqhBz0VW&post=00123456789

(This isn’t really a valid URL. It was altered and is shown for purposes of illustration. A valid URL would appear the same except for the unique reply id number at the end.)

The image shown above is from DOM inspector for the photo reply HTML document. If you were to view the HTML source code for the photo reply page, you would see a section for the CSS that begins with <style type="text/css">. Can you see how the two are directly related, both in visual tree directory form (DOMi) and in text (HTML source)?

In both cases, the CSS styling for the camera icon is as follows:

.photo_reply {
  width: 21px;
  height: 19px;
  background: url(/images/dashboard_master_sprite.png?2) no-repeat scroll -500px -327px transparent;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -moz-opacity: 0.65;
}

.photo_reply.already_photo_reply {
  background-position: -531px -327px;
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
  -moz-opacity: 1 !important;
}

:hover .photo_reply {
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
}

#loader {
  padding-top: 2px;
  padding-left: 2px;
}

It gives the opacity levels, selectors, size, image location, positioning… everything! I thought it was awesome anyway.

Next up: Camera icon cloning

So you want to learn CSS?
Images, top to bottom:- Default behavior- Reverse engineered behavior
.photo_reply {  opacity: 1 !important;}*:hover .photo_reply {  opacity: .65 !important;}
- Quick fix extended
body {  background-color: black !important;}.photo_reply,*:hover .photo_reply {  background-color: white !important;}.photo_reply {  opacity: 1 !important;}*:hover .photo_reply {  opacity: .65 !important;}
- Quick fix extended anomalyWith the substitution of a background image instead of a solid background color, the camera icon background duplicates, in miniature, the dashboard style background.
I dislike this option. With a solid background color, the camera icon appears as it would if active with the default behavior. When active, it appears blocky and unnatural. This abnormal appearance becomes more obvious and magnified when a background image is used. Bleh!
Next up: Dry, boring, investigative research

So you want to learn CSS?

Images, top to bottom:
- Default behavior
- Reverse engineered behavior

.photo_reply {
  opacity: 1 !important;
}
*:hover .photo_reply {
  opacity: .65 !important;
}


- Quick fix extended

body {
background-color: black !important;
}
.photo_reply,
*:hover .photo_reply {
  background-color: white !important;
}
.photo_reply {
  opacity: 1 !important;
}
*:hover .photo_reply {
  opacity: .65 !important;
}


- Quick fix extended anomaly
With the substitution of a background image instead of a solid background color, the camera icon background duplicates, in miniature, the dashboard style background.

I dislike this option. With a solid background color, the camera icon appears as it would if active with the default behavior. When active, it appears blocky and unnatural. This abnormal appearance becomes more obvious and magnified when a background image is used. Bleh!

Next up: Dry, boring, investigative research

So you want to learn CSS?
Camera icon class - .photo_replyBackground - body {background-color: black !important;}Quick fix - .photo_reply {opacity: 1 !important; background-color: white !important;}
Upon examining the active/inactive behavior of the camera icon, the icon appears dimmed or faded when inactive, becoming solid or clearer when active. Similar to the dashboard controls icons, the behavior could be explained a couple of different ways.
The icon could be swapped with an altered duplicate of itself. This is the behavior of the dashboard control icons.
The opacity of the icon could be altered. If this is the case, it would appear the opacity is less than 100% when inactive, and changes to 100% when hovered. Viewing the source image of the icon reveals only one icon is used. Opacity is more than likely used to change the icon&#8217;s appearance.
Although this CSS style fixes one problem, it creates another. The icon appears the same while active or inactive: the icon is always at 100% opacity.
Next up: Quick fix extended, but duct tape doesn&#8217;t fix everything

So you want to learn CSS?

Camera icon class - .photo_reply
Background - body {background-color: black !important;}
Quick fix - .photo_reply {opacity: 1 !important; background-color: white !important;}

Upon examining the active/inactive behavior of the camera icon, the icon appears dimmed or faded when inactive, becoming solid or clearer when active. Similar to the dashboard controls icons, the behavior could be explained a couple of different ways.

The icon could be swapped with an altered duplicate of itself. This is the behavior of the dashboard control icons.

The opacity of the icon could be altered. If this is the case, it would appear the opacity is less than 100% when inactive, and changes to 100% when hovered. Viewing the source image of the icon reveals only one icon is used. Opacity is more than likely used to change the icon’s appearance.

Although this CSS style fixes one problem, it creates another. The icon appears the same while active or inactive: the icon is always at 100% opacity.

Next up: Quick fix extended, but duct tape doesn’t fix everything

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!