CSS Bakery

Setting Name Servers for Your Domains

2012-05-22T00:15:00.004-07:00

After you get a new domain name, you need to tell DNS how to resolve that name into an IP address for your Web server. DNS requests are initiated by the browser. Anytime you go to a website, the domain name must be mapped into an IP address.

The first step in setting up your domain is to map your domain name to your hosting provider's name servers. If you are using GoDaddy, here's the domain details page, where you'll find the "Nameservers" pulldown. Select "Set Nameservers".

This screenshot is specific to GoDaddy, but then it's a very popular domain registrar. If you use someone else they will have similar functionality.

Here I've set the names of three nameservers from my hosting provider:

The DNS (Domain Name Server) from my hosting provider which is Rackspace (previously Slicehost) will handle the DNS request and map it into an IP address of my server. I'll talk about the next step in the process - configuring your hosting provider's DNS records - later.

Introduction to Javascript

2012-05-07T15:18:00.006-07:00

Javascript is a client-side programming language that runs within the web browser providing access to all parts of a page including the markup, content, and CSS properties. If HTML is structure, CSS is style and presentation, Javascript is the functional arm of a page. Web browsers run Javascript based upon events. (note: for completeness, Javascript does run in other environments besides the web browser. For example, node.js uses Javascript on the server side).

From Javascript, you can also send data to and receive data from the server and use the data you receive to dynamically update part of the page. AJAX which is a technique for making pages more interactive - like when you click a button and it updates a small part of the page rather than doing a complete page reload - is built upon Javascript's capability to do this.

EVENTS AND EVENT ATTRIBUTES

A browser is a busy piece of software. It interfaces with a user via a mouse and keyboard, or touch interface (e.g. iPad) as well as the Internet and web servers. As it's interacting various events occur. The browsers allows your Javascript code to register event handlers that are called when specific events occur. So whenever an event occurs, the browser checks to see if there are event handler callbacks registered for that event. If so, it calls each of the handler for that event, passing in some information on the event context.

click - onclick
change - onchange
submit - onsubmit
load - onload
mouseover - onmouseover
mouseout - onmouseout
focus - onfocus
blur - onblur
select - onselect

dblclick - ondblclick
keydown - onkeydown
keyup - onkeyup
keypress - onkeypress
unload - onunload
mousedown - onmousedown
mousemove - onmousemove
mouseup - onmouseup
reset - onreset

JAVASCRIPT VARIABLES

Javascript has the following built-in datatypes:

numbers
strings
booleans

You don't declare the type. Javascript figures it out from what you assign to the variable.

var n=42;
var s='a string';
var b=true;

There is no distinction between floating point and integers, they are all just numbers:

n=42.23;

You can inspect the type of any variable using the built in 'typeof' operator:

typeof n => "number"
typeof s => "string"
typeof b => "boolean"

If you re-assign the variable with a different type of data, it's type changes:

b="some string"
typeof b will now return a "string"

If you haven't defined something, then it's type is: undefined.

typeof x will return "undefined"

JAVASCRIPT ARRAYS

You can define an array of data like this:

var a = [42, 23, 89];

Arrays indexes start at zero:

a[0] is 42

The data in an array doesn't have to all be the same type:

var b=[42, 'a string', false]

You can find out how many elements are in an array:

b.length => 3

You can also nest arrays:

var c=[42,'a string',[3,9,2],false]
c.length => 4
c[2] => [3,9,2]
c[2][1] => 9

There are a lot of built-in functions that can operate on arrays. We can look at those in a future post.

JAVASCRIPT OBJECTS

In addition to arrays, Javascript supports Objects, which you can think of as just a collection of data using name-value pairs. Here's an example:

var o = {
    'airline':'United',
    'flight':'1777',
    'airport': 'LAX'
}

o.airline ==> United

Objects can also nest:

var o = {
    'airline':'United',
    'flight':{
        'from':'LAX',
        'to':'ORD',
        'time:'9am'
    }
}

o.flight.from => 'LAX'

So here 'flight' is an object that is nested inside another object, o. When you say o.flight, you are accessing the 'flight' object inside of o. The second dot operator then accesses the 'from' property of the flight object.

The dot operator works a lot like the dot operator in C structs, or C++ classes. It accesses a member of the object data structure. You can actually write the example above differently using square brackets. For example:

o['flight']['from'] => LAX

Using this uncommon syntax, it looks like an associative array. You can run this short example in the Firebug console to see the results yourself:

console.log(o['flight']['from']);
console.log(o.flight.from);

The syntax above that we used to define the variable o is called an object literal in Javascript. There are other ways to create an object but using the curly braces surrounding name-value pairs is the most common and is known as the object literal syntax. Because you are literally saying this is what the object contains. In other words, spelling it out...

FIREBUG JAVASCRIPT CONSOLE

If you use Firefox, chances are you are familiar with its built-in Firebug tool that comes in very handy debugging CSS. Same tool also provides a console for Javascript in which you can run your JS code. Let's try our example by adding member functions to the o object and then run it in the Firebug Console. I pressed on the bottom "Run" button after I pasted my JS into the right pane(red). The results showed up in the left pane(green).

var o = {
'airline':'United',
'flight':{
'from':'ORD',
'to':'CAS',
'time':'6am',
//Return the object's "time" object (just a string in this case)
getTime: function() { return this.time; }
},
// Return the object's "flight" object
getFlight: function() { return this.flight; }
}
console.log(o['flight']['to']);
console.log(o.flight.to);
console.log(o.getFlight().getTime());

When you run this code, you will get:
CAS
CAS
6am

CHAINING

In the above function calls the parser goes left to right, first it sees o.getFlight(), and it calls this function. It then takes the return value from getFlight() and calls getTime() on it. It's as if you did this instead:

var f=o.getFlight();
f.getTime();

The chaining syntax lets you shorten this to just:

o.getFlight().getTime();

Thus eliminating the need for you to use an extra variable to temporarily hold the return value from getFlight().

Objects have some other important features which we will look at in a future post.

CHAIN, CHAIN, CHAIN.... CHAIN OF FOOLS

If you get lost chaining your JS or are unlucky in love, you know which song to sing.

First I'm going to write a simple Javascript object:

var myJSobject = {
// two name-value pairs that are integers
// comma endings instead of semicolons because we are separating the items in
// in a list of properties of an object literal
a: 23,
b: 45,

// two name-value pairs where the returning value is a function
showa: function() {
console.log(this.a);
return this;
},

showb: function() {
console.log(this.b);
// returning an object so it can be used for the next
// call in the chain
return this;
}
};

Chaining Examples:

myJSobject.showa() .... will output the first 24 below
console.log(myJSobject.showa().a) .... will output 24 and 23
console.log("--------------")
console.log(myJSobject.showa().b) .... will output 24, 45
console.log(myJSobject.showa().showb()) ... 24, 45, and the whole object
console.log("--------------")

// a long chain:
myJSobject.showa().showb().showa().b will output 24, 45, 24.

Actual Console Output:

24
24
23
--------------
24
45
24
45
Object { a=23, b=45, showa=function(), more...}

will return a reference to the whole object which is the reason the chaining works because when you return a reference to the whole object you can now call another function on that object or the way I would say is another member function like we say in C++. Another word for it is a method.

--------------
24
45
24
45

The last 45 is an oddball which I believe the console is outputting since that's the last value seen in the code that was run in the console.

THE MEANING OF JAVASCRIPT this

Whenever a function is called, it is passed a hidden first parameter called 'this'. So when you see a function like this one:
function add3(x,y,z) {
return x+y+z;
}
You can think of it as being defined like this:
function myfunc(this,x,y,z) { // you would never write it this way.
return x+y+z;
}
Inside the function you can use the 'this' parameter just like any other parameter.
When you call a "stand alone" function, the this parameter will be a reference to the global object (window). So for the above function call, the 'this' parameter will be equal to window.

If the function is instead part of an object, then the 'this' parameter will be a reference to the current object instance. This is very much like the 'this' parameter passed to member functions of objects in C++, or PHP. In all of these languages, 'this' refers to the current instance of the object that the function is being run on.

this IN PHP

In a PHP object, 'this' is written as '$this', and the object must be referenced via a pointer operator, like this:

class SomePHPclass {
  $message = "Hello world";
  function sayMessage() {
    echo $this->message;
  }
}
$phpObj = new SomePHPclass;
$phpObj->sayMessage();

Here's the equivalent example in Javascript:

var SomeJSobject  = {
  message: "Hello world",
  sayMessage: function() {  
    console.log(this.message);
  } 
}
SomeJSobject.sayMessage();
// Notice we don't need a new operator to create the object, since that was done 
// via the object literal notation.

this IN C++

In C++ it would look something like this:

class SomeCPPclass {
public:
    string message;
    SomeCPPclass() { this->message = "Hello world"; }
    void sayMessage() {
      cout << this->message << "\n";
    }
}

SomeCPPclass o;
o.sayMessage();
// or:
SomeCPPclass *optr;
optr = new SomeCPPclass;
optr->sayMessage();

In this C++ example, the compiler sets the 'this' pointer so that it points at the object instance in memory. That way, when a member function references this->message, it is going to memory where the object instance resides, and offsetting to the 'message' field.

In Javascript, there are no pointers, but there are references. When you call a function and pass an object, it's passed as a reference. Like a pointer, a reference knows the location in memory where the object resides and allows you to update that object directly. The difference is that the actual underlying pointer that a reference uses is hidden from you so you can't do things like pointer arithmetic. Syntactically you use the dot operator (.) with the Javascript reference, instead of the right arrow operator (->) in C++. Those differences aside, it's basically the same idea.

THE MEANING OF THE TRIPLE EQUAL SIGN

Javascript has both double equal and triple equal comparison operators. The difference is that double equals will try to perform type conversion to the same type and then compare values. Triple equal does not do type conversion, and if the types are different it will say they are not equal. Here are some examples:
3=="3" // true: because "3" is converted to a number before comparison.
3==="3" // false: because one is a number and the other is a string.

JAVASCRIPT GLOBAL OBJECT

Javascript has what's called the "global object". In Browsers, this global object is called "window". Whenever you create a global variable, it gets added to the global object. Here's an example:

//When a variable is declared outside of a function, it's always global
var x=45;
>x
45

>window.x
45

So the global variable 'x' can be referenced by just it's name, or via the global object. You can use either to change it:
>x=x+1
>x
46

>window.x=window.x+1
>x
47

Having this global object is considered a weakness of Javascript because your page could be mixing in Javascript code from various sources and they could collide in their use of global variables.

GLOBAL VS LOCAL SCOPE

You should always declare variables before using them with the 'var' keyword:
var x;
x=10;

Javascript does allow you to implicitly declare a variable by just using it (skipping 'var'):
y=11;

But it's not a good habit.

The problem occurs when you declare variables inside a function. If you do it the right way and use 'var', then the variable is made local to the function, not global. But if you skip the 'var', then any variable declared inside the function becomes global. This is bad. Example:

function f() {
var a=5;
b=6;
}

// call the function:
f()

console.log(a)
undefined
console.log(b)
6
console.log(window.b)
6

JAVASCRIPT FUNCTIONS

In Javascript, functions can be defined like this:

function addThreeNumbers(a,b,c) {
  return a+b+c;
}

But they can also be defined like this:

var addThreeNumbers = function(a,b,c) {
  return a+b+c;
}

In this second case, the function has been assigned to a variable.
You can then pass that variable as an argument to another function:

function callWith123(f) {
  return f(1,2,3);
}

var total = callWith123(addThreeNumbers);

The result will be that total is set to 6.
Here's another way to do this:

var total2 = callWith123( function(a,b,c) { return a+b+c; } );

Here we didn't even bother to assign the function to a variable, we just passed it as a parameter. You will see this pattern a lot when using jQuery.

CALL BY VALUE, CALL BY REFERENCE

In Javascript, if you pass a built-in fundamental type (string, number, boolean) as an argument to a function, it is a call by value. That means the function gets it's own local variable representing the parameter and the value is copied in from the invocation. Here's an example:

function dosomething(a) {
  a=10; 
  alert(a);  // a is 10 (but a is local)
}

a=4;
dosomething(a);
alert(a); // a is still 4

If what you are passing in is an Object or Array, it's a different story. Now the call is by reference. (note for completeness: an Array in Javascript is really a type of object). Here's an example:

function dosomething(a) {
  a[0] = 10;
  alert(a[0]);  // a[0] is 10
}

var a=[4,3,2];
dosomething(a);
alert(a[0]); // a[0] is 10 (it was changed by the function call)

// Lets try with an object literal:

function dosomething(o) {
  o.a = 10;
  alert(o.a);  // o.a is 10
}

var o = { a: 4, b: 3, c: 2 };
dosomething(o);
alert(o.a);  // o.a is 10 (it was changed by the function call)

Fonts for the Web: Typekit by Adobe

2012-04-21T10:15:00.000-07:00

Typekit Adobe provides online fonts for websites. You can sign up for different plans here. Here are the steps for using the service:

1. Go to www.typekit.com and Sign In (upper right).
2. In the pulldown at the upper right, select the site to work with.
3. Click "Launch Kit Editor"
4. Find a font and click "Add to Kit"
5. Now in the typekitEditor, add a selector for the new font and click Add.
6. There may be multiple weights and styles available, if so choose the ones you want. Note that the more you add, the more your kit download will grow in size.
7. In your markup, use the selectors that you added for the font.

Also: If you haven't already embedded the kit code in the section of your page that will be using the fonts, then in the typekitEditor, click "Embed Code" (at upper right). Cut and paste the two script sections into your document head.

Using Notepad++ to Edit Files on the Server over SFTP

2012-04-18T18:57:00.005-07:00

For quick tasks and transfers, FileZilla, an SFTP client, is great but manually uploading local files to the server via standalone FTP/SFTP clients can waste time if there's a lot of back and forth. By configuring the built-in SFTP client within Notepad++, you can edit files directly from the server, validate from the browser - Tools option in Firefox Web Developer Add-on gives you direct access to W3C HTML and CSS Validators - and be finished in a flash.

Notepad++, written in C++, is a source code editor, not a word processor.

SETTING IT UP

In Notepad++ go to the Plugins menu and select NppFTP->Show NppFTP Window.
Click on the "gear" icon (6th icon from the left).
Choose "Profile Settings"
Click the "Add new" button.
Enter the name of the new profile and click OK.
Enter the hostname which is the full URL.
For connection type choose SFTP.
Leave port number at 22.
Enter username and password.
For Initial remote directory, enter: public_html
Click "Close"

CONNECTING

Click the connection list icon is NppFTP. and choose the server you want to connect to. The first time you connect to a given server you will be asked if you trust the host key. Say yes. You shouldn't be asked again after the first time. Now you should see the directory structure on the server. Choose a file to edit and double click it. Make your edits, and Save the file. Notepad++ will send the changed file up to the server.

Changing File Associations in Windows 7

2012-04-17T13:04:00.014-07:00

Microsoft Word's been driving me crazy, popping up every time I click on a text file. Thinking I’ll be on WordPad, I am taken to the trial version of Microsoft Word instead, which asks me for a key, and registration that I do not have. You are forced to click through a series of buttons before Microsoft lets you go.

Here are the instructions for changing file associations in Windows 7.

From the Start menu:

Choose “Default Programs”
Choose “Associate a file type or protocol with a program”
Wait while it loads...
Double Click on the extension (e.g. .doc, .rtf).
Double Click on program to use: e.g. Wordpad.
If you don’t see the program you want, click the little pulldown icon on the “Other Programs” line, then choose.

jQuery and jQuery UI

2012-03-29T14:20:00.018-07:00

jQuery is a Javascript library that allows you to easily manipulate - compared to writing your own raw Javascript - your HTML document, handle events such as mouse clicks and perform AJAX calls to a server. It hides many cross-browser inconsistencies from you. It's also easy to extend by writing plug-ins.

jQuery UI provides reusable user interface components including things like datepicker, tabbed interface, accordion and dialog boxes. It also makes it easy to create drag and drop functionality. You can customize the appearance of the components - called widgets - using a number of predefined themes or you can roll your own.

When you download these libraries, you have the option of using a minified, smaller version or the more readable version that includes all the whitespace formatting and commentary.

jQuery Library, currently at 1.7.2
jQuery UI, currently at 1.8.18
3 Reasons for letting Google host your jQuery

A Simple Plan

2012-03-17T21:02:00.062-07:00

"An attempt to rob a jewelry store failed dramatically when the shop owner shot one of the intruders. The men fled the store and jumped into a Ford minivan, where a waiting driver took them around the corner and they all switched to a Chevy Tahoe. The nervous robbers crashed their SUV into a parked car less than half a mile from the store, sending the four occupants running in different directions. All were quickly apprehended by police. The four uninjured suspects ages ranging from 18 to 22 who did not realize that the police station was only four blocks away from the jewelry store, were booked into the local jail." -Yahoo News

The styles for the quote:

.justforfun_div {
padding-right:51px;
background: url(images/smiley2.png) 97% 12% no-repeat;
background-color: #cdccc7;
border-radius:15px;
}

.justforfun_p {
background-color: #eeeeee;
padding:25px 30px;
font-family: tahoma, sans-serif;
}

The Markup is a paragraph enveloped in a div. We need the div to display the bitmap on the right padding. I did not start out with a bitmap. For me, a plain blue bar was more than enough but then I wanted to show how you would go about placing an image on the blue bar.

Initially I had drawn the bar via a simple border statement. Your first thought may be to place the image on that border but borders in CSS do not allow us to write over them. That's when the extra div for the smiling face came in.

Without any images, this would be even simpler with only a p tag, a right border and a right padding.

<div class="justforfun_div">
<p class="justforfun_p">
"An attempt to rob a  jewelry store .... only four blocks away from the jewelry store, were booked into the local jail." <i>-Yahoo News</i>
</p>
</div>

MULTIPLE BACKGROUNDS OF CSS 3

How about outputting two bitmaps one on each side? The styling for the div changes and keep in mind this will only work in a browser that permits the multiple backgrounds of CSS 3.0 in which you list the backgrounds back to back, separating them with a comma. The left padding will give us the blue strip that will contain the new image. I'll just be using the same bitmap but you can use something new.

.justforfun_div {
   background: url(images/smiley2.png) 97% 12% no-repeat,url(images/smiley2.png) 3% 90% no-repeat; 
   background-color: #aecae6;
   padding-right: 51px; 
   padding-left: 51px;  
   border-radius:15px;
   }

Testing in IE7/IE8 using IE Compatibility Mode

2012-03-04T11:01:00.006-08:00

Microsoft has never supported installing multiple versions of IE on a single PC. (They do provide some virtual machine images for running older version of IE, but that's not the same as having multiple IE versions on the same Windows OS instance.) To run virtual machines, you have to own Windows 7 Pro or Ultimate, it will not work with Windows 7 Home Premium.

But there is still something that everyone can do: You can tell IE to go into "compatibility mode" where it behaves like an older version of IE. For example, if you are running IE8 or IE9, hit the F12 key to bring up Developer Tools. Now go to the "Browser Mode" pull down menu, and select IE 7. Your page will be re-rendered in IE7 mode.

A Computer Holga? $35 Raspberry Pi

2012-03-01T15:35:00.006-08:00

Tiny but powerful $35 Raspberry Pi computer causes big stir on launch day. Image Credit: Schematic by Raspberry Pi

Behind the Scenes When You Click a Search Result

2012-02-27T10:37:00.005-08:00

Although not visible to the user, Google takes you on a quick detour every time you click on one of your search results. So Google knows not only what you searched on, but where you went with that search. That would be Ok if they did not store these searches that are associated with you indefinitely in a database on their servers which was the topic of my previous post.

Take for example the following link that is supposed to take me to a newspaper article. The Google search results page certainly looks as if I will directly go to the newspaper's site but that's not what really happens behind the scenes. While the yellow portion of the link is where I chose to go - my actual and eventual destination - the unhighligted portion has been inserted into the link string by Google without my knowledge.

So before I view the newspaper article, I will go through Google where they will collect more information on me although this portion of my journey will be invisible to me.

If you want to see how this works, go to google.com and search on something. You'll get the usual search results page that all of us are familiar with. Right click on one of the links and choose "Copy Link Location". You'll find out that the link is reconstructed such as the one I have above and looks different than what Google's showing you on their search results page.

Privacy on the Internet

Google Knows Too Much About You

2012-02-11T21:07:00.001-08:00

In her article titled, Google Knows Too Much About You, Ghitis says, "Google has every search you ever made and every e-mail you ever sent or received on Gmail. If you ever used Google while logged in to your account to search for a person, a symptom, a medical side effect, a political idea; all of this is on Google's servers. You've done it, said it, clicked it, searched it, Googled it. You can never undo it or unclick it. It stays there forever."

The tracking is not a revelation to anyone but storing the compiled information indefinitely sounds disturbing. The right to be forgotten initiative may be the way to protect users by providing them with the option to purge search engine data.

Writing a Generic CSS Blockquote Class

2012-01-28T09:24:00.005-08:00

People do odd things in an emergency and we all have stories of ludicrous situations in an emergency which we laugh afterwards, if we are still alive.
My favorite one is of the third mate of a merchant ship who, after a tremendous explosion and thinking his ship had been torpedoed, leapt naked from his bunk and jammed both his legs down one leg of his shorts, so immobilizing himself that he had to crawl out on deck on his hands and knees. Fortunately the explosion hadn't come from a torpedo but from a closely dropped depth charge.

D. Robertson, Survive the Savage Sea

I wanted to post a funny paragraph from a paperback I've been reading. Since we had covered CSS blockquotes before, I went back to find out how to use that class with my quote. As it is, every blockquote gets an airplane but I had a boat to display. I must have assumed that the user would rewrite the background statements to fulfill their needs. This is a very easy change. But sometimes people just want to use things as is and have it work for them. So now, I am going to rewrite a more generic blockquote class without a background image - you can always add one if you desire using this post as a guide.

THE CSS

/* blockquote generic*/
div.post-body blockquote.gen img  { 
   float: left;  
   margin-right: 25px; 
}
 
div.post-body blockquote.gen span { 
   float: right; 
   margin-top: 5px;
   font-size: 13px;
   font-weight: normal;
   text-transform: uppercase;
   clear: both;
}

blockquote.gen p.first:before,  
blockquote.gen p.last:after {
   font-weight: bold;
   font-size: 4em;
   color: #909090;
}

/*MS repositioning upper quote*/
blockquote.gen p.first:before {
   /*push the upper quote down, line up with the text*/
   position: relative;
   top: 0.4em;
   /*to push the text away from the quote symbol*/
   padding-right: 0.2em;
 }

.post blockquote.gen {
   width: 490px;
   margin: 0px;
   padding: 18px 30px 30px;

   background-color: #d9e8fa;
   border-top: 5px solid #b29b81;
   border-bottom: 5px solid #b29b81;
   quotes: "\201C" "\201D";

   font-family: Calibri, sans-serif;
   font-size: 15px;
   color: #363636;
 }

 blockquote.gen p.first:before { content: open-quote; }
 blockquote.gen p.last:after   { 
    content: close-quote; 
    float: right; 
    padding-top:20px;
 }

 .post blockquote.gen p {
   margin: 0 0 0.75em;
 }          
 /* end of blockquotes */

THE HTML

<blockquote class="gen">
<img src="images/tallship2.png" alt="" />
<p class="first">
People do odd things...... alive. </p>
<p class="last">My favorite one is of the ...... charge.</p>

<span>D. Robertson, <a href="#">Surviving the Savage Sea</a></span>
</blockquote>

RELATIVE POSITIONING TO NUDGE THE QUOTE DOWN

Given the 4em font size, the first quote comes out rather large, producing a large line height to go with it. Since the text within the quote is in a much smaller font, we end up with a pretty large offset between the quote and the first letter of the text. The upper quote still looks decent but if you want to make it perfect, we can fix it using relative positioning.

HOW TO USE THE CLASS

Your markup will be very similar to the above. If you wish, you can change the background color from blue to a color of your choosing by rewriting the background color statement in the CSS and of course find a substitute for the image in the markup. Remember the filename and path "images/tallship2.png" are generic, you need to write your own URL.

The ship graphic used in the blockquote demo is by http://cemagraphics.deviantart.com

Blogger Adjustments Using CSS

2012-01-20T23:28:00.000-08:00

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. I highlighted the gap between the date and my site logo in purple. Either the logo or the date needs to move. I will pull up the date for the first post, which means I will initialize the top margin for h2 to zero. One caveat: I wouldn't want the new change to effect every post since I need that top margin for separating successive posts. CSS first-child property will allow us to write a style that will be exclusively for the first post only.

div.blog-posts h2:first-child { margin-top: 0px; }

Zeroing the top margin of the post aligns us better but now I feel we are looking too crowded. See what you think. I think we need some breathing room.

Let's try lining up the blue block lettered CSS in my logo, with my main (the second column) and the right sidebar (the third column). Here's what we are going for. This will require rewriting our first style because we want to push it down and also push down the right sidebar:

div.blog-posts h2:first-child { margin-top: 50px; }
#sidebar-wrapper { padding-top: 63px; }

I embedded these two statements into my local file but best way to do this is to keep an external style sheet and link that file into your Blogger style/markup template which is accessible via DESIGN/EDIT HTML.

Blogger Avatar Sitting on Top of Sidebar

2012-01-17T18:00:00.000-08:00

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

If I pushed the #comments div to the right, the avatar would move along with it. This would change my overall margins for the comment section which bothers the symmetrical strain in me but without a clear and apparent place for the avatar to go, was the easiest, fastest way to fix the problem. I decided I could always revisit the styling of comments later.

div#main-wrapper #comments {
margin-left: 20px;
}

does the trick.

We are not writing over the left sidebar anymore which is good. We could push the avatar down some to align it with the user name better. Based on whether it's next to a user name that starts with lowercase or uppercase letters, the alignment looks different so I went for the middle of the road which looks pretty decent.

#comments-block .avatar-image-container {
padding-top: 5px;
}

Blogger users to make these changes, go to DESIGN > EDIT HTML and add the new CSS to your styles.

CSS3 3D Transform Example

2012-01-15T20:25:00.001-08:00

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 more than a prayer. To download Chrome for Windows, visit Google. Google Chrome with Windows 7 as your OS will display the example correctly.

The markup for this is really simple:

<div id="bar1" class="bar">  
 <iframe src="http://cssbakery.com"></iframe>
</div>

The CSS is a bit longer, but still not too bad. The main things we are doing are:

Setting up a common perspective value and origin in a parent element (body). These values are then used by all 3D transforms that are done in all child elements.
We set the transform style to: preserve-3d
We create a couple of pseudo elements to go along with our content div. These are the ::before and ::after pseudo elements, which we'll use for rendering the right side and top of the 3d bar.
We use the transform property on each of the 3 elements to rotate and translate it in space to form the image of a 3d box.
We add some styles for the iframe I mentioned earlier, including some positioning and a scaling factor to make it fit.

Here's the CSS:

body {
 -webkit-perspective: 1000px;
 -webkit-perspective-origin: 200px -150px;
}

#bar1 {
 color: white;
 font-size: 50px;
 text-align: center;
 background: navy;
 top: 300px;
 left: 400px; 
 -webkit-transform-style: preserve-3d;
 -webkit-transform: translateX(-20%) rotateY(-45deg);
}

.bar, .bar::before, .bar::after {
 padding: 0;
 margin: 0;
 position: absolute;
 left: 100px;
 width: 200px;
 height: 260px; 
 display: block;
 position: absolute;
 font-size: 25px;
 line-height: 35px;
}

.bar::before {
 
 content: 'Before';
 top: -100px;
 height: 200px;
 background-color: rgba(0, 0, 255, .4);
 -webkit-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
 -moz-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
 -o-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
}


.bar::after {
 content: 'After';
 top: 0px;
 background-color: rgba(0, 255, 0, .4);
 -webkit-transform: rotateY(90deg) translateX(50%);
 -moz-transform: rotateY(90deg) translateX(50%);
 -o-transform: rotateY(90deg) translateX(50%);
}

iframe {
    position: absolute;
    left: -50px;
    top: -96px;
    height: 438px;
    -webkit-transform: scale(.48);
}

King's Crown to be Made of Chrome?

2012-01-04T23:00:00.000-08:00

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. Firefox and Chrome, long favored by developers, have steadily gone up in number of downloads over the years. Internet Explorer is still the leader but everybody, including Microsoft, is happy IE6 share is down to less than 1%. Not unlike those scenes in the movies when no matter what you do, you just can't kill the scary beast, there's a reason why IE6 has staying power.

Some corporations and government entities are still using IE6 because they have a suite of applications developed and tested on that particular browser. Moving to a new browser means they have to re-test all those applications and fix the ones that are broken, all of which costs them money. Of course, they should realize that there is also a large cost for staying on IE6, including extra effort for new applications and the potential cost of security breaches caused by the use of a 10 year old browser.

Here's a set of earlier CSSBakery posts on Google Chrome. The bar graph with the emblem was made using CSS classes that we developed here. For the markup and watermark css, look here.

Google Chrome is written in C++. I'm including a sample of the source code.

Microsoft Security Essentials

2012-01-01T10:58:00.000-08:00

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.

When another computer detected problems with some of my files, I scanned the suspect laptop with McAfee and Avast which revealed surprises in the form of Siveras-B. Feeling invincible, I hadn't run any anti-virus software on it for awhile (a sheepish grin). Even though I removed the threats identified by Avast and McAfee, MSE full scan, a free downloadable from Microsoft, which took six hours to run, came up with more. Microsoft Security Essentials Quick scan had declared it clean. The lesson to learn from my example: Run regular scans on all of your computers and any medium that comes into contact with them. An SD card that was infected is how I became aware of my situation.

If you find yourself in a similar or worse predicament and you want to back up your data before you reformat a disk, remember that even when your operating system's gone belly up, you can always boot using Ubuntu Linux on a portable medium to access your files. After saving important data, reformat the disk and reload the OS for a fresh start.

Styling Blogger Differently for Single Post vs. Multiple Posts

2011-12-31T15:02:00.000-08:00

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.

To solve this, I added a div that will have a different class name when viewing a single post vs. the main list of recent posts. To do this, I had to edit my Blogger template and 'expand widget templates'. I found the place I wanted to add the new div and entered it as follows

<div expr:class='data:blog.pageType''>
    <!-- the div's I want to enclose for styling -->
  </div>

Note the 'expression' used within the div tag ("expr:class='data:blog.pageType'"). This is a Blogger scripting expression that will be evaluated at runtime. Blogger will evaluate it and render something different based on the value of it's blog.pageType internal variable. For a single post page, this expression will evalute to "class='item'", whereas on a mult-post home page it will evaluate to "class='index'".

So, after doing this, the single post view will have the following div:

<div class='item'>

and the main list of posts will have:

<div class='index'>

Now I can write CSS rules that target one or the other using the different class names.

.blog-pager .item {
/* do something different on the single post page */
}

.blog-pager .index {
/* do something else for the main page */
}

CSS Diagonal Menu with Sprites

2011-12-26T12:54:00.001-08:00

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.

That takes care of the text, but we also have to position the circles along a diagonal line. We'll do this with a combination of relative and absolute positioning. We'll also add a hover style to pop up a box of text explaining the point of sail you are currently hovering over.

In the outer div - POSwrap - we set the position to relative to establish a positioning context. Below, we set an absolute position for the ul. Since the ul is a descendant of POSwrap it will use the positioning context we established above.

By absolutely positioning the entire ul we can move around all the point of sail graphics as a single unit (that is, all the li's within the ul will move together as we move the ul). Note that we will need to adjust the ul's position to match the amount of text in the paragraphs above the graphics.

Within the ul, we again use absolute positioning for each of the child li's. This positioning establishes the angled line of circular graphics.

In the working example below, hover over the portholes to see the text overlayed on a semi-transparent background. We discussed CSS transparency in other posts. The CSS and markup are fully listed, I explain the sprites briefly. If you search the blog, you'll find many other posts where I talk about sprites. I finish off with Photoshop circles. Enjoy and watch where you are going! :-)

Points of Sail

A sailboat cannot sail directly into the eye of the wind, but can sail to within
45 degrees of the wind or closer when close-hauled. If you head into the
wind, your sails will start luffing and you will lose power and the
ability to steer. Describing a sailboat's course in relation
to the wind direction, the points of sale on the right
show a starboard tack and assume that the
wind is blowing from the top of your
screen. Boat drawings and info
from Chapman Piloting
and Seamanship,
65th edition
by E. Maloney.

Run
When the wind is almost directly aft, the boat is said to be "running". If the wind is light, it'll feel like you are not moving but just look behind the boat and you'll see a rippling line of water. In stronger winds, gybing is a danger with this sail. Aerodynamically simpler but can be the most dangerous point of sail.
Close-Hauled
When there's the smallest angle between wind direction and heading, the boat is said to be "close-hauled" meaning that it sails are hauled in close to the hull. My favorite sail.
Close Reach
When the angle between heading and wind direction is increased, the boat begins to "close reach". A close reach is somewhat toward the wind, and broad reach is a little bit away from the wind. Fast point of sale for most boats. The sails are eased about halfway out.
Beam Reach
The boat is "beam reaching" when the wind is on the beam at a right angle to the boat.
Broad Reach
Further increases to the angle between heading and wind direction (more than 90 degrees) bring the boat to a "broad reach"

THE CSS AND THE MARKUP

/* pos */
ul#pointsofsail { position: absolute;
padding: 0; margin: 0;
list-style-type: none;

/*these 2 points will position it from title of blog post*/
/*and the title of pointofsale element*/
top: 105px; /*go below positioning context s 0 0 - go below*/
left: -125px; /*go left of positioning context s 0 0 - go left*/
}

ul#pointsofsail li {
background-image: url("http://pics.cssbakery.com/pics/pointsofsail.png");
background-repeat: none;
height: 102px;
width: 102px;
position: absolute;
}

ul#pointsofsail li span {
font: 13px Arial, Helvetica, sans-serif;
line-height: 16px;
color: #494949;
width: 200px;
background: #fcf6e6;
padding: 20px;

border: 3px solid #616161;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

opacity: .90;
filter: alpha(opacity=90);

display: none;
position: absolute;
top: 120px;
/*lines up with my blogger text but 8px works by shifting
the hover window a little to the right
*/
left: 8px;
text-align: justify;
}

/*the span is always the first child of the li in this
markup. We are really trying to get to the first
list item in the ul so the first-child goes to the li
element
I want the first popup window to be placed at 0 left and
not 8px like the rest of them
*/
#POSwrap ul#pointsofsail li:first-child span { left: 0; }

ul#pointsofsail li:hover span {
display: block;
}

#closehauled {
background-position: 0 0;
height: 102px;
width: 102px;
left: 571px;
top: 9px;
}
#closehauled:hover {
background-position: 0 -102px;
}

#closereach {
background-position: -102px 0;
left: 460px;
top: 72px;
}
#closereach:hover {
background-position: -102px -102px;
}

#beamreach {
background-position: -204px 0;
left: 349px;
top: 138px;
}
#beamreach:hover {
background-position: -204px -102px;
}

#broadreach {
background-position: -306px 0;
background-position: -307px -2px;
left: 235px;
top: 202px;
}
#broadreach:hover {
background-position: -307px -104px;
}

#run {
background-position: -408px 0;
background-position: -409px -2px;
left: 125px;
top: 266px;
}
#run:hover {
background-position: -409px -104px;
}

div.post-body ul#pointsofsail li span h2 {
font-size: 15px;
line-height: 6px;
font-weight: bold;
padding: 0;
margin: 5px 0 20px 0;

/*to undo the effects of cascading*/
text-transform: none;
background: none;
font-family : Arial,Helvetica,sans-serif;
font-style : normal;
letter-spacing : normal;
line-height : 6px;
}

/*different colors*/
ul#pointsofsail li#closehauled span h2 {
color: #6a2df7;
}

ul#pointsofsail li#closereach span h2 {
color: #61a1e2;
}

ul#pointsofsail li#beamreach span h2 {
color: #23689c;
}

ul#pointsofsail li#broadreach span h2 {
color: #06c2d3;
}

ul#pointsofsail li#run span h2 {
color: #de0c1b;
}

div.post-body div#POSwrap {
width: 550px;
margin: 0;
padding: 0 0 90px;
font-family: "Helvetica Neue Medium",Helvetica,"Helvetica Neue",Arial,sans-serif;
position: relative;
}

div.post-body div#POSwrap h1 {
background: url(http://pics.cssbakery.com/pics/h2transparent.png) no-repeat;
width: 244px;
height: 56px;
text-indent: -9999px;
margin-top: 20px;
}
/*end of pos*/

<div id="POSwrap">
<h1>
Points of Sail</h1>
<p>
A sailboat cannot sail directly into the eye of the wind, but can sail to within 
45 degrees of the wind or closer when close-hauled. If you head into the
wind, your sails will start luffing and you will lose power and the
ability to steer.  Describing a sailboat's course in relation
to the wind direction, the points of sale on the right
show a starboard tack and assume that the
wind is blowing from the top of your 
screen. Boat drawings and info 
from Chapman Piloting 
and Seamanship, 
65th edition 
by <em>E. Maloney</em>.
</p>

<ul id="pointsofsail">
<li id="run"><span><h2>
Run</h2>
When the wind is almost directly aft, the boat is said to be "running".  If the wind is light, it'll feel like you are not moving but just look behind the boat and you'll see a rippling line of water.  In stronger winds, gybing is a danger with this sail.  Aerodynamically simpler but can be the most dangerous point of sail.</span></li>
<li id="closehauled"><span><h2>
Close-Hauled</h2>
When there's the smallest angle between wind direction and heading, the boat is said to be "close-hauled" meaning that it sails are hauled in close to the hull.   My favorite sail :)</span></li>
<li id="closereach"><span><h2>
Close Reach</h2>
When the angle between heading and wind direction is increased, the boat begins to "close reach".  A close reach is somewhat toward the wind, and broad reach is a little bit away from the wind. Fast point of sale for most boats.  The sails are eased about halfway out.</span> </li>
<li id="beamreach"><span><h2>
Beam Reach</h2>
The boat is "beam reaching" when the wind is on the beam at a right angle to the boat.  </span>
</li>
<li id="broadreach"><span><h2>
Broad Reach</h2>
Further increases to the angle between heading and wind direction (more than 90 degrees) bring the boat to a "broad reach"</span></li>
</ul>
</div>

CSS SPRITES

The same rules that set the absolute positions of the graphics, also implements the CSS sprite technique by setting the background position attribute. An additional hover style makes the sprite dynamic by changing the background offset when you hover over the graphic. As an added touch, hovering over a graphic also displays the block of text contained in the corresponding li's span element (see the li:hover span" rule).

Finally, for each of these blocks of text, we set the color of the heading to match the border color of the circular graphic.

The sprite file that I'm using has the the active (when an image is pressed) and the inactive state (the grey versions) of each bitmap. For detailed discussion of CSS Sprites, see these links.

HOLLOW PHOTOSHOP CIRCLES

Here is a video briefly describing the steps involved in drawing consistent see through circles in Adobe Photoshop. You will learn how to use the Ellipse tool to make perfect circles, Stroke, Blending Options Default, and Fill Opacity for vector shapes:

CSS Sprites

2011-12-26T12:46:00.000-08:00

CSS Sprites

Happy Holidays

2011-12-18T08:39:00.000-08:00

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

2011-12-12T20:42:00.002-08:00

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.

Honestly, CSS was not what I had in mind when I started thinking about wrapping text around a PNG file which contained an unevenly shaped image. Using Javascript, you can probably check for blank pixels to determine the real contour of an image and then build a "staircase" based on that. That would require a bit of programming and writing of some image processing algorithms.

Being a CSS-centric blog, I want to share with you a CSS technique that approximates the same thing without any traditional programming. If you have a good grasp of CSS fundamentals and some patience, you can curve text around an image using only CSS and HTML. The types of topics that we'll cover during this exercise are Negative Margins, Relative and Absolute Positioning, The Flow, and Floats.

The markup for the first still in the animated gif has a div enveloping an img and a p element. The image goes first and because p is a block element, the text starts at a new line. The red border is for the enveloping div and the dotted black border belongs to the image. No CSS needed, the markup goes something like this:

<div id="stairs">
  <img src="images/gown.png">
  <p>An evening gown is a long flowing women's....</p>
</div>

The output without any CSS looks like this. The borders are not turned on in this version because I have no CSS.

Since we want to pull the text to the same level with the image, we begin writing some CSS. Floating the image to the right should do the trick because this will sort of take the image out of the flow so as long as there's enough space the text and image will sit next to each other. Text will flow around the floated image but other than that, the image being there will not cause a block level element generate a br.

#stairs img { float: right; border: 1px dotted black; }
#stairs { border: 1px solid red; }

Let's add 20 pixels all around to get the image away from the corner of the browser and give the stairs div a width of 500 pixels to contain the text a bit. The third still is how we'll look at this point.

#stairs { 
   border: 1px solid red;
   margin: 20px;
   width: 500px;
   }
   
#stairs img { border: 1px dotted black; 
              float: right;}

The text is confined to a set width and is next to the image but moving the text more towards the image will benefit the design. To do this, we will use negative margins. Remember a left margin controls how far away the neighboring element to your left has to stay from you. You control how close someone gets to you. When you have a negative margin, you are in effect saying "come on in" so that the elements actually start overlapping. A left margin of minus 80 pixels looks okay.

#stairs { 
   border: 1px solid red;
   margin: 20px;
   width: 500px;
   }

#stairs img { 
   border: 1px dotted black;
   float: right;  
   margin-left: -80px;}

#stairs p   { text-align: justify; }

Here's the output of our CSS and HTML after the latest changes. I have the borders turned on for debugging.

STAIR EFFECT

With CSS, we do not have access to the internals of an image file so we are going to simulate the curve by stacking up rectangles on top of one another. This reminds me of how we used to compute an integral using a numerical method.

The markup will change. The finer the slices, the better the curve but for our purposes, four (4) should be sufficient to demonstrate the technique. Six (6) rectangles will make it perfect which would be a good exercise for you. All div's will be floated and will have nothing inside them so it's imperative that we declare width and height for each div. Without dimensions, an empty div will collapse in the flow. I'll take the negative margin out for now since we don't it for this case. The containing block for the image is csdiv, the wrapper div for the stair divs. I'm sure you can come up with a more descriptive name for your div, cs is short for container-stairs div.

/*the css*/
#stairs { 
   border: 1px solid red;
   margin: 20px;
   width: 460px;
   font: 13px/1.7 Georgia;
   }
   
#stairs img { 
      border: 1px dotted black; 
      position: absolute; 
      top:0; right:0;  }

#stairs p   { text-align: justify; }
#csdiv      { position: relative; }

.stair1, .stair2, .stair3, .stair4 { float: right; }   
.stair2, .stair3, .stair4 { clear: both; }

.stair1 { width: 181px;
   height: 190px;
   border: 1px solid blue;
   }
   
.stair2 { width:  208px;
   height: 76px;
   border: 1px solid black;
   }
   
.stair3 { width:  245px;  
   height:  70px;
   border: 1px solid red;
   }
   
.stair4 { width:  278px;
   height: 112px;
   border: 1px solid green;
   }

<!-- The Markup -->
<div id="stairs">
  <div id="csdiv">
    <img src="images/gown.png">
    <div class="stair1"></div>
    <div class="stair2"></div>
    <div class="stair3"></div>
    <div class="stair4"></div>
  </div>
  
  <p>
  An evening gown is a long flowing women's dress usually worn....
  </p>
</div>

CSS3 BORDER PROPERTIES

You can easily see the different elements when we turn the borders on. The text is nicely flowing around our image. We can dress up the border in Firefox by thickening the border, rounding its corners and dropping a shadow. The -webkit- prefix covers Safari/Chrome/Konqueror. I am not including it in the code here but you should:

#stairs {
border: 9px solid #f8d0d4;
-moz-border-radius: 12px;
-moz-box-shadow: -2px 2px 5px 1px #888;
box-shadow: -2px 2px 5px 1px #888;
border-radius: 12px;
......
}

A LITTLE MARGIN GOES A LONG WAY

With the addition of the thick border for the stairs div, the first thing that strikes you is the lack of padding/margin which we can take care of easily.

The text runs right up to the red border so one way to fix this is to give some padding or margin to one of the elements. I'm going to add margin to the p element with margin: 40px 0 40px 40px; statement. There will be no margin for the right side because that could create problems by keeping the text away from our "stairs".

Let's get the text and the image away from the border:

#stairs p {
text-align: justify;
margin: 40px 0 40px 40px;
}

A SET OF STAIRS KEEP THE TEXT AT BAY

Just so we are on the same page - if you are thinking the image itself is playing any role in arranging the text, you'd be wrong. It's taken out of the flow by the absolute positioning and is only there for displaying purposes. The 4 rectangles are now the "image". As long as we overlay the image where the rectangles are stacked up, we'll fool the eye.

#stairs {
margin: 50px;
width: 360px;
font: 13px/1.7 Georgia;
border: 9px solid #f8d0d4;
-moz-border-radius: 12px;
-moz-box-shadow: -2px 2px 5px 1px #888;
border-radius: 12px;
box-shadow: -2px 2px 5px 1px #888;
}

I am going to nudge the image up a little by absolutely positioning the top by -20 pixels. This will move the image up a little above the border.

#stairs img {
position: absolute;
top:-20px; right:0;
}

RELATIVE POSITIONING LEAVES A HOLE IN THE FLOW

#csdiv {
position: relative;
right: -165px;
}

To see the effects of the relative (moving the stairs to the right) and absolute positioning (moving the image up), take a look here. csdiv is relatively positioned. It's still in the flow but we have moved it to the right by 165 pixels. We are doing this because we want the image to pop out of its container and sit on top of the border. But doing so will leave a "hole" behind where csdiv was going to be. As far as the flow is concerned, it still is.

We are going fill in the yellow strip - leftover from the relative positioning - by bringing the text over to the right.

NEGATIVE MARGIN TO PULL THE TEXT TO THE RIGHT

The curve will stay the same. Every stair will get the same negative margin of minus 162 pixels. I can turn off my debugging borders simply by setting all borders to none.

/*negative margin to pull the text over*/
.stair1, .stair2, .stair3, .stair4 {
float: right;
margin-left: -162px;
border: none;
}

Notice how we have moved the image over the border of its containing div in the final version. I thought we were done then I remembered that I had replaced the first letter of the paragraph with a dropcap.

At the time I wrote the CSS Dropcap post, I didn't think a non-floated version was going to help anyone but maybe calm down people's fears about floats. Well, as it turns out, a non-floated dropcap, "stylized_olho-a" in this case, is exactly what I needed for this example to work.

THE CSS & THE MARKUP

If you want to see the entire CSS and markup based on this version, click here. HTML version here. The introductory gif shows the text lighter than I have in the image below. If you prefer it that way, update the paragraph selector with: #stairs p { color: #999999; }.

For comparing the image below with what we started out, see here. Once again, the slideshow has the major steps of the tutorial.

Image Credit: Miss USA 2011, www.missusa.com

Building Image Grids: Size and Crop an Image Using CSS

2011-11-11T21:43:00.001-08:00

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.

RE-SIZING

The original image could be any size, so it's likely that we'll need to resize it to fit in with our page layout. For example if we are laying out a grid of images we'll want to each image in the grid to be the same width and height. Cropping, which we talk about below, can help, but if the image is large we don't want to just crop a small section of it. Instead, we first want to scale the image to get as much of it as we can in our target rectangle, then we'll finish it off with a crop.

Scaling the image is pretty easy by setting the CSS width and height properties of the img tag. But there is one trick here: we never want to set both the width and height because then the image can be streched and distorted to meet the exact height and width we specify. Instead, what we want to do is set only the width, or only the height, letting the other dimension be determined automatically, and thus preserving the original aspect ratio of the image.

So one question we must answer for each image is: Do we scale it by height, or by width?

The answer depends on the aspect ratios of both the target rectangle, and the image. Suppose our target rectangle has a height of 100px and a width of 150px, while the image we are displaying has a height of 200px and a width of 450px - the dimensions for the B/W composite image that appears below. First lets consider what would happen if we scale the image width to be 150px in order to fit it into our target rectangle.

That's a scaling factor of 1/3, so the height will also be multiplied by 1/3 and we'll end up with an image 150 pixels wide, but only 67 pixels in height. Note that since we don't want to distort the image, we have to apply the same scaling factor of 1/3 to both the width and height. But the resulting height of 67 pixels doesn't work since our target height is 100px. As you can see, our resized image got too small for our targeted window. The blue area, which was supposed to be filled with the image, is empty.

So lets try scaling the image height to 100px instead. That's a scaling factor of 1/2, so the width of the image gets reduced to 225px. This is better since the image is still large enough to fill our target rectangle. Of course it's wider than our target, but we'll fix that by cropping it.

Mathematically, the way to decide whether to scale the height or the width is to compute aspect ratios for both the target area and the image:

A_Target = TargetWidth / TargetHeight
A_Image  = ImageWidth / ImageHeight

Then compare them to decide whether to scale the image by height or width:

if (A_Image > A_Target) then
  scale image using height
else
  scale image using width

For the example discussed above, the calculations would be:

A_Target = 150 / 100 = 3:2 = 1.5
A_Image  = 450 / 200 = 9:4 = 2.25

A_Image is greater than A_Target, so scale using height.

CROPPING

To crop the image, we need to have a parent element that we set to the height and width of the target rectangle. The img tag is a child of this parent element. To crop, we just set the overflow property of the parent to hidden (overflow: hidden). If the scaled image is wider than the parent, this will crop off the right portion of the image. If the scaled image is taller than the parent, it will crop off the lower portion of the image.

To crop equally from all sides, we need to pull the image to the left (or up) relative to the parent. We can do this with negative margins. So let's say the scaled image is 20px wider than the parent. If we set margin-left of the image to be -10px, it will pull the image 10px to the left without affecting the parent, and the crop will be centered. If the scaled image is taller then the parent, then use a negative margin-top to achieve the same effect.

Given these two images of varying dimensions - one's vertical and taller, the other's got a horizontal layout that's wider - let's display them with the same dimensions (height and width the same) in an image grid using CSS:

<style type="text/css">
.flickrgrid a {
   height:275px;
   width: 275px;
   overflow: hidden;
   float: left;
   display: block;
   margin-bottom: 25px;
   }
#image1 {
   width: 275px;
   }
#image2 {
   height: 275px;   
   }
</style>

<div class="flickrgrid">
<a href="images/drawingv.jpg"><img id="image1" src="images/drawingv.jpg"></a>
<a href="images/drawingh.jpg"><img id="images/drawingh.jpg"></a> 
</div>

SAME EXAMPLE WITH LESS CSS

We can make the CSS more compact by using multiple classes. The width and height will be set in only one place. .window is made generic so that it can be used for a window of any dimension. We are going to reduce the size of each image in the grid to 220 pixels down from 275 pixels that I used in the example above. That'll give us extra room for right margin to separate the thumbnail images.

.window1, .window1 .taller { width: 220px; }
.window1, .window1 .wider  { height: 220px; }

.window {
   overflow: hidden;
   display: block;
   float: left;
   margin-right:20px;
   }

<a class="window window1" href="images/drawingh.jpg">
<img class="wider" src="images/drawingh.jpg">
</a>

<a class="window window1" href="images/drawingv.jpg">
<img class="taller" src="images/drawingv.jpg">
</a>

THREE IMAGE GRID

<style type="text/css">
.flickrgrid2 a {
   height:150px;
   width: 150px;
   overflow: hidden;
   float: left;
   display: block;
   margin-right: 15px;
   margin-bottom: 25px;
   }
#image12 {
   height: 150px;
   }
#image22 {
   width: 150px;
   }
#image32 {
   height: 150px;
   }
</style>
<div class="flickrgrid2">
<a href="images/drawingv.jpg"><img id="image22" src="images/drawingv.jpg"></a>
<a href="images/pencils550x361.jpg"><img id="image32" src="images/pencils550x361.jpg"></a>
<a href="images/drawingh.jpg"><img id="image12" src="images/drawingh.jpg"></a>
</div>

USING WIDER CROPS

Next we change the example above to make the cropping window wider than it is tall. So it will no longer be a square of 150px on each side. Instead it will be 150px tall and 180px wide. To do this we need to set the width of the a tags to be 180px, and then any images that need to be scaled by width, we will also set to be 180px wide.

The only tricky part of this is that since we are changing the width of the cropping window, it could mean that some images that we were previously scaling by height, now need to be scaled by width. This happens if the aspect ratio of the scaling window is now larger than the aspect ratio of the image.

In our example the aspect ratio of the cropping window is changing from 1 (150/150) to 1.2 (180/150). If we had images with an aspect ratio of say 1.1, then we would have been scaling them by width and cropping a little off the bottom, and now we need to scale them by height and crop a little off the right.

<style type="text/css">
.flickrgrid3 a {
   height:150px;
   width: 180px;
   overflow: hidden;
   float: left;
   display: block;
   margin-right: 3px;
   margin-bottom: 25px;
   }
#image12c {
   height: 150px;
   }
#image22c {
   width: 180px;
   }
#image32c {
   height: 150px;
   }
</style>

<div class="flickrgrid3">
<a href="images/drawingv.jpg"><img id="image22c" src="images/drawingv.jpg"></a>
<a href="images/pencils550x361.jpg"><img id="image32c" src="images/pencils550x361.jpg"></a>
<a href="images/drawingh.jpg"><img id="image12c" src="images/drawingh.jpg"></a>
</div>

CSS Image Grids

Happy 4th

2011-07-04T20:32:00.000-07:00

CSS Image Grid Using Sprites

2011-05-30T14:27:00.000-07:00

Still Life

When we worked on a CSS image grid last summer, I thought later I'd complete a second version using sprites to show you how that approach can improve performance. I should make notes to myself about loose ends like that because somewhere along the way, I forgot about it. Last week, an email about the original grid reminded me.

The grid post is popular, the sprite change is easy enough, so let's implement it. By the way, the grid above is a real-time working example generated through HTML included within this post and styles that come from a style sheet. Each thumbnail is clickable but needs a URL assigned to its a element before it'll take you somewhere.

The thumbnail images are still life on black, which is a hobby of mine. I had to crop some of them quite a bit in order to fit them here. Images were saved in low resolution to speed up things for the web.

I made a new copy of the old CSS styles just to keep things from tangling with each other. Most of the code is recycled so for detailed explanations, see this previous post. I posted several times on sprites before if you need help to figure out what those are about.

Keep in mind that my space on the blog is limited to 550 pixels, you can adjust the width to fit your requirements and increase the number of columns of your grid as you wish. You'll find the markup at the end of the CSS.

ul.imggrid {
  padding: 0;
  list-style: none;
  margin: 0 auto;
  width: 495px;
  }

.imggrid li {
    float: left;
    padding: 1px;
    border: 1px solid #cbcad0;
    margin: 0 5px 10px 5px;
    } 

.imggrid_display {
   padding: 20px;
   margin: 0 auto;
   width: 513px; 
   /*these two properties will be inherited by .portfolio h2 and .portfolio p */
   font-family: 'GraublauWeb', arial, serif; 
   text-align: center;
  }
  
  /* .post-body is only for those who are on Blogger, or all others please skip 
     it and write your selector as "div.imggrid_display h2" without the quotes
  */
  .post-body div.imggrid_display h2 {
     padding: 0; margin: 0;
     clear: both;
     font-size: 35px;
     font-weight: normal;
     color: #58595b;
     background: none;
     font-family: 'GraublauWeb', arial, serif;  
     /* reset for cascade effects that are trickling down to me 
       from other h2's 
    */
     text-transform: none;
     letter-spacing: normal;
     }
  
  .imggrid_display p {
      margin:0; padding: 0;
      font-size: 15px;
      color: #58595b;
      }
  
/* sprites for imggrid */
.imggrid a {
    background: url('images/spritebitmaps.jpg') no-repeat;
    height: 150px;
    width: 150px;
    display: block;
    }

/*sprites*/
.imggrid a#col1 {background-position: 0 0;}
.imggrid a#col2 {background-position:  -150px 0;}
.imggrid a#col3 {background-position: -300px 0;}
.imggrid a#col4 {background-position:  -450px 0;}
.imggrid a#col5 {background-position:  -600px 0;}
.imggrid a#col6 {background-position:  -750px 0;}
.imggrid a#col7 {background-position:  -900px 0;}
.imggrid a#col8 {background-position:  -1050px 0;}
.imggrid a#col9 {background-position:  -1200px 0;}
/* end sprites for imggrid */
/* end imggrid block */

Important note for the CSS: .post-body is only for those who are on Blogger, All others please skip it and write your selector as div.imggrid_display h2

Fill in your own URLs for the a href's. The markup:

<div class="imggrid_display">
<ul class="imggrid">
<li><a id="col1" href="#"></a></li>
<li><a id="col2" href="#"></a></li>
<li><a id="col3" href="#"></a></li>
<li><a id="col4" href="#"></a></li>
<li><a id="col5" href="#"></a></li>
<li><a id="col6" href="#"></a></li>
<li><a id="col7" href="#"></a></li>
<li><a id="col8" href="#"></a></li>
<li><a id="col9" href="#"></a></li>
</ul>
<h2>Still Life</h2>
<p>© Copyright 2011 | www.cssbakery.com | All Rights Reserved</p>
</div>

THE "SPRITE" FILE

All the images used in forming the grid reside in the same file avoiding multiple GETs which saves time and loads the page smoother. I did not leave any space between my images but for clarity and ease of edit, you might want to include at least a single line as a separator between yours.

Since my images are each 150 pixels wide and stacked next to each other with no separator space, I shift the sprite file by a factor of 150 times the order of each image in the file to get to that image.

To give you an example, the red tulip is fifth in line so I multiply 150 by (5-1). I subtracted 1 since we start counting from zero. In other words, I have to shift the background image by 600 pixels to get to the tulip.

The background position x value is negative at -600 pixels because we want to pull the image to the left. If it helps any, think of the negative x axis from school. You are pulling the parts of the image that you don't want into that quadrant and showing only a portion of the remaining in the positive quadrant.

NTH CHILD OF CSS3

We can improve the CSS by including the nth-child construct from CSS3. It will simplify both the CSS and the markup. Off the top of my head, I couldn't tell you how widespread it's implemented in browsers, except that Firefox 3.5 and greater supports it and IE8 and below doesn't. The fact that IE8 does not support it is a dealbreaker and the reason why we cannot use in official code yet. There are still a lot of users running Windows XP, which does not support IE9. Anyway, I will show you how the nth child works in a separate post.

CSS Image Grids

AN IMAGE GRID FOR YOUR WALL

This has nothing to do with software but the idea is very similar to the grid that we just talked about with the only difference being where the images go - on a computer screen or a wall. If you have a collection of pictures - with the proliferation of digital cameras who doesn't these days - you can print them on canvas with a wide format printer. Once the prints are made, stretch them on ready-made canvas frames. Arrange the finished pictures in a grid on a bare wall and surround the arrangement with a hollow but complete frame. No need for glass, matting, or mounting. Finish it off with a picture light.