All Ping

CSS3 Transition is one of the great additions in CSS3. It allows us to apply transitional changing effects to CSS rules. If you are already familiar with the syntax, you will see that we need to specify the timing function or the transition speed.

There are four predefined timing functions we can use, they are ease, ease-in, ease-out, ease-in-out and linear.

Bezier Curve

The Bezier curve is a commonly used curve model in computer graphics. If you have been working with Vector Graphic Editors like Adobe Illustrator or Inkscape, you will find this curve model when you are drawing with the pen tool. This curve is formed with four points as illustrated in the following figure:

Thus, in CSS3 Transition, the cubic-bezier function is defined within this syntax:

It is worth noting that each point in this Cubic-bezier only allows the values from 0 to 1. Alright, let’s return to the timing functions in CSS3 transition we have mentioned earlier and see how they are actually formed in the Cubic-bezier curve.

ease, this is the default timing function in CSS3 Transition and in cubic-bezier format it can be translated as follows:

linear, using linear timing function, the speed will be steady from start to end and in cubic-bezier format it is translated, as follows:

ease-in, using this timing function, the animation will start slowly and then gain more acceleration and get steady until the end of the duration. In cubic-bezier format it can be translated into:

ease-out, this timing function simply does the opposite to ease-in. The speed will start steady and fast, then just about the end of duration it will slow down. In the cubic-bezier format, this can be translated into:

ease-in-out, this timing function is simply a combination between ease-in and ease-out, the animation starts slow, accelerate in the middle, then ends slow. In cubic-bezier this can be translated, as follows.

Creating Custom Speed

Using Cubic-bezier function, we are able to create custom speed. But one of the main constraint of defining animation speed with Cubic-bezier function is that it is not that intuitive, and we cannot see instantly how the speed is moving. Luckily, there is one tool that we can use to help us out, named cubic-bezier.com.

This tool is created by Lea Verou, also known as the CSS Guru. It has the Bezier curve that you can move around, and it will instantly generate the values for you. We can also show the transition movement and compare the speed.

This example shows how we can utilize cubic-bezier function to set a rocket speed

Although we are currently leaving in a digital era where everything can be accessed easily, there are many people who still prefer reading long text on paper. There is a chance that a number of your users will print out your content to read offline.

The capability of styling or porting content from web to print has existed for years. We can do this with the @media rule within the stylesheet, as follows:

          view plaincopy to clipboardprint

1. @media print { 
2. /* Style rules */ 
3. } 

There are several properties that allow us to format our web content when porting to print, and we are going to discuss one of it: the Page Break.

What It Does?

If you have been working with word processors like Microsoft Word and Pages, you should be familiar with the Page Break menu; this allows you to break your content to the next page.

This module does that; allowing you to control on how your web content should be split, page after page.

Using Page Break

For demonstration purposes, I have created a dummy page that I’m going to print. Here, I have found an unstrategic break, as you can see below.

It would look better if the heading and that orphan starts at the next page.

To do this, we can use the page-break-after property and set the value to always to force the following element to “break” to the next page.

view plaincopy to clipboardprint?

1. .page-break { 
2. page-break-after: always; 
3. } 

Then, you can either create a new element with the class in between the elements, or assign class in the preceding element like so.

view plain copy to clipboard  print?

1. <p class="page-break">With the <strong>Eraser</strong> feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t. </p> 
2. 
   
3. <h3>The phone to travel With</h3> 
4. <p><strong>S Translator </strong>is going to be a great tool for your travels as ... </p> 

Now, you should find the heading and the orphan at the following page.

Widows And Orphans

The method above can be tedious if you have very large amounts of content. So, instead of forcing the content to break, it would be better to set the minimum threshold of the widows and orphans.

In typography, widows and orphans are the unfortunate names used to refer to the left over words or short lines that seem to have been abandoned by the rest of the paragraph on another page.

By using the orphans and widows property, we can specify the threshold. Given the following code example, we can specify at least three lines remain at the bottom or at the beginning of paragraphs where page breaks occur.

view plain copy to clipboard print?

1. p { 
2. orphans: 3; 
3. widows: 3; 
4. } 

Further Resource

We have discussed the basic of controlling page break in print media for your web content, and we hope that this encourages you to consider print styles in your website so your content will look good both on screen and on paper.

For more, you can head over to the following reference.

• CSS Paged Media Module Level 3 — W3C