1. BI 5 LM VIC VI CSS3

2. NHC LI BI TRC Chn cc thnh phn video, audio vo trang iu khin video vi Javascript Lm quen vi thnh phn canvas S dng thnh phn cavas thc hin: V hnh v ng p dng mu v c fradient Thc hin to hnh ng Slide 5 - Lm vic vi CSS3 2 3. MC TIU BI HC Tng quan v CSS3 Lm vic vi cc thuc tnh mi trong CSS3: Border-radius Border-image Gradient Transform, transition, animation Lm vic vi font web Chn nhiu hnh nn vi CSS3 Slide 5 - Lm vic vi CSS3 3 4. TNG QUAN V CSS3 5. TNG QUAN V CSS3 L tiu chun mi nht ca CSS Hon ton tng thch vi cc phin bn trc CSS3 c chia thnh cc module, cc thnh phn c c chia nh v b sung cc thnh phn mi Slide 5 - Lm vic vi CSS3 5 6. TNG QUAN V CSS3 Mt s module quan trng trong CSS3: Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface Slide 5 - Lm vic vi CSS3 6 7. NHNG THUC TNH MI TRONG CSS3 8. THUC TNH MI TRONG CSS3 Border-radius: Border-radius: to ra bn gc bo trn cho ng vin -webkit-border-radius: gip IE9+ h tr -moz-border-radius: gip Firefox h tr Slide 5 - Lm vic vi CSS3 8 .specialsale { width: 400px; background-color:#D67E5C; border: 2px #773636 solid; -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; } 9. THUC TNH MI TRONG CSS3 Border-image: C php: Slice: phn b bn trong ca hnh border Outset: s lng din tch m hnh nn border m rng Slide 5 - Lm vic vi CSS3 9 border: 20px #773636 solid; -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; 10. THUC TNH MI TRONG CSS3 CSS3 Gradient: Gradient l thnh phn ph bin trn trang web Gradient thng bao gm: 2 im dng mu (color stop) 1 im chuyn mu Trc khi c CSS3: Vi CSS3: s dng cc thuc tnh nh ngha gradient: Linear-gradient Radial-gradient Slide 5 - Lm vic vi CSS3 10 Vgradienttrongcc chngtrnhha Xutthnhdnghnhnh sdngtrnweb Background-image 11. THUC TNH MI TRONG CSS3 To gradient vi CSS3 Slide 5 - Lm vic vi CSS3 11 .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)); } 12. THUC TNH MI TRONG CSS3 Thm gc v nhiu im dng: Mc ch: Tng thm s a dng ca gradient Kim sot tt hn Slide 5 - Lm vic vi CSS3 12 background-image: -moz-linear-gradient(45deg, white, green, black); background-image: -moz-radial- gradient(60% 60%, circle closest- corner, white, black); 13. THUC TNH MI TRONG CSS3 Lp li gradient: S dng h mu RGBA nh ngha gradient: Slide 5 - Lm vic vi CSS3 13 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));} 14. TRANSFORM TRANSITION - ANIMATION 15. TRANSFORM TRANSITION - ANIMATION Transform: Cho php xoay, ko dn, ko nghing thnh phn trn trang Slide 5 - Lm vic vi CSS3 15 .transform { margin-top:2em; -webkit-transform: rotate (45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg)} 16. TRANSFORM TRANSITION - ANIMATION Transition: S dng link thc hin Transition transition-duration: quy nh thi gian chuyn i transition-timing-function: xc nh tc ng cong ca hiu ng chuyn tip. Slide 5 - Lm vic vi CSS3 16 a.transition { padding: 5px 0px; background: #C9C; -webkit-transition-property: background; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; } 17. TRANSFORM TRANSITION - ANIMATION Mt s gi tr ca transition-timing-function Slide 5 - Lm vic vi CSS3 17 Gitr Giingha linear Ch nh mt hiu ng chuyn tip vi cng mt tc t u n cui (tng ng vi kiu cubic- bezier(0,0,1,1)) Ease Ch nh mt hiu ng chuyn tip vi mt s khi u chm, sau nhanh chng, sau kt thc chm ease-in Ch nh mt hiu ng chuyn tip vi mt khi u chm ease-out Ch nh mt hiu ng chuyn tip vi mt kt thc chm (tng ng vi cubic-bezier (0,0,0.58,1)) ease-in-out Ch nh mt hiu ng chuyn tip vi mt s khi u chm v kt thc cubic-bezier(n,n,n,n) Xc nh gi tr ca ring bn trong cc chc nng khi bezier. Cc gi tr c th l gi tr s 0-1 18. TRANSFORM TRANSITION - ANIMATION CSS animation Slide 5 - Lm vic vi CSS3 18 #spin { margin-top:2em; -webkit-animation-name: imageRotate; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: 2; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes imageRotate { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } } 19. TRANSFORM TRANSITION - ANIMATION nh ngha cc thuc tnh ca CSS animation: Slide 5 - Lm vic vi CSS3 19 Thuc2nh nhngha animaJon-name Xcnhtnchocckeyframeng animaJon-duraJon Xcnhthigiancnthithonthnh chukcahnhng(giy/miligiy) animaJon-iteraJon-count xcnhbaonhiulnmthnhnhng nncchi. animaJon-Jming-funcJon xcnhtcngcongcahothnh. CcngcongtcxcnhThigian (TIME)hothnhsdngthayitmt tphpccphongcchCSSkhc. 20. FONT WEB 21. FONT WEB @font-face: Cho php nhng font ch vo trang bng cch khai bo font v t font ch trn web server L gii php khc phc vic phi ci t font ch trn my tnh Slide 5 - Lm vic vi CSS3 21 @font-face { font-family: Sigmar; src: url('SigmarOne.otf'); } h2 { font-size:1.125em; letter-spacing:0.2em; font-weight:lighter; text-transform:uppercase; font-family: Sigmar, Georgia, Palatino, Times New Roman, serif; } 22. FONT WEB Kiu nh dng font ch: Slide 5 - Lm vic vi CSS3 22 Kiunhdng Giithch Trnhduyt,HHhtr OpenType(OTF) nhdngphbin Htrglyph IE9,FF3.5,Chrome4, Safari3.1,Opera10, Android2.2TrueType(TTF) nn tng tng thch v cung cp cc iu khin tinh vi sp ch, SVG nh dng vector da trn hin naych h tr iOS ca Apple iPod. FF3.4,chrome0.3,safari 3.1,opera9,iOS1 WebOpenFontFormat (WOFF) bao gm nhiukh nng nn cc tp tin font ch v ti u ha IE9,FF3.6,chrome5 EmbeddedOpenType (EOT) mt bin th trn OpenType to ra bi Microsoft v phn ln c h tr bi Internet Explorer. IE5 23. FONT WEB S dng dch v web to nhiu font Slide 5 - Lm vic vi CSS3 23 Sdngsitehvp://www.fontsquirrel.com/ tole.csscchafontcnhng @font-face { font-family: 'SigmarRegular'; src: url('fonts/sigmarone- webfont.eot'); src: url('fonts/sigmarone- webfont.eot? #iefix') format('embedded- opentype'), 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; } 24. HNH NN VI CSS3 25. HNH NN VI CSS3 Thc hin chn 3 hnh nh lm nn cho web Slide 5 - Lm vic vi CSS3 25 26. HNH NN VI CSS3 Thc hin: Slide 5 - Lm vic vi CSS3 26 body { font-family: "Trebuchet MS", Tahoma, Arial,sans-serif; font-size:100%; background-color: #B3BBCA; background-image: url(images/bg1.png),url(images/bg2.png), url(images/ bg3.png); } 27. HNH NN VI CSS3 Chn nhiu hnh nn vi v tr chnh xc: Slide 5 - Lm vic vi CSS3 27 .specialsale { width: 550px; border: 2px #773636 solid; background-image: url(images/blueberry.jpg),url(images/ orange.png);background-repeat: no-repeat; background-position: top right, 0 -45px; } 28. TNG KT Khng nn s dng kt hp thuc tnh border- image v thuc tnh border-radius Gradient trong CSS ging vi gradient c to ra trong cc chng trnh ha: c im dng mu v im chuyn mu C th to c nhiu im dng mu v im chuyn mu gradient phong ph hn S dng gi tr v tr: top, left, right, bottom iu chnh chnh xc nhiu hnh nn trong CSS Slide 5 - Lm vic vi CSS3 28