Learn Basic CSS3

LetsDnD.com

i

Table of Contents

Table of Contents .................................................................................................. 0

- Intro - .................................................................................................................. 6

New Look of Borders ............................................................................................. 1

Rounded Borders ............................................................................................... 2

Shadowed Borders ............................................................................................. 3

Image Borders .................................................................................................... 4

Background Controlling ......................................................................................... 6

Background Size Property .................................................................................. 7

Background Origin Property ............................................................................... 8

Multiple Images ................................................................................................. 9

Rainbow Backgrounds ..........................................................................................12

CSS3 Linear Gradients .......................................................................................13

Using Direction Name ............................................................................13

Using Direction Angle ............................................................................15

Using Multiple Colors ............................................................................16

Using Transparency ...............................................................................16

Repeating a linear-gradient ...................................................................17

LetsDnD.com

ii

CSS3 Radial Gradients .......................................................................................18

Shape Parameter ...................................................................................18

Size Parameter ......................................................................................19

Repeating a radial-gradient ...................................................................19

Text Effects ...........................................................................................................21

Text Shadow .....................................................................................................22

Word Wrap .......................................................................................................23

Text Overflow ...................................................................................................24

Word Break .......................................................................................................25

Web Fonts ............................................................................................................27

Different Font Formats .....................................................................................29

Font Face Rule...................................................................................................30

Transformers in 2D ...............................................................................................32

2D Transformation Methods .............................................................................33

Translate Method .............................................................................................33

Rotate Method..................................................................................................34

Scale Method ....................................................................................................35

Skew Method ....................................................................................................35

Matrix Method ..................................................................................................36

Transformers in 3D ...............................................................................................37

The RotateX ......................................................................................................38

The RotateY ......................................................................................................39

The Perspective.................................................................................................39

The Backface Visibility .......................................................................................41

Other 3D Transform Methods ...........................................................................42

With Motion .........................................................................................................44

LetsDnD.com

iii

CSS3 Transitions ................................................................................................45

Multiple effects .................................................................................................46

With Animation ....................................................................................................49

CSS3 Animation Key Frames Rule ......................................................................50

News Paper Columns ...........................................................................................55

Multiple Columns ..............................................................................................57

Interfacing ............................................................................................................60

Resizing .............................................................................................................62

Box Sizing ..........................................................................................................62

Outline Offset ...................................................................................................63

Thank You.............................................................................................................64

LetsDnD.com

iv

LetsDnD.com

v

Learn Basic CSS3

Copyright © 2014 Let’s Design n Develop

All rights reserved. No part of this book may be used or reproduced in any

manner whatsoever without permission from the authors.

http://www.letsdnd.com/

- Intro -

● ● ●

My Styles! My Rules!

My Life!

● ● ●

LetsDnD.com

vii Introduction

CSS3’s Module Concept

CSS3 is the latest standard of Cascading Style Sheet -which people simply

termed as CSS. And CSS3 is completely backward compatible with earlier versions

of CSS. Most important thing that World Wide Web Consortium (W3C) came up

with CSS3 was its module concept.

It emerged because, CSS 2, which was the previous version, had a large

unmanageable single specification defining all of the various features. Therefore

CSS3 is divided into several separate documents called “modules”. Each module

adds new capabilities or make extending the features defined in CSS2, preserving

backward compatibility.

CSS3 specification is still under development by W3C. Due to the

modularization, different modules have different stability and statuses. As of June

2012, there are over fifty CSS modules published. Following are the few of most

important Modules you can see on CSS3.

CSS3

CSS3

Box Model Backgrounds

and Borders

Image Values and Replaced Content

Selectors Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

LetsDnD.com

viii Introduction

In the next few sections we are going to cover up most of those modules with

introducing fascinating tricks to color up your web site. As this book brings you

the advanced concepts in Cascading Style Sheet (CSS) with regard to CSS version

3, before moving on we strongly recommend you to go through all the dummies

work in styling a web page using CSS to freshen up your minds.

Here is a brief introduction what we’re going to do in the next pages.

“You might already know how to add borders with using HTML attribute border in the table element, as well as using CSS property border. You might have added thick borders, thin borders, colored borders and styled borders. But they were all straight lined borders.

How about giving round cornered borders for your HTML element which gives a grandish look? We’re going to teach you how to do that.”

Hurrah!! I add a border

to my HTML table

Yeeks!! Look at that! Why

don’t you use CSS3 and

make it look cooler?

LetsDnD.com

ix Introduction

“You might already know how to add images on a web page. When you needed to add a motion, a transition and transformation in the website, you might have done it using the gif format image.

But now on you do not need gif. We are going to teach you how to add motion, transformation and transition to your web page through a simple code line.”

Yippi!! I create an

animated gif image to

show a blooming flower.

Now I can put it in my

Flowers website

Dah!! What a waste!! It

could’ve easily done with

using CSS3.

LetsDnD.com

x Introduction

“You might already know how to add a background color. But it was always just a single plain color. When you want a rainbowed background you might have done it using a rainbowed background image.

But now on you do not need an image to add a gradient background. We are going to teach you how to do that.”

♫ Rock On!! ♫♪

Hey!! How do I

look?

Boring!!! Look at your

background. So plain and

dull. Why don’t you try

out a rocking gradient

CSS3 background?

LetsDnD.com

xi Introduction

You might already know about texts, fonts and layouts which are necessary concepts that needed for a publication. But do you know about columns like as in the news papers. You might have created columns by using a table.

But now on we do not need tables to fulfill that task. We are going to teach you how add multiple columns on your text.

Don’t you feel like we’ve being advancing now? Hell yes!!! We are not beginners

any more. So be prepared and turned to next page. We have a long journey to go

with CSS3.

Huh!! Who say so?

You can easily do it

with CSS3.

I’m going to create an online

news paper. Gosh!!! This is

really hard. I have to use lots

of tables to create those

columns.

New Look of Borders

● ● ●

Borders are not always straight

lines!

● ● ●

LetsDnD.com

2 Borders

Borders are not always straight lined in web pages. You might have seen on the

web, paragraphs with rounded divisional elements. So how can we do that? We

know how to add borders, but how to make them curved???

Patience!! We are going to teach you that just in a moment. Not only rounded

borders, but also many other cool things that can come up with borders. Here we

go…

Rounded Borders

This technique is used most of the time to highlight a specific content among

other content. Look at the following and see how it highlighted.

Having a straight lined border would make this uncool. But the rounded shape

gives it a super cool presentation. To have this rounded corner we used the

border-radius property other than to the border property which defines the color,

thickness and pattern.

TED (Technology, Entertainment, Design) is a global set of conferences

owned by the private non-profit Sapling Foundation, under the slogan:

“Ideas Worth Spreading”. TED was founded in 1984 as a one-off event.

The annual conference began in 1990, in Monterey, California.

LetsDnD.com

3 Borders

This is the code how it was written.

div{

border-radius: 25px;

}

This is the coolest trick that comes with the CSS3. In previous versions we had

done it using images on four corners. But now on we do not need images to make

rounded borders anymore.

Shadowed Borders

If the element has a box model we can add a shadow into the box. We called it

box shadow. Here is how it looks like.

This is the code how it was written.

div{

box-shadow: 10px 10px 5px #888888;

}

Now on we never need Photoshop or any other image editing tool to make our

web site look cool. We can do all the colorful fantastic things using CSS3 now on.

Check our next trick.

TED (Technology, Entertainment, Design) is a global set of conferences

owned by the private non-profit Sapling Foundation, under the slogan:

“Ideas Worth Spreading”. TED was founded in 1984 as a one-off event.

The annual conference began in 1990, in Monterey, California.

LetsDnD.com

4 Borders

Image Borders

Borders are not always lines. We can flow an image on a border line.

This is our original border image. See how we used this image to flow around the

border of a division tag.

LetsDnD.com

5 Borders

Following is the code snippet which was used to have this patternized border.

#round{

border-image: url(border.png) 30 30 round;

}

#stretch{

border-image: url(border.png) 30 30 stretch;

}

By varying the property values of border-image property can get wonderful

effects you never knew.

In the next section we are looking at how

CSS3 allows a greater control over the

background element.

As you have seen, now on you do not need the

help of Mr. Photoshop to make rounded borders,

shadowed boxes, or pattenized borders.

This is cool HA!!

You know, I hate

to use image

editors just to do

only this kind of lil

stuff.

Background Controlling

● ● ●

Allow your background to control

You

● ● ●

LetsDnD.com

7 Background - Image

Background of a web page can be either a color or an image. In this section we

are look at the image perspective and the next section we are looking at it in

colors perspective.

CSS3 contains several new background properties, which allows greater control of

the background element. We are looking at each of them now.

Background Size Property

The background-size property specifies the size of the background image. So now

on, whatever the actual image size is, you can define the size of the image it

should display. With this property we can use the same image in different

contexts, without uploading many images with many sizes. This can be either a

percentage or a pixel value.

div{

background-size: 280px 60px;

}

This is our original image.

See how we can have the same image with different sizes. We just need to upload

only this original image to the server.

LetsDnD.com


Background Origin Property

To learn about this you should need to know about box model concept in HTML

elements. Following image describes it.

This shows the box model of “WHAT’S NEXT” which is a <h1> HTML element.

Blue colored area, we called it content box.

Green colored area, we called it padding box.

Cream colored area, we called it border box.

LetsDnD.com


So we can define, in which box we need to display our background image. In the

content box, in the border box or in the padding box. Most of the time people put

there in the content box. This is the code snippet to define that.

.div1 { background-origin: border-box;

}

.div2 { background-origin: padding-box;

}

.div3 { background-origin: content-box;

}

Multiple Images

This techniques is most useful when having transparent gif, or png format images.

What we are going to do now is adding an image on another image. So through

the transparent areas, we can see the behind image.

Code snippet goes like this.

div{

background: url(spiderman.png), url(building.jpg);

}

We have this image which is transparent. And we used it in the front. So that’s

why we put the URL of this image as the first value of background property.

LetsDnD.com


We are going to use this image as the back. So it doesn’t need to be transparent.

And that’s why its URL is the second value of the property.

You already know the background property and the way to add an image. But

with CSS3 you can add multiple images, not only one. See now how it looks like.

We swear, this image is not Photoshoped. Seriously!! It is overlapping of two

images through CSS3.

LetsDnD.com


Don’t forget we are not finished yet in the subject of

backgrounds. Remember what we have promised in the

beginning of this section. As we promised the next section is

purely for background colors in different perspectives.

Wow!! I believe CSS3 is kinda cool guy

bringing up many many unimaginable

things on the HTML web pages.

Isn’t this really cool! We do not need

Photoshop anymore.

We can do

insanely

awesome

stuff using

just images.

Rainbow Backgrounds

● ● ●

Can you sing a Rainbow?

● ● ●

LetsDnD.com

13 Background - Color

If you can remember we have talked about the usage of images in the background

in the previous section. Now we are going to describe about the coloring

techniques to make your background looks cool. So what we are actually going to

do is learning to make a rainbow colored background. Just not a solid colored as

we know how to do that already.

CSS3 gradients let you display smooth transitions between two or more specified

colors. So now on you do not need Photoshop to create gradient images for your

background, because CSS3 can support to make just the same thing in a simple

code. This grants you to reduce the download time and the bandwidth usage of

the web page. And the other advantage is, elements with gradients look better

when zoomed, because the gradient is generated by the browser.

There are two ways to add gradients in CSS3.

CSS3 Linear Gradients

Here is the syntax of defining a linear gradient background.

background: linear-gradient(<direction>, <color-stop1>, <color-stop2>, …, <last-color>);

Using Direction Name

To create a linear gradient you must define at least two color stops. Also you can

add more than two color stops too. Color stops are the colors you want to render

• (goes down/up/left/right/diagonally)

Linear Gradients

• (defined by their center)

Radial Gradients

LetsDnD.com


smooth transitions among. You can also set a starting point and a direction (or an

angle) along with the gradient effect. You can use direction names such as to

bottom, to top, to right, to left, to bottom right, to bottom left, to top right, to top

left with just a two color gradient.

This is the default direction which is top to bottom that do not need the direction

name.

#my_grad1 {

background: linear-gradient(red, blue);

}

Let’s look at the directions CSS3 supports.

#my_grad2 { background: linear-gradient(to right, red, blue);

}

Special thing about the diagonal direction is you can make a gradient diagonally

by specifying both the horizontal and vertical starting positions. If you want to

This linear gradient starts at the top. It starts red, transitioning

to blue.

This linear gradient starts at the left. It starts red, transitioning

to blue.

LetsDnD.com


flow your first color starting from top left and end color transition to bottom

right, you must mention the “to bottom right” direction value.

#my_grad3 { background: linear-gradient(to bottom right, red, blue);

}

Using Direction Angle

If you want more control over the direction of the gradient, you can define an

angle, instead of the predefined direction names. The angle is specified as an

angle between a horizontal line and the gradient line, going counter-clockwise. In

other words, 0 degree angle creates a bottom to top gradient, while 90 degree

angle generates a left to right gradient.

This linear gradient starts at top left. It starts red, transitioning

to blue.

90deg

0deg

-90deg

180deg

LetsDnD.com


Using Multiple Colors

As we said earlier, this is not just a two color thing. We can have a rainbow of

colors in there. Also we can define what percentage of the color should apply

there. For example having more reddish than bluish on the background.

Just think about having something like this.

Using Transparency

CSS3 gradients also support transparency, which can be used to create fading

effects.

To add transparency, we use the rgba() function to define the color stops. The last

parameter in the rgba() function can be a value from 0 to 1, and it defines the

My Gradient Background

LetsDnD.com


transparency of the color: 0 indicates full transparency, 1 indicates full color (no

transparency).

Code snippet goes like this.

div{

background: linear-gradient(

to right,rgba(255,0,0,0),rgba(255,0,0,1)

);

}

Repeating a linear-gradient

Using this value function we can repeat our rainbow colored pattern repeatedly

on the background.

div{

background: repeating-linear-gradient(

red, yellow 10%, green 20%

);

}

Left side is Transparent

LetsDnD.com


CSS3 Radial Gradients

A radial gradient is defined by its center. To create a radial gradient you must also

define at least two color stops same as the linear gradients.

Here is the syntax of defining a radial gradient background.

background: radial-gradient(<shape size at position>,<start-color>, …, <last-color>);

By default, shape is ellipse, size is farthest-corner, and position is center.

div {

background: radial-gradient(red, green, yellow);

}

As the linear gradient we can evenly distribute the colors on the radial or use a

percentage to define how much of color should apply.

Shape Parameter

The shape parameter defines the shape. It can take the value circle or ellipse. The

default value is ellipse.

Code snippet for the above goes like this.

div {

background: radial-gradient(

circle, red, green, yellow

);

}

LetsDnD.com


Size Parameter

The size parameter defines the size of the gradient. It can take four values:

closest-side

farthest-side

closest-corner

farthest-corner

Repeating a radial-gradient

Like as the linear gradient, we can repeat the circles again and again repeatedly

on the background using this value function.

Code snippet is goes as follows.

div{

background: repeating-radial-gradient(

red, yellow 10%, green 15%

);

LetsDnD.com


}

So in this section what we basically learned was varying coloring

techniques on a background. So here after we can have shaded

backgrounds on our web site. This is the end of the background

business and in the next section we are going to look at what are the

text and font effects that CSS3 has offered.

Text Effects

● ● ●

Text Me! Text Me!

● ● ●

LetsDnD.com

22 Text

Other than to the text related styling things CSS has provided in previous versions,

CSS3 offers several new text features.

You might find these features are more important when creating newspaper

looking paragraphs and eye catching headings. Let’s go through one by one which

are most fascinating to learn. Because some of these properties may not be work

on the all browsers. So we selected few of them, which are working almost all of

the browsers to demonstrate to you how it works.

Text Shadow

There are two types of shadows that can be included on a HTML page. One

shadow property we covered in the Border section as box shadow property. That

shadow is applied into boxy elements. But this text-shadow property applied into

texts. For examples headings and paragraphs. Look at the following example.

LetsDnD.com

23 Text

This was written as follows.

<h1 style="text-shadow: 5px 5px 5px #FF0000;">

TEXT SHADOW EFFECT!

</h1>

The values here are the pixel value of horizontal shadow, the vertical shadow, the

blur distance, and the color of the shadow. By changing the pixel amount of

horizontal shadow, the vertical shadow and the blur distance you can come up

with different shadow effects around your text. So you’ll see shadow is not goes

only below but upwards by changing those values.

Word Wrap

If a word is too long to fit within an area, it expands outside. You might come

across this difficult situation when working with excel spreadsheets. So in excel

there is a button to press called word wrap to avoid this situation. You might see

this feature on notepad text editor also. If the text is so long in a line, goes

beyond the visible screen area, by using word wrap feature you can wrap all the

text in the visible area. Like as that, CSS3 offers this feature to wrap your text

paragraphs. Look at the following which is not wrapped.

See what happens here. We defined a width of the paragraph elements and had a

border around it. But that long word (a character set without spaces) goes beyond

than the border. To avoid that we can use word wrap.

Here is a paragraph containing a

very long word called

thisisaveryveryveryveryveryverylongword.

LetsDnD.com

24 Text

The word-wrap property allows you to force the text to wrap – even if it means

splitting it in the middle of a word. Here is the code segment.

p{

word-wrap: break-word;

}

Text Overflow

Sometimes when you write something on an element, the size of the element

may not be fit into the text. So the text will be overflowed. To control this, you

can use this CSS property. The text-overflow property specifies what should

happen when text overflows the containing element.

There are two property values you can include in here.

clip - Default value. It clips the text.

ellipsis - Render an ellipsis ("...") to represent clipped text

So let’s demonstrate this. According to following code segment we have division

elements like below.

<div id="div1">This is some long text that will not fit

in the box</div>

<div id="div2">This is some long text that will not fit

in the box</div>

Here is a paragraph containing

a very long word called

thisisaveryveryveryveryveryv

erylongword.

LetsDnD.com

25 Text

#div1 { white-space: nowrap;

width: 12em;

overflow: hidden;

text-overflow: clip;

border: 1px solid #000000;

}

#div2 { white-space: nowrap;

width: 12em;

overflow: hidden;

text-overflow: ellipsis;


}

Word Break

Previously we did word wrap property and we input there word break as a

property value. So now this word break property controls how the break should

need to be done.

There are two ways that you can do this.

keep-all : Breaks are prohibited between pairs of letters

break-all : Lines may break between any two letters

So let’s demonstrate this. According to following code segment we have two

paragraphs.

This is some long text that wil

This is some long text that …

LetsDnD.com

26 Text

<p class="test1"> This paragraph contains some text.

This line will-break-at-hyphenates.</p>

<p class="test2"> This paragraph contains some text:

The lines will break at any character.</p>

Now we are going to add some style into it.

p.test1 {

width: 9em;


word-break: keep-all;

}

p.test2 {

width: 9em;


word-break: break-all;

}

So in this section we come to know there are many text effects offered by CSS3,

but some of them may not be working in all browsers upto year 2014. Try the

properties we demonstrated here because they are working on almost all popular

browsers. In the next section we are going to cover up web fonts and finish the

texting business on CSS3.

This paragraph

contains some text.

This line will-break-

at-hyphenates.

This paragraph contai ns some text: The line s will break at any cha racter.

Web Fonts

● ● ●

I’m the blacksheep of the family.

● ● ●

LetsDnD.com

28 Font

As you all know we can have different font families on our web page. Having a

good font type appropriately makes your paragraph or heading looks cooler.

By using the font-family property you can mention what type of font; such as

Times New Roman, Verdana or Luicda, you needed to display on the element

text.

Those fonts are most commonly used fonts. We called them “web-safe” fonts as

almost all devices have this font installed. But there are many other fonts you can

get from third parties and used on your web page. But the problem with those

third party fonts is, they are not installed in every device. As we cannot predict

what kind of user is going to look at our web page on the internet, most probably

he will not have that third party font installed on their device. So he will not be

able to see our web page exactly as we designed.

So here comes the CSS3 into action with the Web Fonts. Web fonts allow Web

designers to use fonts that are not installed on the user’s computer. With CSS3

web designers are no longer force to use web-safe fonts now. When you have

found/bought the font you wish to use, just include the font file on your web

server, and it will be automatically downloaded to the user when needed. Having

a unique font which is rarely seen can make your web site looks more unique.

Your “own” fonts are defined within the CSS3 @font-face rule. Before learning

the usage of this property you must understand what kind of different font

formats are available upto now.

LetsDnD.com

29 Font

Different Font Formats

Just remember most of the font formats are not working on all browsers. But

some like TTF, OTF and WOFF fonts are working in almost all browsers.

• TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

TrueType Fonts (TTF)

• OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

OpenType Fonts (OTF)

• WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

The Web Open Font

Format (WOFF)

• SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

SVG Fonts/ Shapes

• EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Embedded OpenType

Fonts (EOT)

LetsDnD.com

30 Font

Font Face Rule

Let’s see how to use the font you want on your web page. In the CSS3 @font-face

rule you must first define a name for the font, and then point to the font file. As a

standard practice we recommend you to use lowercase letters for the font URL

always. Look below to see how the syntax goes.

@font-face {

font-family: myNewFont;

src: url(mynewfont_normal.woff);

}

div {


}

But the problem comes when you want to add a bold text or an italic text or any

other style. To have that you must add another @font-face rule containing

descriptors for the style you needed.

In the following example the file “mynewfont_bold.woff” is another font file,

which contains the bold characters for my new font. Browsers will use this font

file whenever a piece of text with the font-family “myNewFont” should render as

bold. This way you can have many @font-face rules for the same font. Look at the

syntax of it.

@font-face {


src: url(mynewfont_normal.woff);

}

@font-face {


src: url(mynewfont_bold.woff);

font-weight: bold;

}

div {

font-family: myFirstFont;

}

LetsDnD.com

31 Font

Okay!!! Now we have covered the

usage of fonts in css3.

Did you learn that, now on

we do not need to always

depend on the fonts which

are commonly seen?

Yep!!! We can experiment

with our own hand made

fonts in our web pages.

This is all about font topic. In the next few sections we

are going to talk about transformations.

Transformers in 2D

● ● ●

I like to move it, move it!!!

● ● ●

LetsDnD.com

33 Transformation - 2D

Transformation is an effect that lets an element change its shape, size and

position. This transformation includes movement, scale, turn, spin, and stretch.

Using CSS3 transform, we can do all of these things to an element. It can be either

in 2D or 3D. We are going to coverup the 2 Dimensional (2D) part in this section.

We’ll catchup with 3 Dimensional part later.

2D Transformation Methods

Following are the few of methods that comes with CSS3 2D Transforms.

Let’s go with each one.

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.

LetsDnD.com


We’ll go through an example and its syntax.

div {

transform: translate(350px,20px);

}

Here we moved a division to a specific x and y position.

Rotate Method

With the rotate() method, the element rotates clockwise at a given degree.

Negative values are allowed and it rotates the element counter-clockwise.

div {

transform: rotate(30deg);

}

Here we rotated the division by 30 degrees in clockwise.

300

This is a transformed

division.

(350, 20)

This is a normal

division.

LetsDnD.com


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.5,2);

}

The value scale(2.5,2) transforms the width to be 2.5 times big as its original size,

and the height 2 times as its original size.

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.

This is a

normal

division.

This is a

scaled

division.

LetsDnD.com


div {

transform: skew(30deg,20deg);

}

The value skew(30deg,20deg) turns the element 30 degrees around the X-axis,

and 20 degrees around the Y-axis.

Matrix Method

The matrix() method combines all of the 2D transform methods into one. The

matrix method takes six parameters, containing mathematic functions, which

allow you to: rotate, scale, move (translate), and skew elements.

div {

transform: matrix(0.566,0.5,-0.5,0.866,0,0);

}

This is all about 2D Transformation. But remember

we are not finished yet. We need to catch-up with 3

Dimensional transformations in the next section.

Transformers in 3D

● ● ●

Roll Over!!! Roll Over!!!

● ● ●

LetsDnD.com


You now know what kind of things that CSS3 offers with 2D transformation thanks

to the previous section. Not only 2D, it also offers 3 dimensional transformations

too. So in this section, we are going to look at what kind of transformations that

comes with 3D.

We will demonstrate few transformation methods in this section. But actually 3D

transformation comes in handy, when you use it with some animations. But this is

not the time to demonstrate animations in CSS3, and we promised you, we will

cover up that with another section. So you will see, the examples we

demonstrated here will not make any sense, but remember it will come useful

with an animation.

The RotateX

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

degree. Remember to put the additional X in the end of the method. If not it goes

as 2D transform method.

div{

transform: rotateX(120deg);

}

Actually what you see is doesn’t make sense. But if you animate this division

element with rotateX() method, you will see gradually how this division element

rotate around X axis in 3 dimensional space.

LetsDnD.com


The RotateY

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

degree. Remember to put the additional Y in the end of the method. If not it goes

as 2D transform method.

div{

transform: rotateY(120deg);

}

Actually what you see is doesn’t make sense. But if you animate this division

element with rotateY() method, you will see gradually how this division element

rotate around Y axis in 3 dimensional space.

The Perspective

The perspective property defines how many pixels a 3D element is placed from

the view. This property allows you to change the perspective on how 3D elements

are viewed.

When defining the perspective property for an element, it is the child elements

that get the perspective view, not the element itself. And the other important

thing is perspective affects only 3D transformed child elements.

Let’s look at the code how it is written.

LetsDnD.com


In this code segment we have two divisions. One is a parent element of another.

<div id="div1">

<div id="div2">HELLO</div>

</div>

Other than to the width and height and other style properties, we are assigning a

special properties for this parent and child divisions. Take a look at them.

#div1 { perspective: 150px;

}

#div2 { transform: rotateX(45deg);

}

Division1 which is the parent element got the perspective property and division2

which is the child element got the 3D transformation property.

So the black bordered square is our parent division element which has the

perspective property. That means you always need two elements to have that

perspective look.

LetsDnD.com


The Backface Visibility

When an element has a 3 dimensional space, it has a front side and a backside. So

when the front side rotates back to the backside, you might want to hide it. Not

make visible to the users. Or else you might want its flipped look. The backface-

visibility property defines whether or not an element should be visible when not

facing the screen.

This property is useful when an element is rotated, and you do not want to see its

backside.

There are two values that can be input in here.

Visible property value is the default value. So the backside is visible like as

follow when it rotates.

div {

backface-visibility: visible;

}

Hidden property value makes the back side not visible. So at a one time of

the rotation, there will be nothing in the screen, where it fully backsided.

div {

backface-visibility: hidden;

}

LetsDnD.com


Other 3D Transform Methods

Other than the rotate methods there are lots of methods that you can tryout. As

you did most of the 2D transformation methods such like translate and scale,

you’ll find the following 3D methods are lot easier to tryout than them.

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

• Defines a 3D transformation, using a 4×4 matrix of 16 values

translate3d(x,y,z)

• Defines a 3D translation

translateX(x)

• Defines a 3D translation, using only the value for the X-axis

translateY(y)

• Defines a 3D translation, using only the value for the Y-axis

translateZ(z)

• Defines a 3D translation, using only the value for the Z-axis

LetsDnD.com


As you know now, both transformations in 2 dimensional and 3 dimensional

spaces can move into give some motion into it. So what we are going to do in the

next section is that task. So what learned in this section is not a waste, because

we’re going to use them in the next section.

scale3d(x,y,z)

• Defines a 3D scale transformation

scaleX(x)

• Defines a 3D scale transformation by giving a value for the X-axis

scaleY(y)

• Defines a 3D scale transformation by giving a value for the Y-axis

scaleZ(z)

• Defines a 3D scale transformation by giving a value for the Z-axis

rotate3d(x,y,z,angle)

• Defines a 3D rotation

rotateZ(angle)

• Defines a 3D rotation along the Z-axis

perspective(n)

• Defines a perspective view for a 3D transformed element

With Motion

● ● ●

Transition Begins!!!

● ● ●

LetsDnD.com

45 Transition

Before introducing CSS3 to the world, people add motion to web pages by using

JavaScript, Flash or animated images such like gif formatted images.

But with the emergence of CSS3, how things were done was all challenged and

changed. We termed this as transitions in CSS3.

So let’s see what kind of options that CSS3 transition offers to add motion to

HTML elements.

CSS3 Transitions

They are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

The CSS property you want to add an effect to

The duration of the effect

For example look at the following syntax.

div {

width: 100px;

transition: width 2s;

}

LetsDnD.com

46 Transition

It adds a transition effect on the width property, with duration of 2 seconds. But

remember if the duration part is not specified, the transition will have no effect.

The starting width will be 100px. The transition effect will start when the specified

CSS property changes value. A typical CSS property change would be when a user

mouse-over an element. So with the above code you need a pseudo class hover

with the width property in a division tag. The ending width will be 300px. So with

this code segment the width of division element will change gradually from 100px

to 300px when you add the following code segment into it.

div:hover {

width: 300px;

}

Initially the element would like the position 1. When you just hover your mouse

cursor over to the element it will gradually increase its width into position 2. Also

you will notice that when the mouse cursor out of the element, it gradually

changes back to its original style at position 1.

Multiple effects

How about adding effects more than one on the transition property? We already

know how to change the width gradually. What about giving it a rotation as well?

Here we need to separate the effects by a comma. The starting rotation transform

property doesn’t need to be defining because it will take default as zero degrees.

CSS3

Transition

CSS3 Transition

Position 1:

Without mouse

over

Position 2: On mouse over

LetsDnD.com

47 Transition

Following is the code segment for that.

div{

width: 100px;

height: 100px;

transition: width 2s, height 2s, transform 2s;

}

div:hover {

width: 200px;

height: 200px;

transform: rotate(180deg);

}

Position 1:

Without mouse

over

Position 2: On mouse over

On mouse over intermediate positions

LetsDnD.com

48 Transition

Initially the element would like the position 1. When you just hover your mouse

cursor over to the element, browser will generate the intermediate positions like

as the above. With both clockwise rotation and increasing width and heights.

Then it goes into position 2. Also you will notice that when the mouse cursor out

of the element, it gradually changes back to its original style at position 1 by

counter clockwise rotation and decreasing width and heights.

The transition property we introduced here was the shorthand transition

property. If you like to know the standard properties of the transition here is the

list.

This can be written as follows if you like it on the long way.

div{

transition-property: width;

transition-duration: 1s;

}

So we gave some motion to HTML elements in this section. Next section will be

more cooler than this because we are going to animate HTML elements in there.

• A shorthand property for setting the four transition properties into a single property

transition

• Specifies when the transition effect will start transition-delay

• Specifies how many seconds or milliseconds a transition effect takes to complete

transition-duration

• Specifies the name of the CSS property the transition effect is for

transition-property

• Specifies the speed curve of the transition effect transition-timing-

function

With Animation

● ● ●

Frame by frame!!! Style by Style!!!

● ● ●

LetsDnD.com

50 Key Frame

As we said in the previous section, before the emergence of CSS3, things were

done differently when it comes to the subject of animation. We used Javascript or

Flash or Animated Images to have animation on our web pages. Even for the

simplest transition we have to upload above mentioned things. But with CSS3,

you will never need them again.

Before moving on we need to go through a specific rule class.

CSS3 Animation Key Frames Rule

The @keyframes rule is where the animation is created. You need to specify a CSS

style inside the @keyframes rule and the animation will gradually change from

the current style to the new style as described by this rule.

When an animation is created in the @keyframe rule, you must bind it to a

selector, otherwise the animation will have no effect.

You can bind the animation to a selector (element) by specifying at least these

two properties:

The name of the animation

The duration of the animation

But the problem with mentioning only above two only is, it make runs the

animation in one time only. If you like to mention the number of times it needed

to run, you can specify it also.

Now we are going to change the color of a division tag, red to yellow in infinite

times. One transition of colors will take place around 5 seconds. But remember if

the duration part is not specified, the animation will have no effect, because the

default value is 0.

Let’s go with the shorthand property first and then look into standard property

for each of them.

LetsDnD.com

51 Key Frame

This is how the code is written.

div {

animation: myfirst 5s infinite;

}

@keyframes myfirst {

from {background: red;}

to {background: yellow;}

}

In the above code segment our keyframe rule name is ‘myfirst’. There we

specified at the starting point, background color of the element we are going to

bind the rule should be red. Then it should gradually change into yellow. We can

see that rule has tie into a division tag, and this color change should be done

within 5 seconds and loop around infinite times.

An animation lets an element gradually change from one style to another. You can

change as many properties you want, as many times you want. You can specify

when the change will happen in percent, or you can use the keywords “from” and

“to” (which represents 0% and 100%). 0% represents the start of the animation,

100% is when the animation is complete. Let’s look at how to use this percentage

rules.

LetsDnD.com

52 Key Frame


0% {background: red;}

25% {background: yellow;}

50% {background: blue;}

100% {background: green;}

}

Here we had several color transitions. It changes the background color when the

animation is 25%, and 50%, and again when the animation is 100% complete.

Now let’s see how to add a motion with a color change. The below code snippet

will change the background color and the position when the animation is 25%,

50%, 75%, and again when the animation is 100% complete.


0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

LetsDnD.com

53 Key Frame

Now it’s time to expand the shorthand property, and look into what are the

standard properties that comes with CSS3 animation.

div{

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

}

Let’s see what each one means.

animation-delay

• Specifies when the animation will start

animation-direction

• Specifies whether or not the animation should play in reverse on alternate cycles

animation-duration

• Specifies how many seconds or milliseconds an animation takes to complete one cycle

animation-fill-mode

• Specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a “delay”)

animation-iteration-count

• Specifies the number of times an animation should be played

LetsDnD.com

54 Key Frame

animation-name

• Specifies the name of the @keyframes animation

animation-play-state

• Specifies whether the animation is running or paused

animation-timing-function

• Specifies the speed curve of the animation

Great!! We did color transitions,

movements and lot of amazing things.

Yeah!! We came

across cool

animation techniques

offers with CSS3.

That’s all about motion. In the next section we are

going to discuss about something that is really

important when developing online news papers.

News Paper Columns

● ● ●

Run by the columns!!!

● ● ●

LetsDnD.com

56 Column

There are lots of paragraphs in news papers. Those paragraphs are organized in a

nice way to convey the message easily to a reader as well as taking care of the

space it has. For this organization or structure, we called them as paragraph

columns. Using columns we can fit our wordings or paragraphs nicely on the

space remained. But actually for web pages, this concept is really not necessary to

use because in the internet there is no screen space limitations. But if you want to

have a layout same as the traditional looking paragraphs, CSS3 offers this feature

specifically for you.

With CSS3, you can create multiple columns for laying out text – like in

newspapers! Look at the features it offers.

column-count

• Specifies the number of columns an element should be divided into

column-fill

• Specifies how to fill columns

column-gap

• Specifies the gap between the columns

column-rule

• A shorthand property for setting all the column-rule-* properties

column-rule-color

• Specifies the color of the rule between columns

column-rule-style

• Specifies the style of the rule between columns

column-rule-width

• Specifies the width of the rule between columns

LetsDnD.com

57 Column

We are now going through some of these properties which are very much

important.

Multiple Columns

Here we have paragraphs inside a division tag where the division had the

following style on it.

div{

column-count: 3;

}

column-span

• Specifies how many columns an element should span across

column-width

• Specifies the width of the columns

columns

• A shorthand property for setting column-width and column-count

LetsDnD.com

58 Column

With this code segment, the text inside the division automatically fitted into 3

column paragraph set.

If you feel the default gap between the columns are not enough you can increase

or decrease accordingly with the following code snippet.

div{

column-count: 3;

column-gap: 40px;

}

This is how it now looks like.

If you want to have a separator to highlight the columns, the column-rule

property sets the width, style, and color of the rule between columns. Look at the

following example.

div{

column-count: 3;

column-gap: 40px;

column-rule: 4px outset blue;

}

LetsDnD.com

59 Column

This is how it now looks like.

Column rule is a shorthand property. It is a combination of:

In this section we see into what kind of features that CSS3 offers to make a web

page like traditional news paper looking. So the main important concept we

discussed here was columns.

column-rule

column-rule-width

column-rule-style

column-rule-color

Interfacing

● ● ●

I’m here to outline you!!!

● ● ●

LetsDnD.com

61 Interface

With CSS3 there it comes with advanced features to support creating user

interfaces. Such as resizing elements, box sizing, and outlining. Look at the

complete list it offers.

appearance

• Allows you to make an element look like a standard user interface element

box-sizing

• Allows you to define certain elements to fit an area in a certain way

icon

• Provides the author the ability to style an element with an iconic equivalent

nav-down

• Specifies where to navigate when using the arrow-down navigation key

nav-index

• Specifies the tabbing order for an element

nav-left

• Specifies where to navigate when using the arrow-left navigation key

nav-right

• Specifies where to navigate when using the arrow-right navigation key

nav-up

• Specifies where to navigate when using the arrow-up navigation key

outline-offset

• Offsets an outline, and draws it beyond the border edge

resize

• Specifies whether or not an element is resizable by the user

LetsDnD.com

62 Interface

Let’s go through the important ones because some of them are still not supported

by all the web browsers.

Resizing

In CSS3, the resize property specifies whether or not an element should be

resizable by the user. Before CSS3, this feature only applied for HTML text area

element and it came by default. But now you can specify whether some element

is resizable or not by the user. In the following image you’ll see some mark in the

bottom right corner of the element. It allows you to click and resize by dragging.

Following is the code segment.

div{

resize: both;

overflow: auto;

}

Box Sizing

The box-sizing property is used to tell the browser what the sizing properties

(width and height) should include. Should they include the border-box or just the

content-box which is the default value of the width and height properties. For

example, if you want two bordered boxes side by side, it can be achieved through

setting box-sizing to “border-box”. This forces the browser to render the box with

the specified width and height, and place the border and padding inside the box.

Following example specify two bordered boxes side by side.

LetsDnD.com

63 Interface

Following is how it was written.

div{

box-sizing: border-box;

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

Look at the following example. What you see in red color is the outline and what

you see in black color is the border.

div{

border: 2px solid black;

outline: 2px solid red;

outline-offset: 20px;

}

Thank You

So this is all the basic information we have to give you in CSS3. We guess now you

can build a cool web page using the tips and tricks we had given to you with all

these 11 sections.

Thanks for downloading our book!

We certainly hope you enjoyed ‘Learn Basic CSS3’.

It’d be very nice to hear from you…

For more ebooks and free tutorials.

Website: www.letsdnd.com

Contact Us

Email: [email protected]

You can connect and be around with us for new updates from our social network.

Don’t forget to like and follow.

http://www.letsdnd.com/

mailto:[email protected]

https://www.facebook.com/letsdnd

https://plus.google.com/+LetsDnD2014/posts

https://www.pinterest.com/LetsDnD/

https://twitter.com/LetsDnD

https://www.youtube.com/user/letsdnd





















Date post:	22-Jul-2016
Category:	Documents
Upload:	sandeep-likhar
View:	235 times
Download:	4 times

Learn Basic CSS3

Documents