Jul 16 2012

Add Shadows with CSS box-shadow Property

Over the last few years web browsers have made a lot of progress to add new features based on what is shaping up to be HTML5 and CSS3. I’ve already demonstrated what can be done with new CSS properties such as the CSS border-radius property. Now, I’ll cover the CSS box-shadow property.

Using box-shadow
This tutorial will demonstrate how to add shadows to a div HTML element using the CSS box-shadow property. For the purpose of this tutorial, we’ll the following CSS class that defines our div box.

.box {
    width: 100px;
    height: 100px;

As you can figure out by the property name, the box-shadow property can be used to create a shadow outside, or inside of your div box. In the simplest forms, you can add a drop shadow on the lower right of a div tag by adding the following CSS on the style attribute of the div.

<div class='box' style='box-shadow: 20px 20px 50px blue;'></div>

The first numeric value in the box-shadow property is the length of the shadow on the horizontal side of the div box, the second numeric value is the length of the shadow on the vertical side. The third value is the length of the blur. Additionally, you can add a blur color.

By default, having positive values for the horizontal and vertical blur length will produce a blue on the lower right of the div tag. Negative values are allowed which will mirror the blur on the other side. For example, to create a blue on the lower left side of the div tag change the box-shadow to the following.

<div class='box' style='box-shadow: -20px 20px 50px blue;'></div>

Using box-shadow with inset
You can add an additional value, inset, to force the shadow to be inside of the div tag. By default, by adding the inset value the shadow will be on the top left of the div but inside of the box.

<div class='box' style='box-shadow: 20px 20px 50px blue inset;'></div>

To change the direction of the box shadow, just switch the horizontal and vertical blur length values from positive values to negative.

Even blur
In addition to negative or positive values, you can enter 0 for the horizontal and vertical blur length. When you enter 0, the blur will be on both top-bottom for the horizontal and left-right for the vertical directions.

<div class='box' style='box-shadow: 0px 0px 50px blue;'></div>
Examples of box-shadow CSS property

Examples of box-shadow CSS property

To see some more examples of the box-shadow property in action see the the following gist.

Modern browsers
The CSS box-shadow works on modern browsers, which include the latest version of Safari, Chrome, and Firefox. As of this writing, it does not work in Internet Explorer.

Jul 5 2012

Disable Right Click Menu in HTML

When browsing a webpage, you typically can click the right button on the mouse to reveal a context menu. The right click context menu usually has options such as Back, Forward, Reload, Stop, and View Page Source. When right clicking on an image, you have have the option to save the image or even set it as the desktop background. It’s rare but sometimes you want to disable the right click context menu. To disable the right click context menu you can set the oncontextmenu event to return false.

<body oncontextmenu="return false;">

If you only want to disable the right click context menu on a small part of your site, for example an image you don’t want your visitors to easily download or save you can add the oncontextmenu property to any div or img tag and disable the context menu only in that HTML tag.

Jul 4 2012

Rounded Corners with CSS border-radius Property

Modern browsers have come a lone way since 2006. Back in 2006, Web 2.0 and AJAX was the hottest technologies for web developers (just like HTML5 and CSS3 is now) and rounded corners was one the coolest things you could do to a web page. Unfortunately, in 2006 the easiest way to have rounded corners in a HTML tag such as a div was to use JavaScript and images and all other sorts of hacks. Thankfully, most modern browsers (all but IE) support the CSS border-radius style which can be used to curve and round a corner.

Using border-radius
For the following examples, I’ll using the following CSS classes, which I hope are self explanatory.

.box {
    width: 100px;
    height: 100px;

.red {
    background: red;

.orange {
    background: orange;

.green {
    background: green;

    background: purple;

The easiest use of border-radius is where all four corners have the same border curve radius. If all corners have the same curve radius all you need to supply is one px radius value.

<div class='box orange' style='border-radius: 20px;'></div>

In the examples provided in this tutorial, we fixed the width and height of the box div to be 100px. If we increase the border radius to 50px we can have a perfect circle.

<div class='box orange' style='border-radius: 50px;'></div>

What makes the border-radius property powerful is that you can set a different radius for each corner. Just enter four values, the first one will set the radius for the top-left corner, the second sets the top-right, then the bottom-right, and the bottom-left corner. If the value 0px is used, that corner will not have any curvature. The following HTML examples sets different border radius values for each corner generating a leaf looking shape.

<div class='box green' style='border-radius: 0px 60px 40px 60px;'></div>

Placing four similar div tags in place, you can create a four leaf clover shape or a circle.

<!-- four leaf clover -->
<div class='box red' style='border-radius: 50px 75px 0px 75px;'></div>
<div class='box orange' style='border-radius: 75px 50px 75px 0px;'></div>
<br style='clear:both' />
<div class='box green' style='border-radius: 75px 0px 75px 50px;'></div>
<div class='box purple' style='border-radius: 0px 75px 50px 75px;'></div>

<br style='clear:both' />

<!-- circle -->
<div class='box red' style='border-radius: 100px 0px 0px 0px;'></div>
<div class='box orange' style='border-radius: 0px 100px 0px 0px;'></div>
<br style='clear:both' />
<div class='box green' style='border-radius: 0px 0px 0px 100px;'></div>
<div class='box purple' style='border-radius: 0px 0px 100px 0px;'></div>

You can even nested rounded div tags to create a bullseye image.

Fun with CSS border-radius

Fun with CSS border-radius

As of this time, Chrome, Safari, and Firefox support border-radius.

Jun 4 2012

JavaScript Debugging With The console Object

In the early days of JavaScript there were few options for debugging large web applications. You could have used the multiple alert notifications or possibly even calling document.write to write messages into the document. Firebug changed web developers lives, and I think how we view JavaScript, by making it incredibly easy to debug HTML, CSS, and JavaScript. Since Firebug, most current versions of web browsers include powerful debugging tools. In addition to the debugging tools browsers have made available a JavaScript console object to help write debug statements. With console, there is no need to pop up alerts to inspect the state of an object. To write a log message intended for the console, just write the following JavaScript statement in the right place.

console.log("This is a log message");
console.log("Message one", "Message two", "Message three");

To open the console, you can find it in Safari by looking for the the Web Inspector, in Chrome it’s called Developer Tools, and in Firefox you’ll find it under the Tools menu as Web Console.

The console object has a lot of useful debugging messages for errors with different severity, such as log, debug, info, warn, and error.

console.info("I'm here.");
console.warn("Do I smell smoke?");
console.error("The roof, the roof, the roof is on fire.");

In addition to logging String messages, you can log whole JavaScript objects. It may be useful to inspect a complete object and it’s state. To write out the state of an object to the console use the dir method as in the following example.

console.dir({fname:"Bill", lname:"Gates"});

In Chrome and Safari, you can also use dirxml to display the a HTML element object in the console as HTML. In my version of Firefox, this method did not work.


You can also group related log messages, no matter their severity. To group console messages surround them with a group and groupEnd. You can even nest groups inside of groups.

console.group("Server update");
console.log("calling server...");
// ... any number of console log messages.

You can also test the performance of your JavaScript code with time and timeEnd. Both of these methods accept a String label and it needs it needs to be the same value for both methods.

console.time("Process Data");
// ... some time consuming code
console.timeEnd("Process Data");

When the timeEnd method is executed it will generate a message in the log console with the amount of time it took to run the code between the time and timeEnd method.

Chrome Developer Tools Web Console

Chrome Developer Tools Web Console

Dec 31 2009

TechKnow Year In Review 2009

It is that time of year where we reflect on the accomplishments of the passing year and look forward to the one to come. Here is a window into the past year in technology through this year’s popular posts on TechKnow Juixe.

Top Favorites

Fav Tutorial

Memorable Quotes


Twitter Conversations

Year in Review

Jan 14 2007

Div Align With CSS

When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.

To get started with code samples, to center a div in the middle of a container div you can use the following CSS:

.center {
  margin-left: auto;
  margin-right: auto;

If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes.

.right {
  float: right;
.left {
   float: left;

I have found that when I used both div that float both to the right and left that you have to follow that with an empty div that clears, or resets, the float CSS property. If I don’t clear the float property other elements such as a menu that is aligned to the right might not render correctly. Here is the CSS class to clear the float property, use it in a div the divs that have been aligned to the right, left, or both right and left.

.clear {
  clear: both;