CSS Techniques, CSS Reference, CSS Tutorials and Web Development

Friday, January 20, 2012

Blogger Adjustments Using CSS

Another post working on Blogger software. I host my own images and have my own domain but my blog is on Blogger so any time I update the look and feel of the site, I have to work with their software. The placement of my post date could use some improvement. Here's how it looks now.

Blogger Avatar Sitting on Top of Sidebar

I was reading comments on the blog recently when I noticed the avatar images sitting on top of my left sidebar.

CSS3 3D Transform Example

Above you see an image of a 3D box made from a single div element, and rendered in Chrome using CSS3 3D Transforms. On one side of the box you see a small window with CSSBakery showing in it. In the live demo, that is actually an iframe that allows you to scroll and click around.

If you click on the image you'll go to the live demo, but at the moment 3D Transforms are only supported on Apple Safari and Google Chrome (and based on my tests, Chrome doesn't render it when running on Windows XP). If you don't have a Browser with 3D transform support then it'll just look like a lot of gibberish and that includes Firefox which is the browser that I use. If you are on IE, you need a prayer. To download Chrome for Windows, visit Google. Google Chrome with Windows 7 as your OS will display the example correctly.

King's Crown to be Made of Chrome?

Safari
Firefox
Chrome
IE

Browser Market Share
©2012 bar graphs by cssbakery.com

Could Google Chrome overtake Microsoft's Internet Explorer in the browser wars? That's what people are asking after StatCounter reported that Chrome has just bypassed Firefox in browser market share.

Microsoft Security Essentials

I had a Coast Guard instructor once, a gruff but lovable Captain Haddock type with a penchant for donuts, who used to tell us that anybody who gets on his boat has to wear a life vest at all times. On board, he kept three of anything that was important - 3 GPS'es, 3 batteries, 3 radios that I can remember. Inside a large, lake-like harbor or with a computer that rarely goes to unknown sites, life vests and anti-virus software start feeling bulky, obstructive and you start bending the golden rules.

Styling Blogger Differently for Single Post vs. Multiple Posts

If you are a Blogger user, you may find this useful. I had a situation where I wanted to style something differently for the individual post page vs. the main page where all the latest blog entries are displayed. Looking at the Blogger HTML markup, I found that the HTML is very similar between these two pages. So similar in fact that I could not write a CSS selector that would apply to one and not the other.

CSS Diagonal Menu with Sprites

Below I decided to do another text wrapping experiment - similar to the "stair steps" in the previous post - where I'll have the right hand side of the text wrap along an angled series of graphics. The graphics depict the various "points of sail" of a sailboat. In this post rather than using invisible "steps" to force the wrapping, I'm going to use a fake stair approach where I'll just insert <br>'s into the text to break lines at appropriate words to form the angled right hand side. While I'll do this by hand for this example, it wouldn't be too hard to write some server side code to insert the br's at appropriate places.

CSS Sprites

Sunday, December 18, 2011

Happy Holidays

Monday, December 12, 2011

The Stair Effect: CSS Curved Text Wrap Using a Mock Sliced Image

To view the slideshow which has the major steps of the tutorial, click here. So why are we going to pretend to divide up an image into smaller rectangles? Because I want to wrap text around an image following a curved path. Like many others have done before, including Eric Meyer in his blue book, you can also cut your image into real slices in Photoshop, which would simplify the CSS but it'd be labor intensive, and requires you to add img tags in the markup. I want to do the same using CSS (and a bit of markup) without actually editing the image.

Building Image Grids: Size and Crop an Image Using CSS

Sometimes you want to display an existing image in a different size and with a different crop, but without actually changing the image file itself. For example if you are displaying a lot of images that reside on Flickr, you could consider making copies of all the images and editing those copies (e.g. using Photoshop) to resize and crop. But that's a lot of work. Instead, we can resize and crop the original images directly in the Browser using CSS.