Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Layout w/ HTML5 & CSS3

Avatar for Cesar Cesar
August 14, 2015
Programming
2
100

CSS Layout w/ HTML5 & CSS3

Avatar for Cesar

Cesar

August 14, 2015
Tweet

More Decks by Cesar

See All by Cesar
Webpack
Avatar for Cesar cesar2535
1
460
Front-End workflows
Avatar for Cesar cesar2535
0
88

Other Decks in Programming

See All in Programming
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
650
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
Avatar for Seungmin 마량 maryang
1
150
クラウドに依存しないS3を使った開発術
Avatar for しめさば simesaba80
0
210
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
160
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
Avatar for Takashi Kokubun k0kubun
1
310
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.4k
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
Avatar for Tadashi Shigeoka codenote
0
330
re:Invent 2025 トレンドからみる製品開発への AI Agent 活用
Avatar for Kohei Yoshikawa yoskoh
0
570
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
2
430
ThorVG Viewer In VS Code
Avatar for Nor-s nors
0
500
開発に寄りそう自動テストの実現
Avatar for Hiroki Iseri goyoki
2
1.7k
Deno Tunnel を使ってみた話
Avatar for すずとも kamekyame
0
300

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
770
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
210
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
37
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
130
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
48
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
450
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
1
94
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
65
35k

Transcript

  1. CSS Layout WITH

  2. HTML5 The 5th revision of HTML CSS3 New JavaScript APIs

    + +

  3. CSS3

  4. https://en.wikipedia.org/wiki/HTML5

  5. Semantics Connectivity Offline & Storage Multimedia 3D graphics & effects

    Performance & Integration Device Access Styling https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

  6. Semantics Styling

  7. Semantics Styling <header>, <footer>, <article>, <section>, <aside>, <nav>, <figure>, <audio>,

    <video>, …

  8. Semantics Styling body div id=“header” div id=“sidebar” div id=“content” div

    class=“article” div class=“article” div id=“footer” body header aside section article article footer HTML4 HTML5

  9. Semantics Styling <!DOCTYPE html> Simplified DOCTYPE

  10. Semantics Styling <!DOCTYPE html> Compare with HTML 4.01: <!DOCTYPE HTML

    PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3c.org/TR/html4/strict.dtd”> Simplified DOCTYPE

  11. Semantics Styling

  12. Semantics Styling

  13. Semantics Styling

  14. https://en.wikipedia.org/wiki/Cascading_Style_Sheets

  15. • Selector • Box Model • Backgrounds & Border •

    Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout

  16. box-radius: 5px; Box radius

  17. box-radius: 50%; Box radius

  18. box-shadow: 1px 1px 0px pink; Box shadow

  19. box-shadow: 1px 1px 0px pink, -1px -1px 0px green; Box

    shadow

  20. text-shadow: 1px 1px 0px pink; Hello Hello Text shadow

  21. h1:before, h1:after { content: “*”; color: pink; } *Hello* Pseudo

    elements

  22. @font-face { font-family: “PilGi”; src: “PilGi.otf”; } h1 { font-family:

    “PilGi”; } Hello Web fonts

  23. #container { background: #fff; display: flex; width: 900px; height: 400px;

    } Flexible Boxes #container

  24. Flexible Boxes #container #main { background: pink; } #right-col {

    background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }

  25. Flexible Boxes #container #main { background: pink; width: 600px; }

    #right-col { background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }

  26. Flexible Boxes #container #main { background: pink; width: 600px; }

    #right-col { background: green; flex: 1; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }

  27. Transitions div { width: 100px; } div:hover { width: 800px;

    }

  28. Transitions div { width: 100px; } div:hover { width: 800px;

    }

  29. Transitions div { width: 100px; transition: width 2s ease-in-out; }

    div:hover { width: 800px; }

  30. Transitions div { width: 100px; transition: width 2s ease-in-out; }

    div:hover { width: 800px; }

  31. Transforms Hi div { transform: rotate(45deg); }

  32. Don’t forget vendor prefixes -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);

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

  33. Preprocessors

  34. Preprocessors .css .css .styl .sass .scss .less Myth Less Sass

    Stylus Postcss

  35. Preprocessors

  36. Question?

  37. CSS Layout

  38. FLEXBOX

  39. 10+ 22+ 21+ 6.1+ 12.1+ http://caniuse.com/#search=flexbox -webkit-

  40. DEFINITION The main idea is to give the “container” the

    ability to change the width & height of its children to best fill the blank space and prevent overflow.

  41. TERMINOLOGY Flex Container 1 2 3 Flex Items

  42. PROPERTIES Flex Container Flex Item ✦ display ✦ flex-direction ✦

    flex-wrap ✦ flex-flow ✦ justify-content ✦ align-items ✦ … ✦ order ✦ flex-grow ✦ flex-shrink ✦ flex-basis ✦ align-self

  43. GET STARTED <div class=“container”> <div class=“item”>1</div> <div class=“item”>2</div> <div class=“item”>3</div>

    </div> Flex Items Flex Container

  44. WITHOUT FLEXBOX 1 2 3

  45. WITH FLEXBOX .container { display: flex; } 1 2 3

  46. FLEX-CONTAINER PROPERTIES

  47. flex-direction 1 2 3 row default 3 2 1 row-reverse

  48. flex-direction 1 2 3 column 3 2 1 column-reverse

  49. flex-wrap nowrap default 1 2 3 4 5 6 wrap

    1 2 3 4 5 6 wrap-reverse 1 2 3 4 5 6

  50. flex-flow row nowrap default 1 2 3 4 5 6

    flex-direction

  51. ALIGMENT align-items justify-content cross-axis main-axis

  52. justify-content flex-start default 1 2 3 4 flex-end 1 2

    3 4

  53. justify-content center 1 2 3 4

  54. justify-content space-between 1 2 3 4 space-around 1 2 3

    4

  55. align-items stretch default 1 2 3 4 flex-start 1 2

    3 4

  56. align-items flex-end center 1 2 3 4 1 2 3

    4

  57. align-items baseline 1 2 3 4

  58. align-content stretch default 1 2 3 4 5 6 7

    8 9

  59. align-content flex-start 1 2 3 4 5 6 7 8

  60. align-content flex-end 1 2 3 4 5 6 7 8

  61. align-content center 1 2 3 4 5 6 7 8

  62. align-content space-between 1 2 3 4 5 6 7 8

  63. align-content space-around 1 2 3 4 5 6 7 8

  64. 1 2 3 FLEX-ITEMS PROPERTIES

  65. order {number} 3 1 2 4 .item3 { order: -1;

    }

  66. flex-grow {number} 1 2 3 4 .item2 { flex-grow: 2;

    }

  67. flex-shrink {number} 1 2 3 4 .item2 { flex-shrink: 2;

    }

  68. flex-basis {size} 1 2 3 4 .item1 { flex-basis: 20px;

    }

  69. flex {number} 1 2 3 4 .item { flex: 0

    1 auto; } flex-grow

  70. align-self 1 2 3 4 .item1 { align-self: flex-start; }

    .item2 { align-self: stretch; } .item3 { align-self: flex-end; } .item4 { align-self: center; } default:auto

  71. Header Footer Body Aside 1 Aside 2 http://codepen.io/cesar2535/pen/KpYqwd

  72. RESOURCES Learn • https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ • http://heydesigner.com/flexbox/ • http://philipwalton.github.io/solved-by-flexbox/

    • http://sixrevisions.com/css/learn-flexbox/ Bugs • https://github.com/philipwalton/flexbugs

  73. Question? THANK!