Box Shadows with CS3

Fetchak gives a work around to allow box shadows; found at http://fetchak.com/ie-css3/. The example also rounds corners.

Mozilla has also posted this information at its Development Center. The information there is more detailed and six live examples are given.

Remember CSS is placed either in the head or directly into the element tag. The obvious advantage of putting the Blogger CSS in the head tag is that the css can be repeatedly applied to a class of elements. For purposes of this example, I put the CSS Here is the css:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

Let's see if it works.

First, I create a div with a class name "box". I then put the css into the element tag using style. (I am going to put the css into the layout when this works.) You will see that I added color to the background and the text, then changed the width, height and padding to make the box stand out.

Learn how to put a box shadow on a div in blogger

blog wars

The blogoshpere has changed much since I started blogging. Blogger, which ruled the platform in the beginning, finds stiff competition from WordPress and now DotNetNuke. While Blogger maintains an advantage in simplicity, WordPress and DotNetNuke offer hosting advantages that the serious blogger will want to take advantage of.

In February 2008 Michael Kizer made the switch from WordPress to NetDotNuke.You can read his posting  to read his thoughts on why the switch.However, his blog postings end in October 2009, which makes me wonder. Did he loose interest in NetDotNuke or just run out of thoughts on the remodel project that was the subject of the blog? And, if buzz on the internet determines popularity, then the new kid on the block, NetDotNuke, is not quite ready for prime time.

LinkedIn gives a thumbs up rating to WordPress.The big advantage of WordPress over Blogger is explained like this:

Wordpress.org is not only a platform for blogging (I run two blogs with it), it can be used as a Web site with or without a blog (I also am starting a new Website and Blog with it for my daughter). There are many free Wordpress themes to run blogs with thousands of developers offering plugins (Widgets - add ons) for almost anything imaginable. 

NetDotNuke may have and advantage in skins available for showing off your blog, but WordPress has an advantage over NetDotNuke in simplicity and add ons.

Of course, if simplicity is all that you are after, then Blogger can not be beat. Blogger is a good beginning tool. It also permits multiple blogs and a dashboard that allows the blogger to jump back and forth between blogs with the touch of a key.

three column layouts

Three column layouts can be tricky. The problem arises from content that doesn't fit the allowable space.

Here is the css for purl bee a three column layout.

#canvasWrapper { width: 986px; padding: 0 0px 0 0px; }  

#sidebar1Wrapper { display: block; float: left;  width: 180px; padding: 0; padding-right: 53px; } 
#sidebar2Wrapper { display: block; float: right; width: 240px; padding: 0; } 
#contentWrapper { float: left; width: 460px;  }

Moving On

As we all know, web design is constant advancing as technology and design itself change. The question of today is flash versus static html. One example of the evolving state of web design is RogerVivier.com.Simple html and css is made beautiful by the use of flash that turns the site into a virtual movie about this designer's fashion.

A second issue is the layout box itself. Roger uses a layout width of 968px and a height of 568px.The ratio is slightly smaller than 60%, but this is to allow for the width and height of the monitor screen. Here is the layout reduced by half.