MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns

In this article we will continue our discuss on css3 modules. We will talk about Fonts, Transformation, Transition and Multiple Columns.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Exploring the fancy new facilitating features of CSS3, now we are talk about fonts, transformations, transitions and multiple columns.

Fonts

We are now no more limited to the available fonts. Write down your font and attach it to your application. CSS3 made it flexible to make use of your own customized fonts. This feature is supported by all browsers so don't worry for browser compatibility issue any more.

To use a new font you will do two steps:

  • Define new font rule by using @font-face
  • Inside it name your new font family and specify the url of the ttf file.

Now your font is on the system, just use it by the specified name anywhere.

In the following demo we will explain the concept:

Listing 1: Font usage

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            @font-face
            {
                font-family: font;
                src: url('Sansation_Light.ttf')
            }
            @font-face
            {
                font-family: font1;
                src: url('Sansation_Bold.ttf')
            }

            @font-face
            {
                font-family: font2;
                src: url('Sansation_Regular.ttf')
            }
            div
            {
                font-family:font;
            }
            p{

                font-family: font1;
            }
            span{
                font-family: font2;
            }
        </style>
    </head>
    <body>
        <div>
            New Font Family Created By Me
        </div>
        <p> It's Bold</p>
        <span>
            It's Regular
        </span>
    </body>
</html>
Font usage

Figure 1: Font usage

Additional properties can be used in the newly created font like making it bold by using font-weight property, set size using font-size property , etc.

Transformation

Previously, making transformation was done using JavaScript or one of its libraries.

But now it's easier since transformation is now implicitly supported in CSS3, so no need to use APIs again.

In general, transformation means polymorphism in concept. Although it's supported by all browsers, but it's implemented differently from one browser to another which must be put in consideration.

Now changing shape, position and size is not issue:

2D transformation:

In 2D transformation, translation, rotation, scaling, skewing “change shape” can be applied, let's see how to do that in details.

Rotate:

Rotation is done using the method: rotate (angle) with the rotation angle parameter.

Listing 2: Transformation

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            img
            {
    transform:rotate(50deg);
   -moz-transform:rotate(50deg); 
/* Firefox */ 
 -webkit-transform:rotate(50deg);
 /* Chrome */
            }
        </style>
    </head>
    <body>
        <img src="css.png"/>
    </body>
</html>
Transformation

Figure 2: Transformation

Translation

The translation provide re-positioning, changing along X and Y axis.

The following demo will explain the use of Translation:

Listing 3: Translation

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            img
            {
                width:100px;

                height:75px;
            }
            img#img
            {
                transform:translate(50px,100px);
                -moz-transform:translate(50px,100px); /* Firefox */
                -webkit-transform:translate(50px,100px); /* Safari and Chrome */

            }
        </style>
    </head>
    <body>
        Original Image
        <img src="css.png"/>

        <img src="css.png" id="img"/>

    </body>
</html>

Figure 3: Translation

Rotation

Using rotate() method to change the direction of an element clockwise or anticlockwise.

Listing 4: Rotation

<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            img
            {
                width:100px;
                height:105px;
                transform: rotate(-30deg);
                -moz-transform:rotate(-30deg); /* Firefox */
                -webkit-transform:rotate(-30deg); /* Safari and Chrome */
            }
        </style>
    </head>
    <body>
        <img src="css.png"/>
    </body>
</html>
Rotation

Figure 4: Rotation

Scaling

Using scale method to resize the shape depending on x-axis and y-axis given.

Listing 5: Scaling

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            img
            {
                width:100px;
                height:105px;
                transform: scale(3,2);
                -moz-transform:scale(3,2); /* Firefox */
                -webkit-transform:scale(3,2); /* Safari and Chrome */
            }
        </style>
    </head>
    <body>
        <img src="css.png"/>
    </body>
</html>

Skewing

Using skew() method to skew shape to certain angle.

Listing 6: Skew

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            img#i
            {
                width:100px;
                height:105px;
                transform: skew(10deg,20deg);
                -moz-transform: skew(10deg,50deg); /* Firefox */
                -webkit-transform:skew(30deg,50deg); /* Safari and Chrome */
            }

        </style>
    </head>
    <body>

        <img src="css.png" id="i" alt=”css JPEG”/>
        Original Image <img src="css.png" alt=”css PNG”/>
    </body>
</html>
Skew

Figure 5: Skew

3D transformation:

Different and more interesting, imagine you are watching a shape from all angles and directions in actual world, it's not good at all to see the world 2D. Although it's very interesting feature but it's not yet supported by IE or Opera, but it is working under Firefox, Chrome and Safari.

Transformation methods are applied to X, Y axis only in 3D transformation. More features are yet to be implemented.

X-Rotation:

Using rotateX (angle) will rotate the element in x direction according to the given angle.

Listing 7: X rotation

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            img
            {
                width:500px;
                height:700px;

            }
            img#im
            {
                transform:rotateX(120deg);
                -webkit-transform:rotateX(80deg); /* Safari and Chrome */
                -moz-transform:rotateX(120deg); /* Firefox */
            }
        </style>
    </head>
    <body>

        <img src="im.png"/>
        <img src="im.png" id="im"/>

    </body>
</html>
X rotate

Figure 6: X rotate

Y-Rotation:

Using rotateY (angle), will rotate the element in y direction according to the given angle.

Listing 8: Y rotation

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            img
            {
                width:500px;
                height:700px;

            }
            img#im
            {
                transform:rotateY(85deg);
                -webkit-transform:rotateY(85deg); /* Safari and Chrome */
                -moz-transform:rotateY(85deg); /* Firefox */
            }
        </style>
    </head>
    <body>

        <img src="im.png"/>
        <img src="im.png" id="im"/>

    </body>
</html>
      
Y rotation

Figure 7: Y rotation

Transition:

Do you remember in Power Point when moving from one slide to another slide, some kind of transition rules occurs, to make smooth move to the next slide? Is it available for web? The answer is Yes.

Using APIs? No, Just use CSS3 properties that is very enough.

Transition properties changes state of object on some action occurs like clicking, bluring, hover, etc.

This is very usable in game designing and in creating menus which is opened on hover or clicking.

So, it's easy to change states and attractiveness at the same time. No more code, no more files attached, just few lines are written.

The following demo show how it works:

Listing 9: Transition

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            img
            {
                width:100px;
                height:100px;
                transition:width 2s;
                -moz-transition:width 2s; /* Firefox 4 */
                -webkit-transition:width 2s; /* Safari and Chrome */
            }
            img:hover
            {
                width:300px;
            }
        </style>
    </head>
    <body>

        <img src="css.png" alt=”css png”/>
    </body>
</html>

The previous code applies the translation on hover on image, when mouse enter image zone, it start to expand to reach 300px and when it get out it return back to its original size.

Isn't it interesting to add multiple actions to the same element upon transition??

Just try to add rotation or skewing and see the amazing resulting shape.

Multiple Columns:

Have you tried to write an article or scientific paper in < div > tag?

What about writing them in < table > tag to manage each element?

Okay, not bad solution but will require extra code written.

Here again, CSS3 comes with a new solution to solve such a problem. It easily organizes your article in some columns. It writes it for you properly.

All you need to do is to write down your article in a traditional tag < div >, < p >, etc. Then determine the number of columns you want to divide the article into.

The following demo show up how to use column-count property:

Listing 10: Multiple column

<!DOCTYPE html>
<html>
    <head>
<title>CSS3 Modules: Fonts, Transformation, Transition and Multiple Columns - MrBool Tutorial</title>
        <style>
            .newspaper
            {
                -moz-column-count:3; /* Firefox */
                -webkit-column-count:3; /* Safari and Chrome */
                column-count:3;
            }
        </style>
    </head>
    <body>

        <div class="newspaper">
            Had you tried to write an article or scientific paper in <div> tag?
                What about writing them in <table> tag to manage each element?
                    Okay, not bad solution but will require extra code written .
                    Here again, CSS3 comes with a new solution to solve such a problem.
                    It easily organizes your article in some columns.
                    It writes it for you.
                    All you need to do is to write down your article in a traditional tag  … etc.
                   Determine the number of columns you want to divide the article into.
            </div>
    </body>
</html>
Multiple column

Figure 8: Multiple column

More and more interesting features are being developed everyday for the evolution of modern technology.

Hope you liked the article. See you next time.



My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login