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
97

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
450
Front-End workflows
Avatar for Cesar cesar2535
0
77

Other Decks in Programming

See All in Programming
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k
新世界の理解
Avatar for Akihito Koriyama koriym
0
130
マイコンでもRustのtestがしたい その２/KernelVM Tokyo 18
Avatar for Toshifumi NISHINAGA tnishinaga
2
2.3k
Dart 参戦！！静的型付き言語界の隠れた実力者
Avatar for Kuno Ayana kno3a87
0
200
AIに安心して任せるためにTypeScriptで一意な型を作ろう
Avatar for Yuki Yata arfes0e2b3c
0
360
実践！App Intents対応
Avatar for 野瀬田　裕樹 yuukiw00w
1
270
A Gopher's Guide to Vibe Coding
Avatar for Daniela Petruzalek danicat
0
140
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
Avatar for ktr ktr_0731
3
1.1k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
Avatar for matsukada licux
9
660
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
Avatar for Kazuki Fujikawa kfujikawa
0
920
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
160
Scale out your Claude Code ~⁨⁩自社専用Agentで10xする開発プロセス~
Avatar for Yuku Kotani yukukotani
9
2.1k

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
It's Worth the Effort
Avatar for 3n 3n
186
28k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k

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!