Sunday, September 11, 2011

Short break

I'm going to be taking a short break from blogging.

Catch you guys later.

Friday, September 9, 2011

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

Thursday, September 8, 2011

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.


Wednesday, September 7, 2011

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 */
}


Tuesday, September 6, 2011

Advanced CSS3 Tutorial 9: 2D Transforms


A transform is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.

Support

Internet Explorer 9 requires the prefix -ms-.
Firefox requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Opera requires the prefix -o-.

2D Transforms

The translate() Method
With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.

The rotate() Method

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

The value rotate(30deg) rotates the element clockwise 30 degrees.

The scale() Method

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

The value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.

The skew() Method

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

The matrix() Method
The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

Monday, September 5, 2011

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

Sunday, September 4, 2011

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

Friday, September 2, 2011

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>