1. Stockholm, Sweden

I am floating all the pictures to the right, just for fun. You can easily change that. All the pictures have the caption neatly underneath, set in a smaller font and in italics.

The first is an image without borders. To see the CSS and markup, view the source code in the demo. Here’s the basic CSS-code for the floated image with caption:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

div.imgcapture {
  float: right; clear:right;
  width: 257px;
  margin: 5px 0 5px 15px;
}
div.imgcapture p {
  padding:0; margin: 3px 0 0 0;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

2. Stockholm, Sweden

Then, picture two has a thin black border (you can alter the thickness and color easily). In my opinion, this makes the picture stand out a little, and is prettier. But this, of course, is a matter of taste. Here’s the CSS for that:

1
2
3
4
5

img.fixed {
  border:1px solid black;
  width: 250px; }

3. Stockholm, Sweden

In my opinion a little shadow makes it stand out even more. So in the third example, the same picture has been given a discrete little box shadow effect. This effect is part of the CSS3 specification and supported by most browsers (but not IE 8 and earlier). It has the same border color and thickness. If you don’t see the shadow, you’re using the wrong browser.

Here’s the code:

1
2
3
4
5
6
7
8
9
10
11

img.fixed2 {
  border:1px solid black;
  width: 250px;
  box-shadow: 3px 3px 3px #818181;
  -webkit-box-shadow: 3px 3px 3px #818181;
  -moz-box-shadow: 3px 3px 3px #818181; }

The “box-shadow” property is defined by 3 lengths and a color as attributes. The first length is the horizontal offset of the shadow, (positive means the shadow is on the right, a negative offset will put the shadow on the left of the box). The second is
the vertical offset; a negative value means the box-shadow will be on top of the box and a positive means the shadow will be below the box. Finally, the third number is the blur radius. If this is set to 0 the shadow will be sharp; the higher the number, the more blurred it will be.

4. Stockholm, Sweden

In the fourth (and final) example I use slightly thicker shadow (4px) with twice as much blur (6px).

And that’s it! Go ahead and use the code if you like it. The full code, including markup, can be found in the demo. Link to me if you feel like it – it’s appreciated!

And, seriously – if you can’t see the shadows, it’s time to get rid of IE and get a browser that shows you the net in all it’s glory! Here’s the download sites for Opera, Chrome, Firefox (a tad buggy for the moment) and Safari (unfortunately wants to grab you email address).

©2012 nekkidblogger. All Rights Reserved.

In the past, I have spent hours and hours searching through my reference books and on the Internet to make my sites look as good in the various versions of Internet Explorer as in  CSS compliant browsers. And I have implemented IE version specific style sheets, IE hacks and rewrites of CSS to make layouts, div’s and other elements look as beautiful in Internet Explorer as in other browsers.

I have implemented the silly Microsoft “expression”-statements for IE-versions not supporting the standard CSS max-width syntax, I have applied Microsoft “filters” of all kinds because IE doesn’t support “box-shadow”. I have inserted extra inner div’s to boxes to make them look the same and have the same size in IE as elsewhere, and I have used unnecessary “clearfixes” (picture by courtesy of RobotJonny.com).

The picture, of course, is much too kind to IE7 (and perhaps even to Opera). It breaks things and messes up too. Even IE8 does that! According to rumors, IE9 will fix all of those things, but I will reserve the right to believe that when I see it. I seem to recall having heard similar things all the way up from IE5! And there are still plenty of bugs left …

No more. I have had enough. I am sick of seeing how bad beautiful typography looks in IE, how well-designed pages get messed up, how nice, discrete shadow effects mess up the fonts within the boxes they apply to in IE. But from now on, for the sites I operate myself, I am not going to bother any more. If Microsoft want to substitute my good looking fonts with thick, ugly looking letters, let borders collapse, and generally render my pages ugly, then let it be so.

From now on, I will consider all those things Microsoft problems that people using Internet Explorer should complain to Microsoft about or start using another browser. I will not help Microsoft by trying to make their inferior browser look good. There is no reason for me to spend lots of hours doing that. For design projects I do for customers I will do it if I have to, but only reluctantly and as little as possible.

That’s my new, radical design principle for 2010 and forwards. It is a very radical decision, as most people for some or other reason still use IE. But it feels very liberating. And it will be a huge time saver. From now on I will have fun and use all the new, wonderful properties of CSS3 and HTML5 as they get implemented in the good browsers. And let Microsoft worry about how IE supports the new standards.

To users with the wrong browsers I will only say this – go and get Firefox, Safari or Chrome if you want to see how sites really look! And now that new, very serious safety issues have been found with Internet Explorer as well, it definitely should be time to change!

©2012 nekkidblogger. All Rights Reserved.

CSS3 supports a new “box-shadow” property that can be applied to shadow page elements such as images, SPANs and DIVs. This is great, since it makes it easier to produce good looking frames for images and to nicely off-set boxes in a number of different and stylish ways.

This new feature is currently supported in a number of browsers, for instance FF3.5, Safari 3.1+, Gecko and Google Chrome. Opera (including version 10.10) and Internet Explorer (including IE-8) does not support it (there are rumors indicating the IE-9 will). However, for IE there are some other methods available (that works from IE 5.5 and up).

So how does this work? The basic syntax is:

So, for example

1

box-shadow: 2px 2px 2px #CCC;

is a 2px horizontally (right) and vertically (down) offset shadow with a 2px blur. The color is grey (#CCC).

Then, to complicate matters, Safari requires the prefix

1

-webkit

and FireFox the prefix

1

-moz

. Fortunately the syntax for these are the same.

If you want to achieve the same results in IE, it gets even more complicated. But tools do exist. A number of sites on the net shows that shadow and blur effects can be produced in Internet Explorer too. And, indeed, several writers/sites show that it is possible to achieve similar shadow effects with IE’s proprietary tools as with CSS3. I found four different possible methods for producing box shadows in IE, all using Microsoft-provided “filter”-techniques – in reality, variants of not-so-good proprietary Javascripts.

These tools are the Shadow filter (usage

1
2
3

filter:
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45

; the DropShadow filter

1
2
3

filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
Color='gray', Positive='true'

; the Glow filter:

1

filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5)

. A fourth possible tool is the Blur filter – I have tested it, and found it of little use for the purposes here. For these filters to work, the object must have layout, meaning they must have “height” or “width” set, or be absolutely positioned (or have zoom set – zoom=1).

The examples available online usually apply shadow effects to images or filled boxes (usually filled with dark colors), see for instance this example at the DynamicDrive CSS-library. However, for my own web designs, I wanted nice shadow effects on some simple bordered text boxes with white background.

To test the various possibilities I have set up four DIVs. The first is the text box as is for reference. Then I apply the following shading:

1
2
3
4
5
6
7
8
9
10
11

.shadow1 {
box-shadow: 2px 2px  #CCC;
-webkit-box-shadow: 2px 2px #CCC;
-moz-box-shadow: 2px 2px  #CCC;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#CCCCCC,
                 offX=3, offY=3, positive=true); }

shadow1 has only shadow, no blur. The IE code could have been given in a separate conditional IE style sheet (as some writers recommend), but that turns out not to be necessary (but see here for an example).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.shadow2 {
box-shadow: 3px 3px #CCC;
-webkit-box-shadow: 3px 3px 3px #CCC;
-moz-box-shadow: 3px 3px 3px #CCC;
filter: progid:DXImageTransform.Microsoft.Glow
      (color=#CCCCCC,strength=3)
progid:DXImageTransform.Microsoft.Shadow
     (color=#CCCCCC,direction=135,
strength=6); }

shadow2 has moderate shadow and blur with the same color. I also test the Glow and Shadow filters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.shadow3 {
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter:
progid:DXImageTransform.Microsoft.DropShadow
      (color=#969696, offx=2, offy=2)
progid:DXImageTransform.Microsoft.DropShadow
     (color=#C2C2C2, offx=2, offy=2)
progid:DXImageTransform.Microsoft.DropShadow
    (color=#EFEFEF, offx=2, offy=2); }

And in the final DIV, shadow3, the shadow color is different, and both shadow and blur substantially larger. For IE, the Drop Shadow filter is applied iteratively (this method is from Ole Laursen).

The results for Safari, Firefox and Chrome are very nice. Opera just shows the original text box – it doesn’t support box shadow yet. The results with IE are not very good. See for yourself (here is the page that you can check yourself in different browsers – demo):

Boxes in Firefox:

Boxes in IE8:

©2012 nekkidblogger. All Rights Reserved.