UNIVERSITETI I PRISHTINES HASAN PRISHTINA

FAKULTETI I INXHINIERISE ELEKTRIKE DHE KOMPJUTERIKE

------------------------------------------------------------------------------------------

Lenda: Interneti
Java: IX (e nente) - Ushtrime
Tema: CSS3 - Cascading Style Sheets 3 (II)

Asistenti: MSc. Korab Rrmoku

Prmbajtja:

CSS3 2D Transforms

CSS3 3D Transforms

CSS3 Transitions

CSS3 Animations

CSS3 Multiple Columns

CSS3 User Interface

CSS3 Prmbledhje

CSS3 2D Transforms
With CSS3 transform, we can move, scale, turn,
spin, and stretch elements.
A transform is an effect that lets an element
change shape, size and position.
You can transform your elements using 2D or 3D
transformation.
Browser Support

CSS3 2D Transforms (2)

2D Transforms
In this chapter you will learn about the 2d
transform methods:
translate()
rotate()
scale()
skew()
matrix()
Example
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

CSS3 2D Transforms (3)

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

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

CSS3 2D Transforms (4)

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

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

CSS3 2D Transforms (5)

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

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

CSS3 2D Transforms (6)

The matrix() Method
The matrix() method combines all of the 2D
transform methods into one.
The matrix method take six parameters,
containing mathematic functions, which allows
you to: rotate, scale, move (translate), and skew
elements.
Example
How to rotate a div element 30 degrees, using the matrix method:
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and
Chrome */
}

CSS3 2D Transforms (7)

CSS3 Transform Properties

2D Transform Methods

CSS3 3D Transforms
CSS3 allows you to format your elements using
3D transforms.
We will learn about some of the 3D transform
methods:
rotateX()
rotateY()
Browser Support

CSS3 3D Transforms (1)

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

Example
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and
Chrome */
}

CSS3 3D Transforms (2)

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

Example
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and
Chrome */
}

CSS3 3D Transforms (3)

CSS3 Transform Properties
The following table lists all the transform properties:

CSS3 3D Transforms (4)

3D Transform Methods

CSS3 Transitions
With CSS3, we can add an effect when changing
from one style to another, without using Flash
animations or JavaScripts.
Browser Support

CSS3 Transitions (2)

How does it work?
CSS3 transitions are effects that let an element
gradually change from one style to another.
To do this, you must specify two things:
Specify the CSS property you want to add an effect
to
Specify the duration of the effect.

Example
Transition effect on the width property, duration: 2 seconds:
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

CSS3 Transitions (3)

How does it work?
The effect will start when the specified CSS
property changes value. A typical CSS property
change would be when a user mouse-over an
element:
Example
Specify :hover for <div> elements:
div:hover
{
width:300px;
}
Note: If the duration is not specified, the transition will have no
effect, because default value is 0.
When the cursor mouse out of the element, it gradually changes
back to its original style.

CSS3 Transitions (4)

Multiple changes
To add a transitional effect for more than one
style, add more properties, separated by
commas:
Example
Add effects on the width, height, and the transformation:
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

CSS3 Transitions (5)

CSS3 Transition Properties

Shembulli me kod: Perfshirja e te gjitha vetive

CSS3 Animations
With CSS3, we can create animations, which
can replace animated images, Flash animations,
and JavaScripts in existing web pages.
CSS3 @keyframes Rule
To create animations in CSS3, you will have to
learn about the @keyframes rule.
The @keyframes rule is where the animation is
created. Specify a CSS style inside the
@keyframes rule and the animation will
gradually change from the current style to the
new style.

CSS3 Animations (2)

Browser Support

Example
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

CSS3 Animations (3)

CSS3 animation
When the animation is created in the
@keyframe, bind it to a selector, otherwise the
animation will have no effect.
Bind the animation to a selector by specifying at
least these two CSS3 animation properties:
Specify the name of the animation
Specify the duration of the animation
Example
Binding the "myfirst" animation to a div element, duration: 5
seconds:
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

CSS3 Animations (4)

What are Animations in CSS3?

An animation is an effect that lets an element

gradually change from one style to another.
You can change as many styles you want, as
many times you want.
Specify when the change will happen in percent,
or the keywords "from" and "to", which is the
same as 0% and 100%.
0% is the beginning of the animation, 100% is
when the animation is complete.
For best browser support, you should always
define both the 0% and the 100% selectors.

CSS3 Animations (5)

What are Animations in CSS3?
Example
Change the background color when the animation is 25%,
50%, and again when the animation is 100% complete:
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

CSS3 Animations (6)

What are Animations in CSS3?
Example
Change the background color and position:
@keyframes myfirst
{
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;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
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;}
}

CSS3 Animations (7)

CSS3 Animation

Shembulli me kod me te gjitha vetite

CSS3 Multiple Columns

With CSS3, you can create multiple columns for
laying out text - like in newspapers!
We will learn about the following multiple column
properties:
column-count
column-gap
column-rule
Browser Support

CSS3 Multiple Columns (2)

CSS3 Create Multiple Columns
The column-count property specifies the number
of columns an element should be divided into:
Example
Divide the text in a div element into three columns:
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

CSS3 Multiple Columns (3)

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap

between the columns:
Example
Specify a 40 pixels gap between the columns:
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

CSS3 Multiple Columns (4)

CSS3 Column Rules
The column-rule property sets the width, style,
and color of the rule between columns.
Example
Specify the width, style and color of the rule between
columns:
div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and
Chrome */
column-rule:3px outset #ff00ff;
}

CSS3 Multiple Columns (5)

CSS3 Multiple Columns Properties

CSS3 User Interface

CSS3 User Interface
In CSS3, some of the new user interface
features are resizing elements, box sizing, and
outlining.
We will learn about the following user interface
properties:
resize
box-sizing
outline-offset
Browser Support

CSS3 User Interface (2)

CSS3 Resizing
In CSS3, the resize property specifies whether
or not an element should be resizable by the
user.

The CSS code is as follows:

Example
Specify that a div element should be resizable by
the user:
div
{
resize:both;
overflow:auto;}

CSS3 User Interface (3)

CSS3 Box Sizing
The box-sizing property allows you to define
certain elements to fit an area in a certain way:
Example
Specify two bordered boxes side by side:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}

CSS3 User Interface (4)

CSS3 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

CSS3 User Interface (5)

The CSS code is as follows:
Example
Specify an outline 15px outside the border edge:
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

CSS3 User Interface (6)

CSS3 User-interface Properties

CSS3 Prmbledhje

We have learned how to create style sheets to

control the style and layout of multiple web sites at
once.
We have learned how to use CSS to add
backgrounds, format text, add and format borders,
and specify padding and margins of elements.
We have learned how to position an element, control
the visibility and size of an element, set the shape of
an element, place an element behind another, and
to add special effects to some selectors, like links.
We have also learned about many of the new
features in CSS3: rounded borders, box and text
shadows, gradient backgrounds, 2D and 3D
transformations, transitions, animations, multiple
columns, and more.