CSS

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/

Website Layout

0

What is generally accept as a "good website layout"? A subject of debate, however, a good layout will have a clearly defined header area, sidebar (optional), content area, and footer area. It can look like the following:

layout

The sidebar can be neglected, on the left side, the right side, or on both sides. The fact still remains that there is a clear cut header, sidebar, content area, and footer, however.
Note: the widths and height of these elements will differ of course.

Tables or CSS?

Starting with CSS2.1 in table designed websites started to phase out rapidly. This is because rich content management systems like WordPress, Drupal, and Joomla were being born and refined. The developers of these fine CMSs did not use tables to do their bidding for their rich admin panels and client-side website interactivity. Today, tables are nearly deprecated when it comes to web layout. CSS is used to create tableless layouts. If you don't know CSS and you want to learn CSS you can click here to learn it!

How to Start?

When I start a website I will work on my external style sheet first and foremost. I will set all of the link colors, define by background, etc... Like the following example:

html, body {
     margin:0;
     padding:0;
}

body {
     margin:auto;
     width:1000px;
     background:#3b3b3b url (bg.png) repeat-x top center;
     font-family: Tahoma, Arial, sans serif;
     font-size:12px;
     color:#fff;
}

a, a:visited {
     text-decoration:underline;
     color:#ff9300;
     outline:none;
}

a:hover {
     text-decoration:none;
     color:#ff9300;
     outline:none;
}

img {border:none;}

Once I have my foundation elements all set and ready to go I will create my ID selectors that I will use for the website. If you are unfamiliar with ID selectors or just want a refresher click here for basics or click here for id v. class selectors. The main ID selectors we want are the following:

  • header
  • sidebar (optional)
  • content
  • footer

The CSS could look like the following:

#header {
     height: 75px;
     background: #4c4c4c url(images/header-bg.gif) repeat-x;
     border: 2px solid #fff;
}

#sidebar {
     float: left;
     width: 150px;
     background: #DBDBDB url(images/sidebar-bg.gif) repeat-x;
}

#content {
     float: right;
     width: 850px;
}

#footer {
     clear: both;
     height: 75px;
     background-color: #4c4c4c;
}

The HTML code to make this happen would be the following:

<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div id="header">
    <p>Add content here</p>
  </div>

  <div id="sidebar">
    <p>content here</p>
  </div>

  <div id="content">
    <p>content here</p>
  </div>

  <div id="footer">
    <p>content here</p>  
  </div>
</body>
</html>

We are using a div element that is a block level element so we can negate display:block; for the ID selector. It is common practice that we use div elements to call certain ID selectors since div, by default, does nothing.

Once we have the basic structure of the website we can add our custom styles, class selectors, additional class selectors, nested selectors, pseudo-classes, pseudo-elements, etc... Consider the following for the sidebar:

 #sidebar.container {
     background: #DBDBDB url(images/gradient.png) repeat-x top top;
     width: 125px;
     max-height: 250px;
     overflow: hidden;
}

This creates a class selector called container which can only be used for the ID called sidebar. This container will be called multiple times in the sidebar (hence, the class selector) and will reside inside the sidebar since it's a child element.

Want to see a working example and then some? Please download web-layout.zip where you can see multiple examples of web layouts each with a combined and their own individual style sheet so you can easily see what the CSS is doing to each layout.

web-layout.zip
web-layout.zip
Size: 14.43 KB

Creating an Inline Menu

0

Creating an inline menu should seem pretty straight forward, right? You think we could just create an unordered list and that would be the end of the story. Unfortunately, if we create an unordered list we'll quickly see that these lists types merely list item one on top of the other.

  • Item 1
  • Item 2
  • Item 3

This is because the ul and li elements are block-level elements and not inline elements. For example:

ul, li {display:block;}

Is a piece of code that is understood by every modern browser that follows the W3C standards.

Our solution is simple then. If we recall that an inline display value will use only what is immediately around the element. Consider the following:

p.inline {display:inline;}
<p class="inline">Porttitor eros dictumst nunc lundium porta proin 
ultrices placerat velit ultrices parturient tincidunt? 
In. Nisi tincidunt scelerisque cras velit sed risus 
arcu turpis! Mauris et.</p>
<p class="inline">Et ac. Nec tortor quis pulvinar tristique augue 
dis sed adipiscing aenean nascetur arcu, magna, elit enim cras? 
Amet proin, nascetur amet et eu diam.</p>

Since we overrode the default display:block; for p elements, the output will be the following:

Porttitor eros dictumst nunc lundium porta proin ultrices placerat velit ultrices parturient tincidunt? In. Nisi tincidunt scelerisque cras velit sed risus arcu turpis! Mauris et.

Et ac. Nec tortor quis pulvinar tristique augue dis sed adipiscing aenean nascetur arcu, magna, elit enim cras? Amet proin, nascetur amet et eu diam.

So let us examine the list a little bit more.

<ul>
     <li><a href="#">Item 1</a></li>
     <li><span>Item 2</span></li>
     <li><em>Item 3</em></li>
</ul>

The <ul> in itself if a block-level element; however, the <li> are also block-level elements. All of the elements surrounding the list items are inline elementse.g. the <a> is an inline element.

In our inline menu, we don't want the menu itself to be an inline element but rather its items to be inline elements. These items are the <li> elements. Consider the following menu with basic CSS:

#menu {
     height:50px; /*sets height of menu*/
     background-color:#4c4c4c;
}

#menu ul {
    list-style:none; /*gets rid of bullets*/
     width:800px; /*sets width of menu, not necessary*/
}

#menu li {
     display:inline; /*critical to inline menu*/
     padding-left:10px; /*sets space between menu items*/
}

Now that we have our CSS the HTML structure will look like the following:

<div id="menu">
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
     </ul>
</div>

See the downloadable file for working example and additional examples.

Pretty boring, huh? All of that CSS for just a few lines of lousy HTML. This is a secret behind the creation of inline CSS menus, just remember that you want the menu items to be a series of inline elements but not the actual menu itself.

From here on out we can style our inline menu to our liking. If you are unfamiliar with CSS then I recommend you visit the CSS Tutorials and learn CSS!

From there we can style our inline menu to our liking. We can create simple effects that will make the men stand out. Consider the following:

#menu {
     height:50px;
     font-size:1.2em;
     background-color:#4c4c4c;
     border:2px solid #fff;
     color:#fff;
}

#menu ul {list-style:none;}

#menu li {
     display:inline;
     padding-left:10px;
}

#menu a:link, #menu a:visited {
     text-decoration:none;
     color:#fff;
     padding:10px;
}

#menu a:hover {
     background-color:#3b3b3b;
     text-decoration:none;
     color:#DBDBDB;
     padding:10px;
}

This will give us a nice looking menu that will have a roll over effect on the links within the menu. From there, we can add custom images, jQuery drop down menus, and many other effects using client-side code.

For examples and editable code, please download the file!

Inline Menu
Inline Menu
Size: 11.48 KB

Introduction to CSS3

0

As you probably know, CSS stands for Cascading Style Sheet and it used in place of HTML frames, and HTML tables. CSS was created to make web site creation easier and more pragmatic. If you have an external style sheet linked on all pages of your website, this will allow you to make changes all across the site with just a few changes.

Traditionally, you would have to open every page of you site and make the necessary changes. If you had a 20 page site and you decided to change you logo then you'd have to open every page and add that new logo into the pages. With CSS, however, you could change the logo just by changing the image name in your style sheet.

Versions of CSS

CSS1

CSS1 became a w3c recommendation in Dec 17th, 1996 and was last revised on Apr 11th, 2008. CSS1 included many CSS3 properties that are still used today such as margin, padding, border, and background. When CSS1 came out HTML 2.0 was the primary version of HTML. We're now on (X)HTML 4.01 as the standard.

CSS2

CSS2 included improvements on CSS1 such as a box-model, overflow, and aural style sheets for aria required screen readers.

CSS2.1

Many years later the w3c completed a major revision of CSS2 called CSS2.1 that became recommendation on September 8th, 2009. This includes many fixes on CSS2 and included many new values and new properties that made web design even more simple. At this time HTML 4.01, and XHTML 4.01 were standards at this point in time. When CSS 2.1 was birthed it began to phase out web sites made with HTML tables. CSS2 and CSS 2.1 allowed for a designer to make complex HTML table sites simpler and more practical to amend. This also gave way to very complex internet programs such as Drupal, Joomla, and WordPress (though they existed before 2008).

CSS3

As of March 3rd, 2010, CSS3 is still a working draft by the w3c. Some properties such as border-radius, text-shadow, and border-image are already supported by the latest versions of Chrome, Safari, Firefox, and Opera. For more information on CSS3 you can read the documentation here.

Note: A large sum of these selectors will NOT work in IE versions 5.5-8. To test and see which selectors are buggy and are not supported please visit css3.info's Selector Test. If you're using the latest versions of opera, chrome, safari, and Firefox then you needn't worry.

Some things we will cover

We will cover an extremely useful property called the "text-shadow" property. It can look like the following:

Text-Shadow

Border-Radius

and of course opacity/rgba:

Opacity

Sources:

Go to Top