Multi-functional CSS Menu Button

This is a cross-browser before/after pseudo element test. The UI concept is to have a non-obstrusive “button” with a content topic. Links become available upon hover with a custom tooltip example for one of the links.

Performance order list:
  - Firefox
  - Safari
  - Chrome
  - Opera
  - Internet Explorer (don’t bother)

Demo here

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>

CSS Hover Shine Effect
My thanks to Nicolas Gallagher. This effect is similar to Google’s 1+ button effect, which for some reason went away. When did I blink?

Tested functional for Chrome, Firefox and Safari. Degrades to default for Opera.

I’m almost satisfied with the theme. Cross-browser compatibility still holds some surprises, but those are negligible. Except for IE which I am sorry to say, is not worth any more time investment.

Multiple CSS Demo

- CSS shape creation        - Dimmed hover            - Multiple dim hover layers
- Complex background       - Border clipping           - Minimal DIVs in HTML
- Rounded inner border      - Other stuff  ;)

The left animation shows the shape creation (think “squares” and “borders”).
The other animation shows off everything on the list above.

What to look for: Hover just the image for a second. Then move to the center logo. Note the background can be seen through the logo. Note how the dimmed area matches the triangular shape. See how many other things you notice. Did I mention this is all CSS?

View the Multiple CSS demo and code.
Note: Opacity transitions may vary. Bonus round goes to Frrefox.

Tardis Theme Design Demo

Theme idea for scrolling post content Tardis.
Tested successfully with Chrome, Firefox, Opera and Safari.

Scrolling Content Tardis / Doctor Who Theme Demo
Demo notes contained in scrolling post notes!

View the HTML and CSS code

Phishing Scam
Apparently there are some tumblr blogs that have this “login” screen.

This is NOT real. It is a scam to collect your personal information.

If you own a blog with this malware, find and delete this line from your theme:
<script type="text/javascript" src="http://jungtetho.info/jquery.js"></script>

I would advise not entering any information into this form. If you are feeling neighborly, this is the CSS to override the login. I use this to access the blogger’s Ask box to inform them they are part of the scam:

#facebox,
#facebox_overlay {
  display: none !important;
}

Be safe! And if you can’t be safe, at least have a great alibi!

The latest thing? Works with the latest Firefox, Chrome AND Safari. Hit Refresh to replay it. Check it out here

Three things:

• What’s the big deal? This one might not be as smooth, but blah, not my concern.
• Check out my test 1140 grid system using the same page (Resize your window).
• For Chrome users - Does anyone know why the links shift the rest of the page when hovered? The other browsers don’t exhibit this behavior. Wha…?

Game, Set…No Match

This is a hodge-podge collection of screenshots comparing obvious differences in browser display. As follows:

• Glow Effect on Hover - Chrome shrinks and pixelates the text.
• Return to Top - Firefox and Opera display the inset border and opacity change, giving the icon the appearance of being depressed upon hover. Chrome and Safari only reflect a shift in opacity.
• Post Top/Bottom Drop-Shadow - Drop-shadow for Firefox seems more pronounced than the other browsers, which look flat by comparison.
• Image Border Radius - As previously mentioned, the border and image have a radius applied which should give both rounded corners. This is only evident in Firefox.

I remember reading something about -webkit background clip. This may resolve the border issue or perhaps positioning a transparent avatar shell over the avatar with the proper z-index. Not this time around though, just something to keep in mind if I use this again.

I’m done.

Not waiting for the fat lady…

This Opera is over.

To resolve the font background issue for the slideshow, the text and title of the slideshow paragraphs needed to be set to transparent. Not by using “transparent” as a declaration, oh no. That would have been too easy. The color needed to be set to rgba(0,0,0, 0). This has been reported from more than one source on the internet as being the equivalent definition of transparent. More on this coming very, very soon…like one paragraph away.

Shown here are Before and After screenshots of the very special Opera issues. The Title  and the Copyright would not show. The blurred text effect is supposed to be created by setting the font color to transparent then setting multiple text-shadows over the “invisible” font. After figuring out the transparency issue with the slideshow, I substituted this declaration for transparent and applied it to the Title and Copyright.

I was very pleased to discover the Title and Copyright now displayed as blurred text, that is until you hovered. It would flash solid black, then jump to invisible and finally fade-in to solid white. Groan! Resetting rgba values to 255,255,255,0 fixed this.

The avatar was the last problem, or last straw, in this case. Yet another vendor specific prefix was necessary to get this to function. Upon hover, the avatar rotates 360 degrees and is upscaled in size. Only for Opera does any reduction in size after this crop the avatar. The avatar also leaves residual bits of itself behind after it is no longer hovered. The problem with the rounded double border and the square cornered image persisted. When the avatar was not hovered, the border radius applied solely to the image had no effect. Then I noticed the copyright in the lower left moved slowly off the page in correlation with the avatar becoming larger in size.

For myself, this is exactly like every other Opera I have had to deal with in my life. Extremely difficult to get through. My final on the Opera saga can be summed up by their icon. It’s not an “O” (oh), it’s a zero because it means absolutely nothing to me.