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;
    float:left;
}

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 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;
    float:left;
}

.red {
    background: red;
}

.orange {
    background: orange;
}

.green {
    background: green;
}

.purple{
    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.


Nov 14 2011

jQuery Mobile + PhoneGap = Awesome Mobile Development Platform

I’m currently prototyping an iPad application and I’ve just found working with jQuery Mobile and PhoneGap to be a breeze for mobile application development. I’ve used iOS SDK before and I’ve experimented on test applications with Android and I’ve always found issues with both the iOS and Android development frameworks. I’ve also looked into cross platform mobile development toolkits such as Appcelerator Titanium and Sencha Touch but I found these were not of me at the time. Any of the aforementioned platforms and frameworks can be used to create a great looking and functional mobile application but I found that they each ask the developer to make a trade off.

With jQuery Mobile, you develop your mobile application with HTML5 and JavaScript/jQuery. With jQuery Mobile, all of your UI is written in pure HTML5 tags with the correct CSS classes and attributes. jQuery Mobile is built on top of jQuery so many web developers can immediately start being productive with jQuery Mobile.

Everybody has an idea for the next great iPhone application. The top reasons I’ve heard from people, including from developers, as an excuse for not getting started is that they don’t have a Apple computer, they don’t want to learn another programming language, they don’t have time, etc. jQuery Mobile invalidates all of these excuses. You can use Firefox or Chrome to test your jQuery Mobile application, you develop using plain HTML5 and JavaScript, and most it’s easy to pick up.

Because a jQuery Mobile application is just a HTML5-based web application, if your an run it on your iPhone or other mobile device using the native web browser. On the iPhone, when you run a jQuery Mobile application the browser will take up a small portion on the screen for the navigation buttons, bookmarks, and other controls of the browser. One way to claim all of the screen real-estate is to create a native application, that is where PhoneGap comes in. PhoneGap is a native shell around a web application, such as those developed in jQuery Mobile. With PhoneGap, you can turn your jQuery Mobile application into a full fledged native application.


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

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;
}