Posts tagged Web Design

Basics of CSS - Part #10

0

Today we're going to talk about tables and how they can look significantly better when we add a little bit of CSS to them. If you need a quick refresher on tables, please click here.

Styling Tables

As mentioned above, styling tables is very useful and can instantly make a webpage come to life. The HTML default table is like the following:

Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

Pretty boring if you ask me. Notice how the table has a background of transparent so it will take the color of any background element. The table has that border by default and it definitely could use some tweaking to make it look better.

We're going to use some key properties:

  • border-collapse
  • border

The border property allows us to style all four corners of a border at once, or each side individually. There are no arbitrary shapes with borders. All elements have a clearly defined left, right, bottom, and top side to the element.

border property

Notice how the square has an irregular shape and doesn't appear to be a conventional square. We would call this a diamond shape or something along those lines. It's actually a perfect square that was rotated 45° on a canvas. Notice how the diamond has a background since it is an image and that background has four sides: top, right, bottom, and left.

To see the border tutorial click here

Now that we have a firm understanding and we have refreshed our minds on the border property, we can fully style our tables!

If we add a little bit of CSS and tweak the table to our liking then it could very well look like this:

Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

Although this dives into the world of pseudo-classes, which is discussed in the advanced css tutorial series, we know what our tables can potentially look like with a little bit of work.

Styling

Consider the following code:

table, td {border:1px solid #ff9300;}

This code would add a 1px border that is solid with the color #ff9300 (AtomicPages Orange) around the table and td (table cell) elements. The reason why we chose these elements is because the tr (table row) element does not have a border around it be default. (Usually applying a border color to a table would only mean applying it to the table element only and not the td element.)

This code will outline the table and td elements with a border that is 1px in width, that is solid and the color #ff9300. This can be useful if you want to quickly style a table quickly and easily.

Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

border-collapse

The border-collapse property is a very useful property that collapses the default double border into a single border. For example:

table {
     border-collapse:collapse;
     border:1px solid #ff9300;
}
Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

Notice how the border collapse property instantly gives the table a sharper and less "busy" look. The default border around the table and td elements ceases to exist and we are given a sharper look.

With a little padding (for spacing) for the td elements we can easily space out the table like the following:

th, td {padding:3px;}
/*use as an alternative for cellpadding*/
Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

Using that same principle, we can apply background images and colors to the table, tr, th, and/or the td elements.

For example:

table {
     border-collapse:collapse;
     border:1px solid #ccc;
     background-color:#dbdbdb;
}
Item 1 Item 2
Item 1 Item 2
Item 1 Item 2

We've seen how tables can look and we know what they look like by default — boring. Styling tables can be a great addition to any website whether it is made from tables itself or from a tableless markup using CSS.

Styling Tables
Styling Tables
Size: 8.36 kB

HTML 4/XHTML 1.0 Tag List

0

DTD referrs to the doc type and indicated which tags are allowed F = Frameset, S = Strict T = Transitional.

Tag Description DTD XHTML 1.1
<!--...--> Comment in HTML FST YES
<!DOCTYPE> Sets document type FST YES
<a> Sets an anchor FST YES
<abbr> Sets an abbreviation FST YES
<acronym> Sets an acronym FST YES
<addres> Sets contact information for the author/owner of a document FST YES
<applet> Deprecated: Sets an embedded applet FT NO
<area /> Sets an area inside an image-map FST NO
<b> Sets bold text FST YES
<base /> Sets a default address or default target for all links on a page FST YES
<basefont /> Deprecated: Sets a default font, color, or size for the text in a page FT NO
<bdo> Sets text direction FST NO
<big> Sets big text FST YES
<blockquote> Sets a long quotation FST YES
<body> Sets a document's body FST YES
<br /> Sets a single-line break FST YES
<button> Sets a push button FST YES
<caption> Sets a table caption FST YES
<center> Deprecated: Sets center text FT NO
<cite> Sets a citation FST YES
<code> Sets computer code text FST YES
<col /> Sets attribute values for one or more columns in a table  FST NO
<colgroup> Sets a group of columns in a table for formatting FST NO
<dd> Sets a description of a term in a definition list FST YES
<del> Sets deleted text FST NO
<dfn> Sets a definition term FST YES
<dir> Deprecated: Sets a directory list FT NO
<div> Sets a block-level section of a document FST YES
<dl> Sets a definition list FST YES
<dt> Sets a definition term (or item) FST YES
<em> Sets emphasized (or italic) text FST YES
<fieldset> Sets a border around elements in a form FST YES
<font> Deprecated: Sets font, size, and color for text FT NO
<form> Sets a form for user input FST YES
<frame /> Sets a window in a frameset F NO
<frameset> Sets a set of frames F NO
<h1> to <h6> Sets different headings FST YES
<head> Sets the head section of an HTML document FST YES
<hr /> Sets a horizontal line FST YES
<html> Sets an HTML document FST YES
<i> Sets italic (or emphasized) text FST YES
<iframe> Sets an inline frame FT NO
<img /> Sets an image FST YES
<input /> Sets an input field in a form FST YES
<ins> Sets inserted text FST NO
<isindex> Deprecated: Sets a searchable index related to a document FT NO
<kbd> Sets keyboard text FST YES
<label> Sets a label for an input element FST YES
<legend> Sets a legend for a fieldset FST YES
<li> Sets a list item FST YES
<link /> Sets the relationship between a document and an external resource FST YES
<map> Sets an image-map FST NO
<menu> Deprecated: Sets a menu list FT NO
<meta /> Sets metadata about the document FST YES
<noframes> Sets alternative content for users who do not support frames FT NO
<noscript> Sets alternative content for users who do not support client-side scripts e.g. JavaScript FST YES
<object> Sets an embedded object FST YES
<ol> Sets an ordered list FST YES
<optgroup> Sets a group of related options in a form select list FST YES
<option> Sets an option in a form select list FST YES
<p> Sets a paragraph FST YES
<param /> Sets a parameter for an object FST YES
<pre> Sets preformatted text FST YES
<q> Sets a short quotation FST YES
<s> Deprecated: Sets strikethrough text FT NO
<samp> Sets sample computer code FST YES
<script> Sets a script type FST YES
<select> Sets a drop down list FST YES
<small> Sets small text FST YES
<span> Sets a inline-section of a document FST YES
<strike> Deprecated: Sets strikethrough text FT NO
<strong> Sets strong (or bold) text FST YES
<style> Sets an internal style sheet FST YES
<sub> Sets subscript text FST YES
<sup> Sets superscript text FST YES
<table> Sets a table FST YES
<tbody> Groups a table body FST NO
<td> Sets a table cell FST YES
<textarea> Sets a textarea for an input field FST YES
<tfoot> Groups a table footer area FST NO
<th> Sets a table header cell FST YES
<thead> Groups a table header area FST NO
<title> Sets the title of the document FST YES
<tr> Sets a table row FST YES
<tt> Sets teletype text FST YES
<u> Deprecated: Sets underlined text FT NO
<ul> Sets an unorderd list FST YES
<var> Sets a variable part of a text FST YES
<xmp> Deprecated: Sets preformatted text None NO

CSS3 Opacity

0

The Opacity Property is slightly different then RGBA and HSLA which was discussed in CSS3 Colors.

Opacity v. RGBA & HSLA

Indeed RGBA has the addition of the "alpha" or opacity value like so:

{code type=css}
background-color:rgba(127, 60, 87, 0.4);
background-color:hsla(68, 100%, 50%, 0.8);
{/code}

Either of these examples will have a color that is opaque in some fashion. Consider the following:

If you're using IE see below:

{code type=css}
background-color:rgba(0, 0, 255, 1);
background-color:rgba(0, 0, 255, 0.8);
background-color:rgba(0, 0, 255, 0.6);
background-color:rgba(0, 0, 255, 0.4);
background-color:rgba(0, 0, 255, 0.2);
{/code}

This code using rgba allows us to create our desired effect.

Allows us to use these opaque colors, however, we can reach the same effect using the standard rgb color space or by using hexadecimal values.

Consider the following example:

We have the same effect using slightly different code in fact. We used the opacity property to create the fading squares.

{code type=css}
background-color:rgb(0, 0, 255); opacity:1.0;
background-color:rgb(0, 0, 255); opacity:0.8;
background-color:rgb(0, 0, 255); opacity:0.6;
background-color:rgb(0, 0, 255); opacity:0.4;
background-color:rgb(0, 0, 255); opacity:0.2;
{/code}

Main difference

The main difference between rgba + hsla and opacity is that we can apply opacity to any element we want instead of just backgrounds. This includes, but is not limited to, images and text.

This is some more text

As we can see, the text is fading with word. The first word is at 100% opacity, the second at 80%, third at 60%, etc... We denote these values in terms of decimals so 1 = 100%, 0.8 = 80%, etc...

Opacity

One really great thing about the opacity property is that you don't need to create an image sprite if you want an image to be slightly translucent before roll over and fully opaque during roll over. Here is an example of opacity:

Chrome

{code type=css}
.chrome-opacity {
background:url (images/chrome.png) center center no-repeat;
height:64px;
width:64px;
opacity:0.8;
}

.chrome-opacity:hover {
background:url (images/chrome.png) center center no-repeat;
height:64px;
width:64px;
opacity:1.0;
}
{/code}

Using method above allows us to easily create semi-opaque images or text and allow them to become fully opaque on roll over or vice versa.

Note: IE 6 only supports the :hover pseudo-class on <a> tags only. Also, IE does not natively support this property where all of the other major browsers do.

To use this property with IE we'll need to create a conditional comment for all versions of IE like the following:

{code type=html}

{/code}

Note: that IE 6 and 7 do NOT extend support to the pseudo-class :hover on anything but <a> tags and therefore the hover will not work.

If you want to see working examples of the opacity property then please download the file!

opacity.zip
opacity.zip
Size: 170.97 KB

CSS3 Colors

0

You might be wondering what is so special about CSS3 colors and why they're even different considering that the color and background-color property and their values have not changed since CSS1 specification were released.

As set by CSS1 we can use the following for the color and background-color properties:

Color Background-color
  • color:[colorname];
  • color:rgb([value 1],[value 2],[value 3])
  • color:#[hex value]
  • background-color:[colorname];
  • background-color:rgb([value 1],[value 2],[value 3])
  • background-color:#[hex value];
  • color:orange;
  • color:rgb(255, 255, 125);
  • color:#ff9300;
  • background-color:black;
  • background-color:rgb(124, 56, 87);
  • background-color:#470b0b;

Aside from these standard mundane implementations of colors, CSS3 added a whole new color space: HSL.

HSL

HSL stands for Hue Satuation and Lightness. The break down is as follows:

Hue Satuation Lightness
Hue is the degree of a color wheel that goes from 0 to 360. Here as some general colors:

  • 360 is red
  • 120 is green
  • 240 is blue
Satuation is the amount of color, or how "full" the color is. Here are some values:

  • 100% represents full color
  • 75% represents 3/4 color
  • 50% represents 1/2 color
Lightness is also a percentage but deals with how much white and black is added to the color. Here are some examples:

  • 100% means 100% white is added which means the color will be white
  • 50% means 50% of white and 50% of black is added so they basically balance each other out
  • 0% means no white is added or 100% black which means the color is dwarfed by pure black.

Here is an example of HSL:

Here is an example with RGB:

Here is an example with HEX:

The corresponding CSS for HSL colors is the following:

{code type=css}
background-color:hsl ([0-360], [x]%,[x]%);
background-color:hsl (360, 100% 50%);
background-color:hsl (133,85%, 61%);
{/code}

RGBA

There is nothing new about the RGB color space. We learned about the RGB color space in Basics of CSS Part 2 and we have seen many colors in the RGB color space and in hex format Color Reference.

Common examples of RGB would be the following:

{code type=css}
background-color:rgb(255, 0, 0); /*red*/
background-color:rgb(0, 255, 0); /*green*/
background-color:rgb(0, 0, 255); /*blue*/
{/code}

So what does the "a" mean in RGBA? The A stands for alpha which deals with transparency or the opacity of colors. The syntax for the alpha value will span from 0-1 in decimal form. For example:

{code type=css}
background-color:rgba(0, 0, 255, 0.4);
color:rgba(0, 0, 255, 0.8);
{/code}

The first example will set the opacity of pure blue to 40% and the second example will set the opacity of pure blue to 80%.

Alternatively, the RGB colors will be the following:

RGBA RGB
background-color:rgba([color 1], [color 2], [color 3], [alpha]);

background-color:rgba(0, 0, 255, 1);
background-color:rgba(0, 0, 255, 0.8);
background-color:rgba(0, 0, 255, 0.6);
background-color:rgba(0, 0, 255, 0.4);
background-color:rgba(0, 0, 255, 0.2);
background-color:rgb([color 1], [color 2], [color 3]);

background-color:rgb(0, 0, 255);
background-color:rgb(50, 50, 254);
background-color:rgb(101, 101, 254);
background-color:rgb(152, 152, 254);
background-color:rgb(203, 203, 254);
These colors are not contingent on the color of the background. Since these colors have alpha transparency, they will show any colors or background images behind the elements. These colors are contingent on the color of the background. If you wish for the element to be a certain color then you need to specify the color you wish to have. Will not show any color behind the element and will not show any background images behind the element because no alpha transparency exists.

For example

Notice how above they were the same colors and now since we have a different color background the colors with rgba will allow the black background to show through where as the rgb colors will display their respective color values.

Which Browsers Support RGBA?

  • Firefox 3.x+
  • Safari 3+
  • Safari 4+
  • Google Chrome
  • Opera 10.10+
  • Flock 2.02
  • Mobile Safari
  • Blackberry Browser

IE Hack

Mission someone? Of course we are! We're missing lovely Internet Explorer and all of its versions. Luckly, there is a hack for IE.

{code type=html}

{/code}

We can use this hack as inline css or use in an internal or external style sheet. If you want a specific class selector or element to have an translucent color then use the hack for that element or class like the example above. If you want to use inline css then place the hack in the style attribute.

You might be wondering what #800000FF is. Think of this as #AARRGGBB where AA is the alpha value in two integers, RR are the red hexadecimals, GG are the green hexadecimals, and BB are the blue hexadecimals.

In order to covert our initial RGBA value to Hex we need to think interms of Hex to Decimal values.

Hex to Decimal

In order to convert Hex to Decimal we need to think mathematically. We'll start with an easy example:

Hex Decimal
#ffffff rgb(255, 255, 255)
#0000ff rgb(0, 0, 255)
#ff00ff rgb(255, 0, 255)

How did we get these values of the top of our head? The solution is simple. Follow these steps from Jackson Hines's post on RGB to HEX and vice versa:

HEX to RGB (Ex: #a84fff)

  1. Take the first digit of the red part of the hex color. (ex: a)
  2. If this digit is a letter, replace with the letter of the alphabet and add 9. If it is not a letter, leave it. (ex: a = 1; 1 + 9 = 10)
  3. Take the second digit of the red part of the hex color. (ex: 8 )
  4. If this digit is a letter, replace with the letter of the alphabet and add 9. If it is not a letter, leave it. (ex: 8 )
  5. Divide this number by 16. (ex: 8 ÷ 16 = 0.5)
  6. Add the number you got in step two and the number you got in step 5. (ex: 10 + 0.5 = 10.5)
  7. Multiply this number by 16 to get the red value. (ex: 10.5 × 16 = 168)
  8. Repeat steps 1 through 8 with green and blue values. (ex: 168, 79, 255))

Alpha (#AA) & A

So what about alpha? Knowing the information we have obtained by Jackson's helpful article, we can convert our rgb value to hex and vice versa. If you wish not to do so much math and want to get results quickly, I recommend using Colorpicker.com.

#AARRGGBB to RGBA

Let us assume #660000FF is our #AARRGGBB color of choice. Convert #0000FF to RGB which will be rgb(0, 0, 255) and now time to convert #AA.

Following HEX to RGB conversion of #66:

  1. The first number is 6
  2. The second number is 6 ÷ 16 = 0.375
  3. The third number is the (first number + the second number) × 16 = 102
  4. 102 ÷ 255 = 0.4 for RGBA

If you don't want to that much math then you can use this conversion tool to convert any TWO hex characters to decimal or any series of Decimal characters. Once you have your decimal number, divide by 255 and you will have your RGBA number.

HSLA

Using the same principles as RGBA and HSL, just add the A to the end of the HSL values. For example

{code type=css}
background-color:hsla ([0-360], [x]%, [x]%, [0-1]);
background-color:hsla (133, 85%, 61%, 0.6);
{/code}

For more information an examples on the IE Hack for RGBA and HSLA, please download css3-colors.zip and open in IE.

css3-colors.zip
css3-colors.zip
Size: 1.71 KB

CSS3 Text Effects

0

Today we're going to talk about text effects and how they make a website become eye candy. If you, for example, visit atomicpages.net under the website management, website setup, and latest blog posts you will notice a slightly darker shadow right below the text. This is a text effect that makes a website less boring to look at.

text-shadow

The text-shadow property isn't at all new to CSS3. Originally, this property was going to be used with CSS2 which is what all of the Basics of CSS tutorials are based off of.

This property will allow us to create photoshop-like effects without having to use photoshop and saving the text as an image. Here is an example:

Some fancy text here

Notice how the font has a dark shadow as if the light were coming from about 11 o'clock.

The general syntax for the text-shadow property is as follows:

{code type=css}
text-shadow:[x-pos] [y-pos] [blur radius] [color];
text-shadow:2px 2px 2px #000;
{/code}

In the example above, the shadow will be 2px on the positive x-axis, 2px on the positive y-axis, and have a blur radius of 2px with a color of #000 (black).

Note: the [x-pos] and [y-pos] will take any positive or negative integer.

Some fancy text here

Which browsers support text-shadow?

Not all browsers today support the text-shadow property, here is a list of browsers that support this property:

Supported Not Supported
  • Safari 3+
  • Opera 9.5+
  • Firefox 3.1+
  • Chrome 1+
  • Konqueror
  • Internet Explorer 6+
  • Internet Explorer 7+
  • Internet Explorer 8+
  • Flock 2.x

word-wrap

Amazingly enough, the word-wrap was invented by Microsoft and has been implemented into CSS3. This property allows for long words in any given element to be broken and wrapped in a new line. Consider the following:

Without word-wrap

Some text here. Inthebrokwnwindowsargument,peoplearguethatthereisno net gain from the creation of jobs.

Width word-wrap

Some text here. Inthebrokwnwindowsargument,peoplearguethatthereisno net gain from the creation of jobs.

The values for word-wrap are normal and break-word.

{code type=css}
.wrap {word-wrap:break-word;}
.wrap {word-wrap:normal;} /*this is default*/
{/code}

In the example above, we used:

{code type=html}

Some text here.
Inthebrokwnwindowsargument,peoplearguethatthereisno
net gain from the creation of jobs.

Some text here.
Inthebrokwnwindowsargument,peoplearguethatthereisno
net gain from the creation of jobs.

{/code}

Using this method you can break larger words into smaller chunks.

Sources:
1: http://www.w3.org/TR/css3-text/

Go to Top