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.


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


Aug 17 2009

The 1Kb CSS Grid

I’ve used a variety of layout techniques and technologies, from HTML tables to home grown CSS. I recently started using The 1Kb CSS Grid to layout my web content in a page. With The 1Kb CSS Grid you can specially design your grid CSS by selecting the number of columns, the column width and the gutter width between columns. The width of your grid will be calculated for you but just in case you care, the total width of the grid will be based on the following equation: (Number of Columns x Column Width) + (Number of Columns – 1) * Gutter With

1Kb CSS Grid

1Kb CSS Grid

For my requirements I found when using The 1Kb CSS Grid that I tend to get more flexibility when I use 12 columns at 60 pixel wide each column and a gutter of only 10 pixels. The total grid width for this layout is 840px. If you peek in the generated grid.css you will find, with our configuration, 12 grid classes, such as grid_1, grid_2, etc. Think of grid_1 as a single column, and grid_2 as a one cell that spans two columns. You can have any number of rows, but each row you only have 12 columns. For example, you can have one grid_12, or three grid_4, or 12 grid_1 per row. Lets see the HTML for a few rows and how they would end up looking.

<div class="row">
  <div class="column grid_12">12</div>
</div>
<div class="row">
  <div class="column grid_6">6</div>
  <div class="column grid_6">6</div>
</div>
<div class="row">
  <div class="column grid_1">1</div>
  <div class="column grid_2">2</div>
  <div class="column grid_4">4</div>
  <div class="column grid_5">5</div>
</div>
Basic Grid Layout

Basic Grid Layout

Notice that each row can have any number of grids, as long as the grid count adds up to 12. You can also nest rows

<div class="row">
  <div class="column grid_8">8
    <div class="row">
      <div class="column grid_4">4</div>
      <div class="column grid_4">4</div>
    </div>
  </div>
  <div class="column grid_4">4</div>
</div>

As a tip, just remember that the grid count in the nested row must add up to the parent/containing column grid count. Below is a dramatization of what a CSS grid row with a nested row would look like.


Jul 9 2007

iPhone Dev Camp

iPhone Development

The iPhone Dev Camp started on Saturday by a nice presentation by Chritopher Allen, a MacHack veteran, regarding what is known about the iPhone from a web developer’s perspective. What is known is that the iPhone uses web standards (HTML, XHTML, CSS, JavaScript, PDF and Quicktime). Web 2.0 best practices apply for the iPhone, such as the proper use and sepration of HTML, CSS, and JavaScript. Christopher recommends avoiding the use of Flash, SVG, Java applets, embedded video, custom x.509 certificates, and framesets. Christopher also states the the finger is not a mouse and you need to design accordingly with large enough buttons and links with plenty of space between each other.
Fingers can do more than the traditional point and drag cursor such as double tap, touch and hold, one or two finger drag, flick, and pinch.

It might come as a surprise but many of JavaScript events don’t work, such as onscroll, onkeydown, onkeypress, onmousemove, etc. Some web development recommendations for the iPhone are to use columns and small blocks in the layout, such as floating divs. You should also use the tel: and mailto: protocols in links. You can also integrate with Google Maps simply by adding your location search to maps.google.com/maps? URL.

The current activity on the the iPhoneWebDev Google Groups seems to be focused around iPhone specific development libraries, implementing the infamous back button, debugging JS, optimizing application for low bandwidth, and hacking the viewport. There is also a series of open questions such as, what level of support is there for the canvas tag? What level of persistent storage is available, cookies? The right questions will lead to the right answers. I have also published a great list of available iPhone development resources.

Most of time at the iPhone Dev Camp was spent developing a collaborating for the hack-a-thon. This was a working camp focused on developing some really cool applications on the iPhone.
Continue reading


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