Advanced CSS3 Tutorial 12: User Interface

In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.
The resize property is supported in Firefox 4+, Chrome, and Safari.
The box-sizing is supported in Internet Explorer, Chrome, and Opera. Firefox requires the prefix -moz-. Safari requires the prefix -webkit-.
The outline property is supported in all major browsers, except Internet Explorer.

In CSS3, the resize property specifies whether or not an element should be resizable by the user.

div
{
resize:both;
overflow:auto;
}

Box Sizing
The box-sizing property allows you to define certain elements to fit an area in a certain way:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Outline Offset
The outline-offset property offsets an outline, and draws it beyond the border edge.
Outlines differ from borders in two ways:
Outlines do not take up space
Outlines may be non-rectangular

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Advanced CSS3 Tutorial 11: Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
This is also using Pseudo Classes.
Here is an example of what we'll be doing today: http://dark-knight.net/example2.html

This isn't supported by Internet Explorer.

p {
   color:#000;
   -webkit-transition:color 1s ease-in;
   -moz-transition:color 1s ease-in;
   -o-transition:color 1s ease-in;
   transition:color 1s ease-in;
}
p:hover{color:#f00;}

"transition:color 1s ease-in" It transitions the color slowly, and takes 1 second.

"p:hover{color:#f00;}" is a Pseudo Class that tells the browser when <p> is hovered over to change the color.

Advanced CSS3 Tutorial 10: 3D Transforms

CSS3 allows you to format your elements using 3D transforms.
At the time of writing this is only supported by Chrome and Safari which use the prefix '-webkit-'.

The rotateX() Method
With the rotateX() method, the element rotates around its X-axis at a given degree.

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

The rotateY() Method
With the rotateY() method, the element rotates around its Y-axis at a given degree.

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

Advanced CSS3 Tutorial 8: Text Effects

Today I'll show you have to add text shadow and word wrap.

text-shadow

In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Note: This is not supported in Internet Explorer yet.

word-wrap

If a word is too long to fit within an area, it expands outside.
n CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word.

p {word-wrap:break-word;}

Advanced CSS3 Tutorial 7: Image Sprites

An image sprite is a collection of images put into a single image file.
A web page with loits of images can take very long to load and generates multiple server requests.

Here's an example of a Image Sprite picture:
http://www.w3schools.com/css/img_navsprites.gif

With CSS we specify it to show just the part we need:

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

Advanced CSS3 Tutorial 6: Image Opacity/Transparency

Example 1 - Transparent Image

First we shall create a transparent image with CSS.

You would use the following source code:

<img src="klematis.jpg" width="150" height="113" alt="klematis" style="opacity:0.4;filter:alpha(opacity=40)" />

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).
Tip: The CSS3 syntax for transparency is opacity:x.
In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

Example 2 - Image Transparency - Mouseover Effect

The code looks like this:
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.
The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.
When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.

Example 3 - Text in Transparent Box

The source code for this looks like this:

<html>
<head>
<style type="text/css">
div.background
  {
  width:500px;
  height:250px;
  background:url(klematis.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.

CSS3 and HTML5 Example 2: Image Gallery

The following image gallery is created with CSS, Create two documents, a HTML document and a CSS one. You will also need 4 images for the this Gallery.

In the CSS document put the following:

div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }

  In the HTML document put this:

 <html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
  <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
  <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
  <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
  <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

CSS3 and HTML5 Example 1: Navigation Bar

Having good and easy to navigation is important for any site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.
In this example we build the navigation bar from a standard HTML list.
A navigation bar is basicly a list of link, using <ul> and <li> elements makes perfect sense:

<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a hreft="about.html">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

ul
{
list-style-type:none;
margin:0;
padding:0;
}

The code in the example is the standard code used in both vertical and horizontal navigation bars.

Vertical Navigation Bar

To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:

a
{
display:block;
width:60px;
}

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Both methods work fine, but if you want the links to be the same size, use the floating method.

Inline List Items

One way to build a horziontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:

li
{
display:inline;
}

Floating List Items

In the example above the links have different widths.

For all the links to have equal width, float the <li> elements and specify a width for the <a> elements:

li
{
float:left;
}

a
{
display:block;
width:60px;
}

Advanced CSS3 Tutorial 5: Pseudo Classes

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {property:value;}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes

Links can be displayed in different ways in CSS supporting browsers

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Note: These must be in the above order. Pseudo-class names are not case-sensitive.

Advanced CSS3 Tutorial 4: Align

In CSS, several porperties are used to align elements horizontally.

Center Aligning Using the margin Property

Block elements can be aligned by setting both the left and right margins to "auto".
(margin:auto does not work in Internet Explorer 8 unless !doctype is declared.)

Setting the left and right margins to auto specifies that they should split the available margin equally, The result is a centered element:

.center
{
margin-left:auto;
margin-right:auto;
width 70%;
background-color:#353535;
}

Note: Aligning has no effect if the width is 100%; In IE5 there's a margin handling bug for block elements.

Left and Right Aligning Using the position Property

One method of Aligning elements is to use absolute positioning:

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#353535;
}

Absolute positioned elements are removed from the normal flow, and can overlap elements.

Crossbrowser Compatibility Issues

When aligning elements like this, it's a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.

There is a problem with IE8 and earlier when using the position property. If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Left and Right Aligning Using the float Property

Another method of aligning elements is to use the float property:

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Advanced CSS3 Tutorial 2: Positioning

The CSS positioning properties allow you to position an element. It also allows you to place an element behind another, and specify what should happen when an element's conetent is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are 4 different positioning methods.

Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning
And element with a fixed position is positioned relative to the browser window, it will not move even if the window is scrolled.
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.

Relative Positioning
A relative positioned element is positioned relative to its normal position.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
h2.pos_top
{
position:relative;
top:-50px;
}
Relatively positioned elements are often used as container blocks for absolutely positioned elements.

Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:h2
{
position:absolute;
left:100px;
top:150px;
}
Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.

Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
An element with greater stack order is always in front of an element with a lower stack order.
Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.

Advanced CSS3 1: Grouping Selectors

In CSS you can group selectors together to save time and become more efficient.
For example, before you would have to type out all this:
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

But when you group selectors it becomes this:
h1,h2,p
{
color:green;
}
As you can see this is far more efficent and easier to read.

It is also possible to apply a style for a selector within a selector.
In the following example, One style is specified for all p elements, a second style is specified for all elements with class="marked", and a third is specified for p elements with class="marked":
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

CSS3 Tutorial 8: Styling Lists

In HTML there are 2 kinds of lists, Unordered lists and ordered lists; these can be styled with CSS.
There are multiple list item markers to choose from, the most common are circle and square.
You can also use custom images as list markers, I'll show you that later in this tutorial.

Defining List Item Markers

You use list-style-type to define the type of list item marker:
ul.a {list-style-type: square;}
ul.b {list-style-type: circle;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

These are some examples of values for ordered and unordered lists.

Using an Image as the List Item Marker

To use an image as the List Item Marker use list-style-image:
ul
{
list-style-image: url('image.here');
}

Unfortenuatly this does not show equally in all browsers, In IE and Opera it is displayed a little higher than in Firefox, Chrome and Safari.

This is a Crossbrowser solution:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url('image.here');
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

CSS3 Tutorial 7: Styling Links

Styling links in CSS3 is just as simple as Text. You can style the link, the link after it's visited, the link when it's hovered over and the link when it is clicked. Links can be styled with any CSS property. Here's some examples of Link Styling:

a:link {color:#ff0000;}
a:visited {color:#00ff00;}
a:hover {color:#ff00ff;}
a:active {color:#0000ff;}

When setting the style for the different link states they must be in the above order to work properly.

Text decoration for links is the same as text as well, Here's an example:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Background color for links is the same as anything else in CSS too:

a:link {background-color:#b2ff99;}
a:visited {background-color:#ffff85;}
a:hover {background-color:#ff704d;}
a:active {background-color:#ff704d;}

CSS3 Tutorial 6: Using Custom Fonts

In CSS3 you can specify the use of custom fonts. It doesn't matter if the person viewing the page doesn't have the font installed, You simply host the font online and use @font-face in your CSS to link to it! The code that you use is this:

@font-face {
font-family: [Custom font name];
src: url('[url to font]');
}

You can't use any fonts though, you have to use a special font format, You can generate them at http://cufon.shoqolate.com/generate/. To implement the new font you would use font-family like this:

h1 {
font-family: [CustomFontName], Arial;
}

Arial is there in case someone is using an outdated browser that doesn't support @font-face such as Internet Explorer. .otf format fonts are the most widely supported; It is supported by all browsers except Internet Explorer and Safari on the iPhone, You can use @font-face multiple times in your CSS document so you should also include .eot and .svg versions of the same font in your CSS so it is compatible with all browsers.

CSS3 Tutorial 5: Text styles

With CSS you can also define what color your text will be and its alignment. You can decorate it, so that it is all upper-case or lower-case etc.and you can indent it.

Text Color
In CSS you can use a Hex value, an RGB value or a color name to define the color. To define the color you specify the HTML element you're going to be using and then the color like so:

body {color:blue;}
h1 {color:#FF3030;}h2 {color:rgb(46, 139, 87);}

Text Alignment
The text-align property sets the horizontal alignment of text, The options available are center, left, right or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). Here's an example of some of the available options:

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Text Decoration
The property text-decoration is used to set or remove decorations from text; Its most common use is to remove underlines from links, To do this you would use this code:

a {text-decoration:none;}

You can also decorate text with it:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

It's not recommended to underline text that isn't a link because this can be confusing. 




Text Transformation
This property is used to specify upper and lower case letters in text. It can be used to turn all the text to upper or lower case letters or to just capitalize the first letters of each word. To do this you would use text-transform. Here's an example:

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Text Indention
This is used to specify the indention of the first line of text. You simply put:

p {text-indent:50px;}

You can change the indent to whatever you want.

CSS3 Tutorial 4: Adding a Background

In HTML5 you use CSS to set a background color or image because the tag for this in HTML is no longer supported.

Background Color
To set a background color you simply use the property background-color in the element body like so:

body {
background-color:#000000;
}

It's good form to use Hex color codes to define the color, #000000 would make the background color Black, a list of the most commonly used colors can be found here. A demo of this example can be found here.

Background Image
There are multiple ways to set a Background Image to be repeated; It can be repeated Horizontally, Vertically, In a Set position, Or no repeat at all.

This is the basic code to include a Background image.

body{
background-image:url('img.jpg');
}

For this image to be repeated Horizontally you would add "background-repeat:repeat-x;", It would look like this:

body{
background-img:url('img.jpg');
background-repeat:repeat-x;
}

For no repeat at all the code would be "background-repeat:no-repeat;" and would look like this:

body{
background-img:url('img.jpg');
background-repeat:no-repeat;
}

To make it so it doesn't repeat at all and is fixed in one place you would add "background-position:[position];" to the above code, Here's and example with the image being displayed in the right top.
body{
background-img:url('img.jpg');
background-repeat:no-repeat;
background-position:right top;
}

CSS3 Tutorial 3: Adding style sheets to your HTML document

There are 2 ways of adding Stylesheets to your document, Internal stylesheets and External stylesheets.
The easiest and most efficient way is using external style sheets, which is making your HTML document look at a separate CSS file and using that, With Internal Stylesheets the document reads a stylesheet which is contained in the same document; External stylesheets must end in .css.

Using an external stylesheet
In your <head> section of your document simply put

<link rel="stylesheet" type="text/css" href="stylesheet.css" /> 

You can name your stylesheet whatever you like, the stylesheet document must end in .css

Using internal stylesheets
In your <head> section put

<style type="text/css">
[your css here]
</style>

CSS3 Tutorial 2: id and class Selectors

Along with setting styles for HTML elements, you can also specify your own selectors called id and class.

id
The id selector is used to specify a style for a unique element, the id selector is defined with a #.

#paragraph
{
text-align:left;
color:yellow;
}

You can't start an id name with a number, it won't work in Firefox.

class
The class selector is used to specify the style for a group of elements. The class selector is commonly used on multiple elements, This lets you set a style for many HTML elements with the same class. The class selector is defined with a '.'
In this example, all HTML elements with class="center" will be center-aligned:

.center {text-align:center;}

As with id, don't start a class with a number, this is only supported in Internet Explorer.

CSS3 Tutorial 1: Intro to CSS3

CSS stands for Cascading Style Sheets, it was invented to solve one problem, How to display HTML elements. HTML was never intended to contain tags for formatting a document,  It was intended for basic tags like <h> and <p>, When color attributes were added to HTML 3.2 it caused a nightmare for web developers, Each page had to be edited individually every time you wanted to change the color or font, and thus CSS was born.
The way CSS saves work is the ability to use external style sheets, in laymen's terms: having your CSS document separate from you HTML document.

CSS documents are normally saved in external .css files, editing this file allows you to change all your pages at once.

CSS Syntax
A CSS rule has 2 main parts, the selector and the declaration, Here's an example:

h1 {
       color:red;
       font-size:14px;
     }

 The selector is usually the HTML element you want to style. Each declaration consists of a property and a value, The property is the style attribute you want to change and each property has a value.

To add comments to CSS code you use "/*" to open the comment and "*/" to close it.