CSS Tips: Box Shadows, Insets and Single Sided

Have you ever wanted to create a framed section of your website with a highlighted shadow style border, but didn’t know how? Well, using one of CSS 3’s great features called “box shadow” you can!

Example:

Example

.boxshadow {
box-shadow: 6px 6px 5px 5px #cccccc;
-moz-box-shadow: 6px 6px 5px 5px #cccccc;
-webkit-box-shadow:6px 6px 5px 5px #cccccc;
}

Browser Compatibility:

You will notice that I include 3 different forms of box-shadow code in my CSS. This is to ensure full browser compatibility among the Firefox, Opera, Safari and Chrome browsers. Internet Explorer requires extra code, which I will mention a little further down.

Explaining The CSS:

There are 5 parts to the Box Shadow code:

  1. Horizontal Offset (ie. 2px). This is the number that will tell the browser where to display the horizontal shadow. A positive number will move the shadow to the right and a negative will move the shadow to the left.
  2. Vertical Offset (ie. 2px). Similar to the horizontal offset, this moves the shadow up or down. A positive figure will move the shadow below the box and a negative number moves the shadow above the box.
  3. Blur Radius (ie. 5px). This allows you to “blue” the shadow to give it more or less detail. Note: this is optional.
  4. Spread Radius / Size (ie. 5px). This displays how large your box shadow is displayed. 0 is used by default. Note: this is optional.
  5. Color. Using different color codes you can specify how your shadow looks.

Insets and Single Sides:

In addition to regular shadow effects, you can use the “inset” feature to add the shadow inside the box instead of outside. The remaining properties remain the same (ie. horizontal, vertical, blur etc).

Inset

.insetboxshadow {
box-shadow: inset 0 0 8px #000000;
-moz-box-shadow: inset 0 0 8px #000000;
-webkit-box-shadow: inset 0 0 8px #000000;
}

From time to time you may also wish to only display a shadow on 1 side of a box. This is done by giving the spread/size a negative number (ie. negative spread radius) which will result in your shadow only being displayed on a single side of the box. Play around with this to see how it looks.

1 Sided

.1sideboxshadow {
box-shadow: 0px 8px 8px -8px #000000;
-moz-box-shadow: 0px 8px 8px -8px #000000;
-webkit-box-shadow: 0px 8px 8px -8px #000000;
}

Internet Explorer Additional CSS:

As with most things IE, they don’t recogise standard HTML out of the box, so you need to add a little extra code to make the magic happen. In this case we need to include a second CSS Div Class. A big thanks to css-tricks.com for helping me with this particular bit of code.

.ieshadow {
margin: 40px;
background-color: rgb(255,255,255); /* Required by IE. RGB 255 = White */
box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
-moz-box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
-webkit-box-shadow: 2px 2px 5px 5px rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,
ShadowOpacity=0.30);
-ms-filter: “progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,
MakeShadow=true,ShadowOpacity=0.30)”;
zoom: 1;
}

.ieshadow .iecontent {
position: relative; /* This ensures the inner section is not blurred */
padding: 100px;
background-color: #ffffff;
}

Blue Shadow

The HTML code would therefore look like:

<div class=”ieshadow”>
<div class=”iecontent”>
Content
</div>
</div>

As with most things, trial and error will often get you the best results. If at first you’re not happy with the shadow of your divs, edit the css and try new settings.

Helpful Resources:

Css-tricks.com – Box Shadows
CSS Secrets Squidoo Lens

Share This:

CSS Tips: Font Styling Shortcut Rule

html-5-css-style-sheetHave you ever coded CSS and wished you could merge multiple lines into just one?  You can, at least with regards to your font styling by merging your styles into a single line. There are a few rules you must follow in order to use this (details after the code details) but in general it’s a quick and easy way to code your CSS.

Instead of using code such as:

{
font-family: arial;
font-size:1em;
font-style: italic;
font-weight:bold;
font-variant: small-caps;
}

You can include all these into a single line such as:

{
font: italic bold small-caps 1em arial
}

The Rules:

1) You MUST specify BOTH the font-family and font-size properties in order for this to work.

2) The font-family property MUST be the very last item within the CSS.

3) The font-size property MUST be directly before the font-family property.

4) Not specifying the font-weight, font-style properties etc will result in the browser using the default options.  If in doubt, specify the full-styling.

Helpful References:

w3.org font-sizes: http://www.w3.org/QA/Tips/font-size
Webcredible CSS Tips: http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml
Blog Herald: CSS Tips: http://www.blogherald.com/2006/09/08/css-tips-and-tricks/

Share This:

DIV Tags: Basic Styling and Usage

Over the years there have been many forms of Web Design that have since become “old school”, irrelevant or simply out-dated. Often, they are replaced with far better methods that provide faster loading, better SEO and improved styling, such as the replacement of <b> with <strong> and <i> with <em>.

Another such feature are Tables <table>. While still heavily used by some people, they are slowly being used less and less across the Internet, and are being replaced by the Division or DIV tag <div>. Simply put, DIV allows you specify divisions within your document, much like a table would do with rows, columns and cells.

I’ve found the most common reason people don’t use DIVs is because they don’t understand how. I hope to shed a little light on DIVs in this article and show you how to add them to your site, style them as necessary and make them look great.

Basic Usage

As with every tag in HTML, DIV tags have both an open and close tags that wrap around the specific content.

<div>Content inside the DIV tag</div>

Any content you add within your DIV tags will be controlled by any styling you specify in your DIV (see below).

Styling a DIV can be done 3 ways:

  1. Use of an external CSS file
  2. Adding CSS styling to the header of the webpage
  3. Adding CSS styling directly to the DIV

In this example we are going to focus only on #3; adding CSS directly to the DIV tag.

There are many styling options you can use with tags. In the following examples we are going to focus only on a few of them, which include: width, border, background, padding, float and margin.

Styling

To style a DIV tag, you need to add the styling commands to the opening DIV tag. This is done as follows:

<div style=” “>
</div>

The style commands go within the ” ” section. If you wanted your DIV to be 75% wide, with a black border you would use something like this:

<div style=”width: 75%; border: 1px solid #000000;”>
DIV Content
</div>

Notice that after each style command you need a semicolon “;” and the styling is wrapped within the ” “. Your width can be fixed (ie. 500px) or fluid (ie. 50%). This DIV would look like this:

DIV Content

As you can see, this looks very basic. Now we’re going to add some padding between the text and the border, make the background of the DIV grey and center the entire DIV on the screen.

<div style=”width: 75%; border: 1px solid #000000; padding: 10px; background: #cccccc; margin: 0 auto;”>
DIV Content
You can add any HTML / PHP as required within here
</div>

By adding this extra styling we now have a DIV that looks like this:

DIV Content
You can add any HTML / PHP as required within here

It’s important to know that in order to center the DIV, you need to use the “margin: 0 auto” tag. This tells the DIV that the top and bottom margins are 0 and the left and right are auto, which in industry-standard browsers will cause the DIV to be centered on the screen. In Internet Explorer, this margin style may not work however. This is due to Microsoft not following industry standard styling with the Internet Explorer browser. I believe if you want a browser that displays pages correctly, you should be using Firefox, Chrome, Safari and Opera.

You can also add DIVs inside DIVs. What we’re going to do now is add a new box inside the current one that is aligned to the right. This will have a white background and a dashed border. To do this, we need to add a second section of DIV tags, styled to our needs. We will remove the margin tag from the new DIV and replace it with “float: right;” which will align the DIV to the right side of the current DIV.

<div style=”width: 75%; border: 1px solid #000000; padding: 10px; background: #cccccc; margin: 0 auto;”>
<div style=”width: 25%; border: 1px dashed #000000; padding: 5px; background: #ffffff; float: right;”>
Floating Right DIV
</div>
DIV Content
You can add any HTML / PHP as required within here</div>

This would result in this:

Floating Right DIV

DIV Content
You can add any HTML / PHP as required within here

There you have it, basic DIV styling using CSS.

Tomorrow I will post part 2 of this series which covers how to build a website template using the methods mentioned here.

If you’re wanting to learn more, we strongly recommend the Web Design Mastery Course.

Web Design Mastery is a complete Internet Marketers Reference Guide. Not only will you learn how to design a professional website, but you’ll also learn in the easiest possible fashion.

It is a fantastic product that will teach you all you need to know about Web Design.

Share This: