Lý thuyết lập trình ngôn ngữ html5 và css3 phần 5.

Lý thuyết lập trình ngôn ngữ html5 và css3 từ cơ bản đến nâng cao phần 5.

BËI 5 LËM VIỆC VỚI CSS3

NHẮC LẠI BËI TRƯỚC

!   Ch•n c‡c thˆnh phần video, audio vˆo trang

!   iều khiển video với Javascript

!   Lˆm quen với thˆnh phần canvas

!   Sử dụng thˆnh phần cavas để thực hiện:

!   Vẽ h“nh vˆ đường

!   çp dụng mˆu vˆ cọ fradient

!   Thực hiện tạo h“nh động

!   Transform, transition, animation

!   Lˆm việc với font web

!   Ch•n nhiều h“nh nền với CSS3

TỔNG QUAN VỀ CSS3

TỔNG QUAN VỀ CSS3

!   Lˆ ti•u chuẩn mới nhất của CSS

!   Hoˆn toˆn tương th’ch với c‡c phi•n bản trước

!   CSS3 được chia thˆnh c‡c module, c‡c thˆnh phần

c được chia nhỏ vˆ bổ sung c‡c thˆnh phần mới

NHỮNG THUỘC TêNH MỚI TRONG CSS3

THUỘC TêNH MỚI TRONG CSS3

!   Border-radius:

!   Border-radius: tạo ra bốn g—c bo tr˜n cho đường viền

!   -webkit-border-radius: giœp IE9+ hỗ trợ

!   -moz-border-radius: giœp Firefox hỗ trợ

THUỘC TêNH MỚI TRONG CSS3

-webkit-border-image: url("images/border-bg.png") 33% repeat;

-moz-border-image: url("images/border-bg.png") 33% repeat;

border-image: url("images/border-bg.png ) 33% repeat;

border-image: source slice width outset

repeat ;

THUỘC TêNH MỚI TRONG CSS3

!   CSS3 Gradient:

!   Gradient lˆ thˆnh phần phổ biến tr•n trang web

!   Gradient thường bao gồm:

¥  2 iểm dừng mˆu (color stop)

¥  1 iểm chuyển mˆu

THUỘC TêNH MỚI TRONG CSS3

!   Tạo gradient với CSS3

.gradient {

width: 450px;

border: #000 4px solid;

background-color:#fff;

background-image: -moz-linear-gradient(white, black);

background-image: -webkit-gradient (linear, 0 0, 0 100%, from (white), to (black));

}

THUỘC TêNH MỚI TRONG CSS3

!   Th•m g—c độ vˆ nhiều iểm dừng:

¥  Mục ’ch:

Ð  T ng th•m sự a dạng của gradient

Ð  Kiểm so‡t tốt hơn

background-image: -moz-linear-gradient(45deg, white, green, black);

background-image:

-moz-radial-gradient(60% 60%, circle

closest-corner, white, black);

THUỘC TêNH MỚI TRONG CSS3

!   Lặp lại gradient:

!   Sử dụng hệ mˆu RGBA để định ngh a gradient:

background-image: -moz-repeating-linear-gradient(left, white 80%, black, white);

.gradient h1 {

margin:0; font-weight:bold; font-size:48px; color:#C33; text-align:center; background-image: -moz-linear-gradient(rgba(174, 185, 196, 0.9),

rgba(110,124, 140, 0.9));}

TRANSFORM Ð TRANSITION - ANIMATION

TRANSFORM Ð TRANSITION - ANIMATION

!   Transform:

!   Cho phŽp xoay, kŽo d‹n, kŽo nghi•ng thˆnh phần tr•n trang

.transform { margin-top:2em; -webkit-transform: rotate (45deg); -moz-transform:

rotate(-45deg); transform: rotate(-45deg)}

TRANSFORM Ð TRANSITION - ANIMATION

cong của hiệu ứng chuyển tiếp

TRANSFORM Ð TRANSITION - ANIMATION

!   Một số gi‡ trị của transition-timing-function

Giá trị   Giải nghĩa 

linear  Chỉ định một hiệu ứng chuyển tiếp với c•ng một tốc độ

từ đầu đến cuối (tương đương với kiểu bezier(0,0,1,1))

cubic-Ease  Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu

chậm, sau đ— nhanh ch—ng, sau đ— kết thœc chậm 

ease‐in  Chỉ định một hiệu ứng chuyển tiếp với một khởi đầu

chậm 

ease‐out  Chỉ định một hiệu ứng chuyển tiếp với một kết thœc chậm

(tương đương với cubic-bezier (0,0,0.58,1)) 

ease‐in‐out  Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu

chậm vˆ kết thœc 

cubic‐bezier(!,!,!,!)  X‡c định gi‡ trị của ri•ng bạn trong c‡c chức năng khối

bezier C‡c gi‡ trị c— thể lˆ gi‡ trị số 0-1 

TRANSFORM Ð TRANSITION - ANIMATION

TRANSFORM Ð TRANSITION - ANIMATION

!   Định ngh a c‡c thuộc t’nh của CSS animation :

FONT WEB

font-family: Sigmar, Georgia, Palatino,

Times New Roman, serif;

}

TrueType (TTF)  nền tảng tương th’ch

vˆ cung cấp c‡c điều khiển tinh

vi sắp chữ, 

SVG  định dạng vector dựa tr•n hiện

nay chỉ hỗ trợ iOS của Apple iPod  

FF3.4, chrome0.3, safari  3.1, opera9, iOS1 

vˆ phần lớn được hỗ trợ bởi Internet

IE5 

FONT WEB

!   Sử dụng dịch vụ web để tạo nhiều font

Sử dụng site  hϖp://www.fontsquirrel.com/  để 

tạo file .css có chứa font được nhúng 

@font-face { font-family: 'SigmarRegular';

src: webfont.eot');

src: webfont.eot?

url('fonts/sigmarone-#iefix') opentype'),

format('embedded-url('fonts/sigmarone-webfont.woff') format('woff'),

url('fonts/sigmarone-webfont.ttf') format('truetype'),

url('fonts/sigmarone- webfont.svg#SigmarRegular') format('svg');

font-weight: normal;

font-style: normal;

}

HíNH NỀN VỚI CSS3

HíNH NỀN VỚI CSS3

!   Thực hiện ch•n 3 h“nh ảnh lˆm nền cho web

TỔNG KẾT

!   Kh™ng n•n sử dụng kết hợp thuộc t’nh

border-image vˆ thuộc t’nh border-radius

!   Gradient trong CSS giống với gradient được tạo ra trong c‡c chương tr“nh đồ họa: c— iểm dừng mˆu

vˆ iểm chuyển mˆu

!   C— thể tạo được nhiều iểm dừng mˆu vˆ iểm

chuyển mˆu để gradient phong phœ hơn

!   Sử dụng gi‡ trị vị tr’: top, left, right, bottom để iều chỉnh ch’nh x‡c nhiều h“nh nền trong CSS