Click here to load reader

HTML5&CSS3 8장. 눈을 즐겁게

Embed Size (px)

DESCRIPTION

아꿈사 발표자료

Citation preview

2. Border-radius RGBa Box-shdow Transform Linear-gradient @font-face 3. Tip17. 4.

5. CSS 6. Border-radiusinput, fieldset, legend{border-radius: 5px;/*mozilla*/-moz-border-radius: 5px;/*webkit */-webkit-border-radius: 5px;} 7. Border-radius RGBa Box-shdow Transform Linear-gradient @font-face 8. Tip18. , , 9. css 10. linear-gradient#badge{background-image: linear-gradient( top, #fff, #efefef );background-image: -moz-linear-gradient( top, #fff, #efefef ); background-image: -webkit-gradient(linear,left top, left bottom,color-stop(0, #fff),color-stop(1, #efefef) );} 11. box-shadowSyntaxbox-shadow: h-shadow v-shadow blur spread color inset;#badge{box-shadow: 5px 5px 5px #333;-moz-box-shadow: 5px 5px 5px #333;-webkit-box-shadow: 5px 5px 5px #333;-o-box-shadow: 5px 5px 5px #333;}http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow&preval=10px%2010px%2050px%2020px%20pink%20inset 12. transform#badge{transform: rotate(-7.5deg);-moz-transform: rotate(-7.5deg);-o-transform: rotate(-7.5deg);-webkit-transform: rotate(-7.5deg);-ms-transform: rotate(-7.5deg);}http://www.w3schools.com/cssref/css3_pr_transform.asp 13. rgba 0 ~ 1#info{background-color: rgba(255,255,255,0.95);} 14. Border-radius RGBa Box-shdow Transform Linear-gradient @font-face 15. . .http://naradesign.net/wp/2009/06/05/844/ 16. @font-faceCSS2 IE5 .ButIE EOT, TTF/OTFEOT: Embedded OpenType FontTTF: TrueType FontOTF: OpenType FontWOFF: Web Open Font Formathttp://caniuse.com/#feat=fontfacehttp://caniuse.com/#search=eothttp://caniuse.com/#search=ttfhttp://caniuse.com/#search=woff 17. Font-family . . .@font-face {font-family: GarogierRegular;src: url(fonts/Garogier_unhinted-webfont.eot);src: url(fonts/Garogier_unhinted-webfont.woff) format(woff), url(fonts/Garogier_unhinted-webfont.ttf) format(truetype), url(fonts/Garogier_unhinted-webfont.svg) format(svg);font-weight: normal;} 18. Font-family @font-face .body{ font-family: "GarogierRegular";// font-family: "GarogierRegular", Georgia,"Palatino", "Palatino Linotype","Times", "Times New Roman",serif;} 19. GarogierRegular 20. Border-radius RGBa Box-shdow Transform Linear-gradient @font-face 21. Transform Box-shdowRGBaBorder-radius Linear-gradient@font-face 22. .