Frontend 104 - From PSD to HTML

Transcript

1. Frontend 104 From PSD to HTML Veronica Ng
2. The Materials Slides http://go.veron.sg/fe100-slides Files http://go.veron.sg/fe100-files
3. Add Files to Dropbox http://go.veron.sg/fe100-files
4. In The Beginning
6. 01 Break It Down
14. 02 Translate into HTML
15. HTML References 1. HTML Sections http://codepen. io/veronism/pen/twesL 2. HTML Sections + Content http://codepen. io/veronism/pen/Cdqxk
16. 03 Setup CSS Selectors
17. CSS References 1. Empty CSS Selectors http://codepen. io/veronism/pen/zIbpo
18. 04 Style It!
20. Tiled Background /* Tiles in every direction */ background: url(../images/bg/wavegrid.png); /* Tiles only horizontally (left to right) */ background: url(../images/bg/wavegrid.png)repeat-x; /* Tiles only vertically (top to bottom) */ background: url(../images/bg/wavegrid.png)repeat-y; /* No tiling */ background: url(../images/bg/wavegrid.png)no-repeat;
21. Stretched Background /* Scale background image to be as large as possible to cover position area while maintaining aspect ratio */ background: url(../images/bg/fullbg.jpg) no-repeat; background-size: cover; /* Center background image horizontally and vertically */ background: url(../images/bg/fullbg.jpg) center center no- repeat; background-size: cover; /* Fix background image so it doesn't scroll */ background: url(../images/bg/fullbg.jpg) center center no- repeat fixed; background-size: cover;
22. Multiple Backgrounds /* Multiple backgrounds with CSS3 */ background: url(../images/bg/overlay.png) repeat, url(../images/bg/fullbg.jpg) no-repeat fixed; background-size: auto, cover;
23. Additional Resources CSS3 Background Properties http://www.w3.org/TR/css3-background/ Understanding 'background-size' http://www.css3.info/preview/background-size/ Free Tiled Backgrounds: Subtle Patterns http://subtlepatterns.com/ Photoshop Tutorial: Turn texture into seamless tile http://psd.tutsplus.com/articles/how-a-turn-a-texture- into-a-seamlessly-tiled-background/
25. Horizontal Centering using auto margins div.content-wrapper { /* Sets background color to white */ background: #fff; /* Creates a border only on top of element */ border-top: 5px solid #662483; /* Sets top and bottom margin to be 20px, and left and right to be auto*/ margin: 20px auto; /* Width of element*/ width: 960px; }
27. Absolute positioning header { margin: 0 35px; position: relative; } header > h1 { margin: 10px 0; padding: 0; } header > nav { /* Positions element relative to its first positioned ancestor element */ position: absolute; right: 0; top: 10px; }
28. Additional Resources CSS3 Positioning: A comprehensive look http://blog.teamtreehouse.com/css-positioning
30. Border-radius #banner { margin: 25px 35px; } #banner > img { /* Rounded borders with border-radius! */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } Psst. Can you figure out how to turn your image into a circle with border- radius?
31. Additional Resources CSS3 Rounded Borders http://www.css3.info/preview/rounded-border/ CSS3 Image Styles http://webdesignerwall.com/tutorials/css3-image-styles
33. Display, Box-sizing & Vertical-align #about { box-sizing: border-box; display: inline-block; margin: 0 10px 0 35px; /* Inline elements default to baseline alignment */ vertical-align: top; width: 490px; } #portfolio { box-sizing: border-box; display: inline-block; margin: 0 35px 0 20px; width: 360px; }
34. Additional Resources CSS Display Property http://css-tricks.com/almanac/properties/d/display/ A Look Into: CSS3 Box-sizing http://www.hongkiat.com/blog/css3-box-sizing/ What is Vertical-Align? http://css-tricks.com/what-is-vertical-align/ What is Vertical-Align? http://css-tricks.com/what-is-vertical-align/
36. Drawing circles with CSS3 #portfolio > img { /* Radius of a circle is half of diameter, of course! */ -moz-border-radius: 55px; -webkit-border-radius: 55px; border-radius: 55px; /* Height & width acts as diameter */ height: 110px; margin: 0 5px 5px 0; width: 110px; }
38. Mastering CSS Principles: A Comprehensive Guide http://www.smashingmagazine.com/mastering-css-principles- comprehensive-reference-guide/ Additional Resources
39. Coding for Readability Consistent Indentation CSS Property Ordering
40. Consistent Indentation "Top-level" selectors indicate section. Indented selectors are specific to "parent". header { } header > h1 { } header > cite { } section { } section > h2 { } section > ul { } section > ul > li { }
41. CSS Property Ordering Properties first grouped by relation (typography, size, position). Within each group, properties are ordered alphabetically. #element { /* typography */ color: #fff; font-family: Georgia; font-weight: bold; line-height: 24px; /* sizing */ height: 300px; width: 300px; /* positional */ position: absolute; left: 50px; top: 20px; z-index: 10; }