The CSS box model is a W3C standard that draws the basic principles on which a box is drawn in HTML/CSS. Since every HTML element is actually a box, this principle applies to every element. Basically it states that the screen estate a box takes up is defined by the following parameters, in this order from inside to outside:

1. width/height
2. padding
3. border
4. margin

Here the content area is defined by width/height.

Quirks mode, standards mode and almost standards mode

All these terms have to do with the issue of browser compatibility. It all started back in the dawn of browsers, where every browser laid down its own flavor of standards and tried to force it just for the sake of “I have a bigger audience and think things should happen my way”.

So, the interpretation of CSS box model was different for IE and Netscape (the big players back then). Since these differences became very inconvenient for webdevelopers it was obvious W3C standards (common standards) was the way to go. Still, many websites had already been created using the distorted rules existing so far, and if the browsers began displaying them according to standards many sites would break.

So developers had to be given a way to switch between the standards mode and quirks mode (the wild west of browsers). In quirks mode (the old way of displaying pages) different bugs are “available for public use”, the most notable difference in the box model being that the box size is defined by width/height, border and margin (no padding – padding actually is a part of with/height, and the content area is defined by width/height minus padding). This switch is the DOCTYPE definition that should be given in the start of every HTML document, which tells the browsers how to interpret the page – in standards or in quirks mode.

The “almost standards mode” is a hybrid interpretation employed by some browsers. It differs from standards mode only in the interpretation of laying out images in a table (which is in quirks mode), so that old websites using many sliced-up images laied out in a table structure are less likely to break.

Semantics

Probably you’ve heard this a bunch of times – “…using semantic code”. What does it actually say? Well, this is to say your code should be meaningful by itself. The code is not just there to accomplish the goal of presenting a certain piece of content on the screen in a specific way, but should be universally describing the content. Thus it would be a matter of CSS changes to make the content look in an entirely new way. Also, each content entity will be readable, described by its role – address, content, header, box, username, etc.

Let’s give a small example. What’s wrong with the following piece of code?

<span class="red">A message goes here.</span>

Technically – nothing. Semantically, however, the coder binds the class name to a specific website theme/look/skin, instead of keeping the code semantically meaningful. An important rule of web programming is to keep the three layers (action, design, content) separate. It would be better to use a class name like “emphasized”, for example. If we use .red we’re facing two major issues:

• when changing the site theme at a certain stage of development to one with green elements, for example, the .red class would look weird if it displays as green;
• semantically the code is richer when using meaningful class names (like “emphasized”, “date”, “section”), and thus the webpage will be more delicious a bite for search engines.

Classes vs. IDs

You can assign both attributes to an element, but which one should you use?

• From a CSS perspective IDs have higher priority. So, if you have both a class and an ID assigned to an element, the ID definition will take precedence:

<style>
#header { color:green; }
.myStyle { color:red; }
</style>
...
<div id="header" class="myStyle">Lorem Ipsum</div>

The text will show as green, despite the fact that .myStyle was defined on a later stage in the CSS.

• From HTML/JS perspective, you should only use unique IDs in a document, so it is appropriate to use IDs for major document elements like #header, #footer, #content, and classes for elements that are found repeating in a document (.box, .column, .emphasized).

The advantages of writing standard-based DIV based HTML

CSS-based layouts have been around for over 10 years now, so it is a sin not to use them. It has multiple advantages before the table-based layouts, and some of them are:

• you get everything done with a smaller amount of code, thus achieving a better code-to-text ratio, which affects SEO ranking, too;
• you get better control over separate elements (e.g. moving the logo around is much easier and does not require re-slicing the whole site layout); this is much like the ease of editing a layered Photoshop/GIMP file vs. editing a flattened JPG;
• you get better separation of content, design and behaviour; thus different team members can work separately and independently on different aspects of a site (design, development), without interfering; also, you get a much easier time at debugging issues and making changes;
• you get an easy way to make any design changes (effectively switch between themes) by not changing a single line of content code; all you have to edit is your CSS file;
• you get a thing to brag about in front of your friends – writing compact and standards-compatible code is certainly an accomplishment
• by writing standard code you make sure your site will work and look properly in a vast amount of browsers – even in future browsers, ones that will come out 2 years from now.

Intro

Imagine the following: you have worked on a Photoshop project, spending hours on end over it. You may not have slept this night, but you know that every drop of sweat was worth it – after all you have created wonders! The result is quite impressive, and of course when you show it to the customer he is totally into it, and says:

“This is great! I love it! But what if we make the image of the little girl a bit bigger?… Just a bit – it shouldn’t be an issue, right?”

OR

“That tree you have cut out from the background… Let’s get it back and see if it is better”

Well… Let me hear you say “Arrghhh!!!”

How transformations change the image irreversibly

In order to illustrate that, let’s look at a simple case. We will get a simple image, rotate it 45 degrees, then rotate it back 45 degrees and compare the difference between the original, untransformed image, and the supposed-to-be-the-same, rotated back and forth, image. Here goes the three step process:

Rotating an image 45 degrees and back again.

As you can see, the image we ended up with is quite far from the one we started with. And this is the result of only two consecutive transformations that require interpolation (scaling/rotation). Quite a bunch of info is lost, since each transformation is irreversible, and the result serves as a base for any following transformation.

Going back to the scenario described in the intro: since you have manipulated the original images (rotated them, scaled them down, applied filters and color corrections to them), you cannot just go back, change a little something, and expect all the rest of the manipulations down the line to ‘re-apply’ and remain the same.

On the other hand, if you go back in history to the stage you want to change, you will lose all the undone actions. So what you will have to do it basically re-do everything from that moment on.

This is just one example when you would wish your image manipulations are adjustable even after they’ve been done.

Have no fear – the solution is here

Fortunately there is a way to achieve this – you have a series of tools in your hands that can help you make your actions reversible and adjustable, and the team working on Photoshop, as a leading product on the market, seems to think in the same direction, adding to these features in the latest releases.  Here is a quick list:

• masks / clipping masks
• adjustment layers
• smart objects / smart filters
• history brush

Masks: don’t delete – just hide

This is a quite basic technique. The idea is to just hide portions of the image you don’t need instead of erasing them. A mask layer is actually a grayscale “map overlay”, where white represents complete opaqueness, black – full transparency, and the shades of grey – levels of semi-transparency. Boy, does that help out in that “get-the-tree-back” situation – you just need to paint the mask white where the pixels of the hidden tree are and voila – there it is.

Adding a mask to a layer in Photoshop is just a click away – select the layer to add the mask to, and then click on the “Add layer mask” button in the “Layers” palette:

Adding a mask

Clipping Masks – another breed

Sometimes you need to restrain the visibility of a layer to the extent of a certain object that is on another layer.  Let’s say you want to achieve this effect:

This is an image seen through a ‘hole’ defined by a text layer. Achieving this through a regular mask on the image layer will do quite the same for you, but there will be two disadvantages:

• If you want to change the text, you will need to re-create the mask, too.
• You will have some redundancy by having an extra element – both a text layer and a mask.

Now let’s see how to get the same result through a clipping mask:

1. Create the text layer.
2. Drag the image layer over the text layer.
3. Alt-click (Option-click for Mac) on the border between the two layers to get the text layer act as a clipping mask for the image layer.

HINT: You can add as much clipped layers as needed.

Pros: You get a dynamically updated mask. You simplify things by having a single layer acting both as a layer and a mask for other layers.

Cons: Setting the opacity of the clipping mask influences the opacity of the clipped layers (note: there is no vice versa)

Adjustment layers: don’t harm your pixels

The most common image correction techniques involve tinkering with brightness/contrast, levels, hue/saturation, curves, exposure or converting to grayscale. All these operations change the original image, and in most cases you could lose information (like losing color with grayscale conversion, or losing detail in burnt-out areas when brightening an image). So it is a great thing all these (and more) are available as an adjustable alternative – the so-called ‘adjustment layers’.

Applying an adjustment is as easy as inserting a new layer (see the screenshot) in the layer stack. Click on the “Create new fill or adjustment layer” button in the “Layers” palette, and choose an adjustment to apply. The adjustment is then applied to all layers down the stack. If you later want to change the parameters of the adjustment (e.g. the brightness value), just double click on its thumbnail to get the adjustment settings dialogue. You can also move the layer up and down the stack, thus controlling which layers are affected by it. If you don’t want the adjustment anymore – you can temporarily hide it or delete it and everything will be as if it never existed.

So, an adjustment layer is like an instruction set for a change (e.g. ‘change the brightness level to +35),  and not the change itself. This allows us to change the parameters of the adjustment (in this case – brightness and contrast levels) anytime. This is why I call it ‘parametric’.

Constraining the effect of the adjustment to a certain portion of the image (like, in the image on the right, graying out the whole image except the flower), is a matter of drawing in the mask of the adjustment layer (see “Masks“).

The tricky part is if you want to apply an adjustment to a single layer / a group of layers in the middle of the stack.

Restrain the effect to a group of layers: Since the adjustment layer affects all layers below, a way to restrain its effect is group the layers with the adjustment layer on top of the the group stack (see left).

For restraining the effect to a single layer you can avoid creating an unnecessary group, but use the layer (Layer 2) as a clipping mask for the adjustment layer instead (see right). You can achieve that by Alt-clicking (Option-click for Mac) on the border between the two layers in the layer stack.

Pros: Transformations are not lossy, because they are undoable and adjustable.

Cons: None that I know of.

That’s it for now. The next couple of tools (smart objects/filters and history brush) will be coming up shortly in the “Non-destructive techniques in Photoshop image manipulation – part 2” article.

Smooth background image swap – jQuery Background-Image Transition Plugin

I will show you an example right now, so you know what I am talking about.

Here is a working example

What we basically do is:

1. Create an additional hidden <div> element on top ( using z-index ) of the element we want to animate
2. Load the new image in the in the cache in the background, so that the effect is smooth
3. Set the new src to the new <div> element
4. fadeIn() the new <div> element so that it creates the illusion that the background image of our initial div is smoothly changing
5. Optional step – if we need to change the image once again, go from 2 to 5 but setting the new src to our initial <div> and then using fadeOut() on the new element, so that it disappears and the new image is set as background to the old <div>. This way we won’t have an infinitive increase of the z-index and won’t actually change the z-index of the initial <div>

OK, let’s get to work, we will start with the HTML markup:

<div id=”backImage”></div>

Well, that was pretty easy: we have a simple <div> element with some demo text and just next to it we add that additional <div> which we will need for the animation.

So, here is the CSS:

#backImage {
    z-index: -2;
    height:600px;
    width:800px;
    background-image: url('path/to/initial/img');
}

We just set a height and width of the element so that we are sure the image will actually be shown. It is generally a good idea to have the z-index set to a negative number while other elements have a greater z-index value.

We will use jQuery’s Background-Image Transition Plugin for our example.

First, add jQuery and the plugin

<script lang=”Javascript” src=”path/to/jQuery.js” type=”text/javascript”> </script>
<script lang=”Javascript” src=”path/to/jQuery.bgImageTransition.js” type=”text/javascript”> </script>

Then, at the end of the document, add the following lines:

jQuery( function(){
    jQuery('#backImage').bgImageTransition( 'path/to/new/image', {
        duration: 'slow',
        easing: 'linear',
        helperElementId: 'backImage2',
        zindex: -1
        callback: function(){
           //do sth
        }
    });
});

The only mandatory argument is the path to the new image. The optional second argument is an object holding some tweaks. You can set the desired duration, easing, helperElementId ( which is generated by the plugin ), z-index of the helperElement ( by default it will take the selected element’s zindex and increment by 1 ) and a callback function in case you want to execute some functionality when the transition is over.