CSS3 innovations

On some blogs I've discovered that CSS3 is already in use. Yes, even I used CSS3 on Traumfinsternis, but only partially, because some functions are not yet fully supported by the most popular browsers.

First, a few general facts:

What is CSS3?

The Cascading Style Sheets in version 3 are in development as the successor of CSS2 since 2000. CSS3 standards is in contrast to CSS 1.0, 2.0 and 2.1 constructed modularly, that means, partitions will be developed independently of others with their own version of steps.

When is CSS3 officially released?

It is generally known that even the "old" CSS standards partly still not interpreted correctly by some browsers or are not fully supported. After the first appointments were scheduled and canceled again, there is currently no exact date, when CSS3 should be the official W3C recommendation. The World Wide Web Consortium (W3C) is by the way the committee for the standardization of the techniques in World Wide Web. This includes, inter alia, HTML, XHTML, XML, CSS and SVG.

Here is the overview of some new features in CSS3:

Click on an image to scroll to the content.

CSS3 Fonts

I can still remember a time where website owners have inserted images as a heading, because their wanted font was not a standard font, and then there was no other way to display it properly on any PC. Finally the visitors had to install the font, too.

With CSS3 you can now easily embed the font, it is displayed regardless of the font installation on the PC and you need no pictures any more, what will save you a lot of work. Only you should be careful regarding the browser support. Old browsers can not interpret the command. The correct font formats for the browser must be involved, because they sometimes require different formats to view this font. Are formats missing, then the font is not displayed in some browsers.

Browser support

All examples in this article are only visible with a supportive browsers.

Format support

The following font formats are supported by the browsers:

• Internet Explorer:
  • Embedded OpenType (.eot)
  • WOFF (.woff) (since IE9)
• Mozilla Firefox:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF (.woff) (since Firefox 3.6)
• Opera:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SVG (.svg)
• Google Chrome:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF (.woff) (since version 6)
• Safari/Webkit:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
• SafariMobile (iPhone/iPad):
  • only SVG Fonts (.svg) until iOS 4.1
  • TrueType/OpenType (.ttf) since iOS 4.2

If you are downloading a font, then there are certainly not all formats available. On fontsquirrel.com/fontface/generator there is a useful font generator in which you can upload ​​your font, eg "Miama.ttf", which converts subsequently this font in other formats, e.g. .eot, .woff and .svg. If you upload for example an .otf font, then it also generate the format .ttf.
Select the function "EXPERT... (You decide how best to optimize your fonts.)" at the generator, so you can activate all formats in the check box. Then check the "agreement" and then download your font package. Then just unzip, upload and embed it into CSS.

The syntax

    @font-face {
      font-family: 'NameOfTheFont';
      src: url('FontFilePath.format');
    }
    @font-face {
      font-family: 'NameOfTheFont';
      src: url('FontBoldFilePath.format');
      font-weight: bold;
    }
   

You have to insert every typeface separately and specify to what it is (e.g. bold). At font-family the name of the font must be specified and at src the source. In the url you can specify the relative path of your font file.

Example with the Font Squirrel Generator

    @font-face {
    font-family: 'MiamaRegular';
    src: url('fonts/miama-webfont.eot');
    src: url('fonts/miama-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/miama-webfont.woff') format('woff'),
         url('fonts/miama-webfont.ttf') format('truetype'),
         url('fonts/miama-webfont.svgz#MiamaRegular') format('svg'),
         url('fonts/miama-webfont.svg#MiamaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    .text {
      font-family: Miama;
      font-size: 32px;
    }
   

CSS3 Rounded Corners

"Round Corners" as they are called in normal usage. On my blog you can see almost exclusively rounded corners with CSS3.

For a time, you had in addition to the normal "border-radius" the command with the -moz prefix for the Firefox browser and the -webkit prefix for the browser Chrome and Safari. Otherwise, they did not interpret the roundings. But now they support the features without any problems!

    .box {
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
    }
   

Browser support

All examples in this article are only visible with a supportive browsers.

The syntax

    border-*-*-radius: NumberOneWithUnit NumberTwoWithUnit;
   

Where the asterisks are, there is specified which "corner" should be rounded, e.g. top right or bottom left. First, the vertical position is specified, up or down (top or bottom) and next follows the statement in the horizontal, left or right. If you write only "border-radius", then you define all four corners at the same time. The "NumberOneWithUnit" indicates the degree of curvature in the x-axis and the "NumberOneWithUnit" the degree of curvature in the y-axis. Do you write only one number with unit, then the corner is rounded off the same in both axes.

Example 1

    .rounded-corners-one {
      background: #EBEAE8;
      border-top-left-radius: 20px 50px;
    }
   

x-axis: 20px
y-axis: 50px

Example 2

    .rounded-corners-two {
      background: #EBEAE8;
      border-top-left-radius: 50px;
    }
   

x-axis: 50px
y-axis: 50px

Example 3

    .rounded-corners-three {
      background: #EBEAE8;
      border-top-left-radius: 90px 40px;
    }
   

x-axis: 90px
y-axis: 40px

Example 4

    .rounded-corners-four {
      background: #EBEAE8;
      border-top-left-radius: 10px;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 50px;
    }
   

Example 4: shortened form

By typing the amount of curve consecutively, you can respond in a row all four corners simultaneously.
This order must be followed:
top left, top right, bottom right, bottom left

    .rounded-corners-four-short {
      background: #EBEAE8;
      border-radius: 10px 50px 10px 50px;
    }
   

Alternative shorthand notation

If you want to specify all the corners and the amount of curve in the x-and y-axis in one line, then the following notation is suggested. All numbers before the slash (/) are the information in the x-axis in the known order (see above). The numbers after the slash applies to the y-axis in the known order (see above).

    .rounded-corners-four-short-alt {
      background: #EBEAE8;
      border-radius: 50px 20px 10px 100px / 10px 80px 60px 40px;
    }
   

CSS3 Box Shadow

Also shadow of box elements I added to my blog via CSS.

Browser support

All examples in this article are only visible with a supportive browsers.

The syntax

    box-shadow: xPosition yPosition SoftnessR SpreadR Color;
   

The x- and yPosition indicate where the shadow in the x-and y-axis should be, here negative values ​​are also allowed. The optional SoftnessR(adius) specifies how blurred, how soft the shadow should be. The optional SpreadR(adius) determines the spread of the shadow, the default value is 0, so the shadow is the same size as the SoftnessRadius.

Example 1

    .shadow-one {
      box-shadow: -5px -5px #666;
    }
   

Example 2

    .shadow-two {
      box-shadow: 3px 6px 10px #999;
    }
   

Example 3

    .shadow-three {
      box-shadow: 3px 6px 10px 3px #999;
    }
   

Example 4

    .shadow-four {
      box-shadow: 0px 3px 1px #999;
    }
   

Inner shadow

    .inner-shadow {
      box-shadow: inset 3px 6px 10px #999;
    }
   

Inner shadow, alternative

    .inner-shadow-alt {
      box-shadow: inset 0px 0px 8px #999;
    }
   

CSS3 Text Shadow

With a text-shadow can be achieved many different effects.

Browser support

All examples in this article are only visible with a supportive browsers.

The syntax

    text-shadow: xPosition yPosition SoftnessR Color;
   

The x- and yPosition specify where the text-shadow in the x-and y-axis should be, here negative values ​​are also allowed. The SoftnessR(adius) specifies how blurred, how soft the shadow should be.

Example 1: Soft shadow

    .textshadow-one {
      text-shadow: 5px 5px 5px #aaa;
    }
   

Example 1: Hard shadow

    .textshadow-one {
      text-shadow: 1px 2px 0 #ccc;
    }
   

Example 2: Several shadows

    .textshadow-two {
      text-shadow: 5px 5px 4px #ccc,
                   -5px -10px 8px #ff0,
                   15px 7px 3px #f0f;
    }
   

Example 3: contour

    .textshadow-three {
      text-shadow: 1px 0 0 #000,
                   -1px 0 0 #000,
                   0 1px 0 #000,
                   0 -1px 0 #000;
    }
   

Example 4: glow

    .textshadow-four {
      text-shadow: 0 0 4px #fff,
                   0 -5px 4px #ff3,
                   2px -10px 6px #fd3,
                   -2px -15px 11px #f80,
                   2px -25px 18px #f20;
    }
   

CSS3 Background Size

By CSS in version 3 you can now specify the background image size. Until then, you could only affect the images in size that have been placed by img tag. The background images you could only insert or omit.

Browser support

All examples in this article are only visible with a supportive browsers.

The syntax

    background-size: xWidthWithUnit yHeightWithUnit;
   

The syntax is very simple. In the xWidthWithUnit you enter the width of the background image with the corresponding unit. In yHeightWithUnit the height.
For the Firefox 3.6 is still needed the prefix -moz- to make it work.

Example 1

    .mybackground {
      width: 250px;
      height: 80px;
      background: url(../images/kasten-bg.jpg);
    }
   

    .mybackground-size {
      background: url(../images/kasten-bg.jpg);
      background-size: 90% 10%;
    }
   

Example 2

    .mybackground-size2 {
      width: 200px;
      height: 100px;
      background: url(../images/kasten-bg.jpg);
      background-size: 200px 100px;
    }
   

CSS3 Background Origin

Also, the background start position can be set. Previously it was only possible for example to give a div a background image, which then fills the entire Div. Now may also be determined whether the background image should note an edge (border) or padding (padding).

Browser support

All examples in this article are only visible with a supportive browsers.

The syntax

    background-origin: content-box OR padding-box OR border-box;
   

For example, after a div was styled, background image, border and padding has been set, then comes Background-Origin. There are the settings content-box, padding-box or border-box. Depending on where the background image should "start", so where basically the zero point is, you use one of these three settings. In the following graphs should be explained what is meant with these settings:

Example 1

    .background-start-one {
      width: 200px;
      height: 30px;
      border: 10px solid #999;
      padding: 15px;
      background: url(../images/trademark.png);
      background-repeat: no-repeat;
      background-origin: padding-box;
    }
   

Example 2

    .background-start-two {
      width: 200px;
      height: 30px;
      border: 10px solid #999;
      padding: 15px;
      background: url(../images/trademark.png);
      background-repeat: no-repeat;
      background-origin: content-box;
    }
   

Example 3

    .background-start-three {
      width: 200px;
      height: 30px;
      border: 10px solid #999;
      padding: 15px;
      background: url(../images/trademark.png);
      background-repeat: no-repeat;
      background-origin: border-box;
    }
   

CSS3 Multiple Columns

Creating multi-column content is now with CSS3 also quite simple. If a text contains too many characters in a line, then it can quickly become tiring to read it. Before you had to split the text with cumbersome manually set divs and let the text containers flow side by side with the command "float". Now you can simply put the entire text around one div that says that this container has to contain, for example, two columns. Then the text is automatically split in the right place and it continue again right next to it.

Browser support

All examples in this article are only visible with a supportive browsers.

The syntax

    column-count: 3;
    -moz-column-count: 3; /* with prefix for Firefox */
    -webkit-column-count: 3; /* with prefix for Chrome and Safari */
   

The command "column-count" specifies how many columns to should give. Thus it is also displayed in Firefox, Chrome and Safari, the corresponding prefix must be prepended here:
-moz-column-count only for only Mozilla Firefox and
-webkit-column-count for only Google Chrome and Sarafi. The remaining browsers that interpret the command, will be addressed with column-count.

The column gap

    column-gap: 40px;
    -moz-column-gap: 40px; /* Firefox */
    -webkit-column-gap: 40px; /* Chrome and Safari */
   

The spacing between the columns can be defined with "column-gap". The spacing is normally measured in pixels. Again here are the same rules for Firefox, Chrome and Safari as described above.

The column gap-styling

    column-rule: 1px dotted #999;
    -moz-column-rule: 1px dotted #999; /* Firefox */
    -webkit-column-rule: 1px dotted #999; /* Chrome and Safari */
   

"column-rule" is a shorthand notation for column-rule-width, column-rule-style and column-rule-color. Thus, the dividing line between columns is described. First, the size in pixels, then the style (e.g. solid, dotted, dashed, outset etc.), and finally the color. Again for Firefox, Chrome and Safari the same as described above.

Example 1

    .cols_example-one {
      column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-gap: 40px;
      -moz-column-gap: 40px;
      -webkit-column-gap: 40px;
      column-rule: 1px dotted #999;
      -moz-column-rule: 1px dotted #999;
      -webkit-column-rule: 1px dotted #999;
    }
   

Example 2

    .cols_example-two {
      column-count: 4;
      -moz-column-count: 4;
      -webkit-column-count: 4;
      column-gap: 20px;
      -moz-column-gap: 20px;
      -webkit-column-gap: 20px;
      column-rule: 2px outset #eee;
      -moz-column-rule: 2px outset #eee;
      -webkit-column-rule: 2px outset #eee;
    }
   

CSS3 Transitions

A picture should change slowly and softly in a different picture on mouseover. The background color of a link is slow and soft fade in a different color at Hover. A box should increase slowly dynamically when you go over it with the mouse. And much more. With CSS3 Transitions, it is now possible to add an effect without Flash animations or javascript, if you want to switch from one style to another. This means: for example it can slow gradually be changed from one effect to another during hover — without sharp transitions.

Browser support

All examples in this article are only visible with a supportive browsers.

The syntax

    transition-property: CSSProperty;
    transition-duration: TimeInSeconds;
    transition-timing-function: VelocityCurve;
    transition-delay: StartInSeconds;
   

transition-property (CSSProperty) must be specified so that you can define which property to change gradually, e.g. "width" or "all" (for everything).
Subsequently, the time indication (transition-duration), the "TimeInSeconds", follows: in how many seconds will it all happen? This setting is made in seconds, so for example, "3s". With transition-timing-function can be specified, in which velocity curve all things be done, for example, should the effect starts slow and finishs then quickly (more on this below).
And transition-delay specifies how many seconds to start the effect.

Shorthand

    transition: Property Time VelocityCurve Start;
   

Values ​​used:

    transition: all 0.5s ease-in-out;
   

With the short notation it saves you a lot of lines. I think the example is self-explanatory.

transition-timing-function — possible values

• linear — constant speed
• ease — slow start, then faster and slower again at the end
• ease-in — slow start
• ease-out — slow end
• ease-in-out — slow start and slow end
• cubic-bezier(n,n,n,n) — define speed yourself, numbers from 0 to 1, Example: cubic-bezier(0.25,0.1,0.25,1)

Prefix for browser

To make this function works well in most browsers, you have to work with each prefix of the browser.

    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
   

Here the appropriate prefix must be preceded by:
-moz-transition for Mozilla Firefox only,
-webkit-transition for Google Chrome and Sarafi and
-o-transition only for Opera. The remaining browsers that interpret the command, will be addressed with transition.

Handling

transitions must be assigned to a regular class. In addition, for example, must a hover effect be defined where all the properties are indicated that you want to change at hover.

Example 1

    .trans-one {
      background: #EBEAE8;
      color: #999;
      transition: all 3s ease-in-out;
      -moz-transition: all 3s ease-in-out;
      -webkit-transition: all 3s ease-in-out;
      -o-transition: all 3s ease-in-out;
    }
    .trans-one:hover {
      background: #333;
      color: #FFF;
    }
   

Example 2

    .trans-two {
      width: 250px;
      height: 80px;
      transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -webkit-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
    }
    .trans-two:hover {
      width: 400px;
      height: 150px;
    }
   

Example 3 - with CSS3 2D Transforms

    .trans-three {
      width: 250px;
      height: 80px;
      transition: all 0.7s ease-in-out;
      -moz-transition: all 0.7s ease-in-out;
      -webkit-transition: all 0.7s ease-in-out;
      -o-transition: all 0.7s ease-in-out;
    }
    .trans-three:hover {
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
    }
   

CSS3 2D Transforms

With CSS3 you can now transform objects. Either you can position, scale, rotate, or twist them differently.

Browser support

All examples in this article are only visible with a supportive browsers.

The syntax

    transform: Methode;
    -ms-transform: Methode; /* Internet Explorer 9 */
    -moz-transform: Methode; /* Firefox */
    -webkit-transform: Methode; /* Safari and Chrome */
    -o-transform: Methode; /* Opera */
   

The syntax is actually quite simple. The various methods are included below. It should be noted that the corresponding prefix must be prepended to represent it in the major browsers:
-ms-transform for Internet Explorer 9 only
-moz-transform for to Mozilla Firefox only,
-webkit-transform for Google Chrome and Sarafi and
-o-transform for Opera only. The remaining browsers that interpret the command, will be addressed with transform.

The methods

translate()

    transform: translate(50px,20px);
    -ms-transform: translate(50px,20px);
    -moz-transform: translate(50px,20px);
    -webkit-transform: translate(50px,20px);
    -o-transform: translate(50px,20px);
   

translate() positions, for example, the div to the appropriate place. The data apply to left (x-axis) and top (y-axis). In the example, the object is positioned 50px from the left and 20px from the top.

rotate()

    transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
   

rotate() can rotate the object, it is then displayed rotated. The number in the brackets is the number of degrees.

scale()

    transform: scale(2,5);
    -ms-transform: scale(2,5);
    -moz-transform: scale(2,5);
    -webkit-transform: scale(2,5);
    -o-transform: scale(2,5);
   

scale() scales the object, so it enlarges. The first number in the brackets represents the width, the second for the height. The number represents the factor by which it is increased, the 2 is then for the 2-fold enlargement of the original height.

skew()

    transform: skew(20deg,40deg);
    -ms-transform: skew(20deg,40deg);
    -moz-transform: skew(20deg,40deg);
    -webkit-transform: skew(20deg,40deg);
    -o-transform: skew(20deg,40deg);
   

skew() twists the object, it is then like watching from a different angle of view. The data in the brackets are also the degree numbers here, wherein the first indication of the rotation is in the x-axis and the other for rotation in the y-axis.

matrix()

    transform:matrix(0.3,0.8,-0.5,0.9,0,0);
    -ms-transform:matrix(0.3,0.8,-0.5,0.9,0,0);
    -moz-transform:matrix(0.3,0.8,-0.5,0.9,0,0);
    -webkit-transform:matrix(0.3,0.8,-0.5,0.9,0,0);
    -o-transform:matrix(0.3,0.8,-0.5,0.9,0,0);
   

matrix() combines all 2D transformations in one. There are 6 parameters that include mathematical functions that allow you to rotate elements [rotate()] to scale [scale()] to position [translate()] and twist [skew()].

Example 1

    .object-one {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform: translate(100px,20px);
      -ms-transform: translate(100px,20px);
      -moz-transform: translate(100px,20px);
      -webkit-transform: translate(100px,20px);
      -o-transform: translate(100px,20px);
    }
   

Example 2

    .object-two {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      -moz-transform: rotate(10deg);
      -webkit-transform: rotate(10deg);
      -o-transform: rotate(10deg);
    }
   

Example 3

    .object-three {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform: scale(1.5,3);
      -ms-transform: scale(1.5,3);
      -moz-transform: scale(1.5,3);
      -webkit-transform: scale(1.5,3);
      -o-transform: scale(1.5,3);
    }
   

Example 4

    .object-four {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform: skew(20deg,10deg);
      -ms-transform: skew(20deg,10deg);
      -moz-transform: skew(20deg,10deg);
      -webkit-transform: skew(20deg,10deg);
      -o-transform: skew(20deg,10deg);
    }
   

Example 5

    .object-five {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform:matrix(1.4,-0.2,1.6,1,0,0);
      -ms-transform:matrix(1.4,-0.2,1.6,1,0,0);
      -moz-transform:matrix(1.4,-0.2,1.6,1,0,0);
      -webkit-transform:matrix(1.4,-0.2,1.6,1,0,0);
      -o-transform:matrix(1.4,-0.2,1.6,1,0,0);
    }
   

Conclusion

I hope I could give you a small and understandable overview of the most important new features in CSS3!

If mistakes should have crept in, you are welcome to inform me here via comment!

Sources

1. w3schools.com
2. the-art-of-web.com
3. css3.info
4. ich-lerne-css.de
5. webfonts.info
6. fontsquirrel.com

Related to "CSS3 innovations":

• Simply go to Responsive Web Design
• Education in digital media designer
• The thing about the WWW