Bài giảng Phát triển ứng dụng Web – Web Programming: Chương 5 - ThS. Lương Trần Hy Hiến

animation-timing-function property: local versus global • On the last slide, the fontChange animation had a global timing function, which affected all the keframes in the animation • How[r]

5 Create Gradient Buttons

6 Multiple background images

7 Multi-Column Layout

8 Tranform

9 Transition

10.Animation

Cascading Style Sheets

• Developed to enable the separation of document content from document presentation

CSS3 FYI

• CSS3 is still under development

• Modules: A new approach to standardization

• Each browser still implementing slightly different syntax for certain properties:

– moz – <property> ; //Firefox

– webkit – <property>; //Chrome, Safari (webkit)

Opera (in most cases) uses the default with no prefix but in some cases you will see

– o – <property>;

UL:last-child UL:only-child

UL:first-of-type UL:last-of-type UL:only-of-type

UL::before UL::after UL::first-line UL::first-letter

• #: Áp dụng cho đối tượng có ID

• name: Áp dụng cho đối tượng có class

• X Y: áp dụng cho đối tượng Y nằm trong đối

tượng X

• X > Y: chỉ rõ con trực tiếp

8

:first-child :last-child :only-child :first-of-type :last-of-type :empty

:not

• Áp dụng cho dòng đầu tiên

• Tương tự cho ::first-letter

11

• Áp dụng cho đúng một đối tượng X duy nhất

• Tương tự cho X:first-of-type

17

Vấn đề khác trong Form

E[ attr*=val ]: áp dụng cho thẻ E thuộc tính attr bằng val

form input[ type="text" ] {

Create Rounded Corners

x = horizontal radius [ <length> | <%> ]

y = vertical radius [ <length> | <%> ]

border-top-left radius: x y ; border-top-right-radius: x y ;

border-bottom-left-radius: x y ; border-bottom-right-radius: 0 ;

border -*-*-radius : [ x ] [ y ]?

Create Rounded Corners

border-radius: [x] {1,4} [ / [y] {1,4} ]?

border-radius: 5px 10px 10px 10px / 10px 10px 5px 5px ; border-radius: 5px 10px / 10px ;

border radius: 10px;

Create Rounded Corners

W3C Specification Mozilla Implementation

Safari and Chrome:

V3.0: use -webkit- prefix

CSS3 Rounded Corners - Recap

• Makes creating rounded divs a breeze

• No Internet Explorer support but it degrades

}

CSS3 Shadows - Recap

• Once again no IE support

• Format:

• h-shadow == Position of horizontal shadow

• v-shadow == Position of vertical shadow

• Blur == Blur distance

• Spread == Size of shadow

• Color == Shadow Color

• Inset == Make the shadow an inner (shadow)

CSS3 Shadows

box-shadow: x y b color

Examples :

-webkit-box-shadow: -3px 3px 3px #999999; -moz-box-shadow: -3px 3px 3px #999999; text-shadow: -4px 4px 3px #999999;

x < 0: left of the text

x > 0: right of the text

y < 0: above the text

y > 0: below the text

• b = blur radius

Text Overflow - Recap

• Format: text-overflow : clip | ellipsis | string ;

• Also requires the whitespace:nowrap; & overflow:hidden properties to be set.

CSS3 Border Images

• You can now specify an image to be used as part of the border property.

CSS3 Border Images - Recap

• Format:

border-image: source slice width outset repeat ;

• Markup:

border-image: url(borderbg.jpg) 30 30 repeat;

-webkit-border-image: url(borderbg.jpg) 30 30 repeat;

-moz-border-image: url(borderbg.jpg) 30 30 repeat;

BORDERS AND BACKGROUNDS

border-image: url("border.png") 27 round stretch;

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

CSS3 Backgrounds

• Format: background-size: length | percentage | cover | contain;

• Sample Markup:

//the second to auto

background-size:cover;

background-size:contain;

Multiple background images

background:

<image> <position> <size> <repeat> <attachment> <box>,

<image> <position> <size> <repeat> <attachment> <box>,

<image> <position> <size> <repeat> <attachment> <box>,

<image> <position> <size> <repeat> <attachment> <box> <color>;

OR background-image: <image>, <image>, <image>, <image>;

background-repeat: <repeat>, <repeat>, <repeat>,<repeat>;

background-position: <position>, <position>, <position>,<position>; /* plus any background attachment and/or box properties as needed */

CSS3 Font Faces

• Allows you to use non-standard fonts

• Mixed support for otf, ttf, svg and eot

• Internet Explorer only supports EOT

• Mozilla browsers support OTF and TTF

• Safari and Opera support OTF, TTF and SVG

• Chrome supports TTF and SVG.

/*định nghĩa thêm cho font nếu có*/

semi-expanded extra-expanded ultra-expanded font-style normal

italic oblique

font-weight normal

bold 100 200 300 400 500 600 700 800 900

Create Gradient Buttons

• rgba(r, g, b, opacity)

• background : -webkit-gradient ( linear , 0 % 0 %, 0 % 100 %,

from ( rgba ( 255 , 255 , 255 , 1 )), to ( rgba ( 185 , 185 , 185 , 1 )));

• background

:-moz-linear-gradient( top , rgba ( 255 , 255 , 255 , 1 ), rgba ( 185 , 185 , 185 , 1 ));

CSS3 transforms

Trình duyệt hỗ trợ CSS 2D Transforms

-moz- transform:rotate(-15deg); /* Firefox */

-webkit- transform:rotate(-15deg); /* Chrome, Safari */

specifies a translation by the given amount in the Y direction

translate(<tX>[, <trY>]) - specifies translation by the vector [trX,trY]; if

tY is not given, zero is used

scale(<sX>[, <sY>]) - specifies scaling by the [sx,sy] scaling

vector; if second parameter not given, a value equal to the first is used

scaleX(<sX>) - specifies by the [sx,1] scaling vector

scaleY(<sY>) - specifies by the [1,sY] scaling vector

skewX(<angle>) - specifies skewing along X axis by given angle

skewY(<angle>) - specifies skewing along Y axis by given angle

matrix(<n1>, <n2>, <n3>, <n4>, <n5>, <n6>) - specifies application of the transformation matrix [n1,n2,n3,n4,n5,n6]

Tham khảo: http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/

width:200px; height:100px; background-color:red;

transform: rotate(-15deg) translateX(300px);

-moz- transform: rotate(-15deg) translateX(300px);

-webkit- transform: rotate(-15deg) translateX(300px);

-ms- transform: rotate(-15deg) translateX(300px);

-o- transform: rotate(-15deg) translateX(300px);

Trình duyệt hỗ trợ CSS 3D Transforms

• 3D CSS transforms tương tự như 2D CSS

transforms Các thuộc tính cơ bản translate3d ,

và scale3d cần 3 tham số x,y and z; còn rotate cần góc.

CSS Transitions

VD CSS phản hồi người dùng

• Chuyển đổi style của khối div khi

người dùng hơ chuột vào nó.

Gradual change in response to user actions (contd.)

Gradual change in response to user actions (contd.)

• The stylesheet below will cause a gradual transition in style for the div element when the user holds his mouse over it

<html><head><style>

div { width:200px; height:180px; background-color:pink; font-size:10;

transition-property: width, background-color, font-size;

transition-duration: 15s, 15s, 15s;

-moz-transition-property: width, font-size;-moz-transition-duration: 15s, 15s, 15s;

-ms-transition-property: width, font-size;-ms-transition-duration: 15s, 15s, 15s;

-webkit-transition-property: width, font-size;-webkit-transition-duration: 15s, 15s, 15s;

-o-transition-property: width, font-size;-o-transition-duration: 15s, 15s, 15s;

}

div:hover { width:400px; background-color:yellow; font-size:100 }

</style></head><body><p>This is a paragraph.</p><div>Hello</div></body></html>

Property name Type

background-color Color

background-image only gradients

background-position percentage, length border-bottom-color color

Transition-property (cont)

Property name Type

font-size length, percentage

max-height length, percentage

max-width length, percentage

Transition-property (cont)

Property name Type

min-height length, percentage

min-width length, percentage

text-indent length, percentage

Transition-property (cont)

Property name Type

vertical-align keywords, length, percentage

visibility visibility

word-spacing length, percentage

Varying transition speed

the start and finish of the transition

vary the speed

Giá trị thuộc tính transition-timing-function

Giá trị thuộc tính transition-timing-function

• linear – tốc độ giống nhau từ bắt đầu
kết thúc

• ease – bắt đầu chậm, tăng dần, kết thúc chậm

• ease-in – bắt đầu chậm

• ease-out – kết thúc chậm

• ease-in-out – giống ease

Transitions can control transforms as well as styles

• This example is at http://www.cs.ucc.ie/j.bowen/cs4506/slides/transform-transition.html

• The transform and three style properties transition gradually, over 15

secs, when the mouse is held over the initial position of the div element

<html><head><style>

div { height: 180px; width:200px; background-color:pink; font-size:10;

transition-property: transform, font-size, background-color, width;

transition-duration: 15s, 15s, 15s,15s;

-moz-transition-property: -moz-transform, font-size; background-color, width;-moz-transition-duration: 15s, 15s, 15s, 15s;-o-transition-property: -o-transform, font-size; background-color, width;-o-transition-duration: 15s, 15s, 15s, 15s;-ms-transition-property: -ms-transform, font-size; background-color, width;-ms-transition-duration: 15s, 15s, 15s, 15s;-webkit-transition-

property: -webkit-transform, font-size; background-color, width; -webkit-transition-duration: 15s, 15s, 15s, 15s;}

div:hover { width:400px; background-color:yellow; font-size:100 ;

transform-origin:top left ; transform:rotate(-15deg );

-moz-transform-origin:top left;-webkit-transform-origin:top left;-ms-transform-origin:top left;-o-transform-origin:top transform:rotate(-15deg); -o-transform:rotate(-15deg);}

left;-moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);-ms-</style></head><body><p>This is a paragraph.</p><div>Hello</div></body></html>

The transition-delay property

• The stylesheet below will cause a delayed style transition for the div element when the user holds his mouse over it

• Check it out at http://www.cs.ucc.ie/j.bowen/cs4506/slides/transition-delay.html

<html><head><style>

p {width:200px;color:red}

div { height: 180px; width:200px; background-color:pink; font-size:40;

transition-property: width; transition-duration: 15s; transition-delay: 10s ;

-moz-transition-property: width;-moz-transition-duration: 15s;-moz-transition-delay: 10s;-ms-transition-property: width;-ms-transition-duration: 15s;-ms-transition-delay: 10s;-o-transition-property: width;-o-transition-duration: 15s;-o-transition-delay: 10s;-webkit-transition-property: width;-webkit-transition-duration: 15s;-webkit-transition-delay: 10s; }

div:hover { width:400px;}

</style>

</head><body><h1>Transition delay</h1>

<p>Note that, if you hover your mouse over the pink box below, the transition

will not start for 10 seconds and will then last for 15 seconds

<div>Hello</div></body></html>

• A transition-delay can have a negative value

Example: if the delay above were - 10s, the transition would start

immediately, the box having a width as if the transition has started 10s before, and would then spend 5s more to finish the width change

CSS3 animation

CSS animations

– where we have only two keyframes, one at the start and one at the end

many keyframes as we wish

below on the next few slides

in a browser which supports CSS3, you hover the mouse over the element with a red background

– http://www.cs.ucc.ie/j.bowen/cs4506/slides/8secTransition.html – http://www.cs.ucc.ie/j.bowen/cs4506/slides/8secAnimation.html

CSS transitions versus animations: part 1, a transition

CSS transitions versus animations: part 1, a transition

• Consider the CSS transition below:

</style></head><body><div>Hello</div></body></

html>

• When the mouse moves onto the div element,

the font-size increases gradually

• This is a simple 8-second animation whose

– first keyframe has font-size=10px

– last keyframe has font-size=50px

• Contrast this with the situation on the next slide

CSS transitions versus animations: part 2, an animation

CSS transitions versus animations: part 2, an animation

8-second CSS animation has five

Writing a basic CSS animation

• CSS animations can have multiple properties

• However, to animate a HTML element using CSS, we must, at least,

associate the element with a set of keyframes, and

specify the duration of the desired animation

-moz- animation-name: myKeyFrameSet; -moz- animation-duration: 8s;

-webkit- animation-name: myKeyFrameSet; -webkit- animation-duration: 8s;

-ms- animation-name: myKeyFrameSet; -ms- animation-duration: 8s;

-o- animation-name: myKeyFrameSet; -o- animation-duration: 8s;

}

Writing a basic CSS animation (contd.)

• We specify a set of frames by using the @keyframes rule

@keyframes <someName> { <keyframeSpec1>, <keyframe2>, }

• Since, at present, we must use vendor-specific prefixes, we must actually write something like this

@keyframes <someName> { <keyframeSpec1>, <keyframe2>, }

@ -moz- keyframes <someName> {<keyframeSpec1>, <keyframe2>, }

@ -webkit- keyframes <someName> {<keyframeSpec1>, <keyframe2>, }

@ -ms- keyframes <someName> {<keyframeSpec1>, <keyframe2>, }

@ -o- keyframes <someName> {<keyframeSpec1>, <keyframe2>, }

Writing a basic CSS animation (contd.)

• We specify an individual keyframe by specifying

– the point in the animation when it must be used, and

– the CSS style values which should apply at this point

<when> { <styleDeclaration1>, <styleDeclaration1>, }

The animation-iteration-count property

The animation-iteration-count property

• The animation-iteration-count property

specifies how many times the animation is

played - the number of 'cycles'

• By default, the value of this property is 1

• If the keyword infinite is used, the animation will repeat as long as the web page is open

• If a non-integer number is specifies as the value for this property, the animation will stop at some point in the middle of a cycle

animation-iteration-count property (contd.)

animation-iteration-count property (contd.)

• The animation below is at

http://www.cs.ucc.ie/j.bowen/cs4506/slides/infinitelyRepeated8secAnimation.html

• It will repeat continuously, as long as the mouse is

hovering over the area of the initial div element

• It will stop immediately if the mouse moves off the initial area

}@-div:hover { font-size:50px;

animation-name: fontChange;

animation-duration: 8s;

animation-iteration-count: infinite;

-moz-animation-name: fontChange;-moz-animation-duration: 8s; -moz-animation-iteration-count: infinite;

-webkit-animation-name: fontChange;-webkit-animation-duration: 8s; -webkit-animation-iteration-count: infinite;

-ms-animation-name: fontChange;-ms-animation-duration: 8s; -ms-animation-iteration-count: infinite;

-o-animation-name: fontChange;-o-animation-duration: 8s; -o-animation-iteration-count: infinite;

}

div {background-color:red; font-size:10px}

The animation-timing-function property The animation-timing-function property

– this property can be given the same types of value as the

transition timing function

– while the transition-timing-function specifies the rate of change over the entire transition,

– the animation timing function specifies the rate of change

between keyframes of an animation