Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Layout w/ HTML5 & CSS3
Search
Cesar
August 14, 2015
Programming
2
92
CSS Layout w/ HTML5 & CSS3
Cesar
August 14, 2015
Tweet
Share
More Decks by Cesar
See All by Cesar
Webpack
cesar2535
1
440
Front-End workflows
cesar2535
0
71
Other Decks in Programming
See All in Programming
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
270
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
GoとPHPのインターフェイスの違い
shimabox
2
210
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.4k
color-scheme: light dark; を完全に理解する
uhyo
7
490
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
sappoRo.R #12 初心者セッション
kosugitti
0
280
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
160
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
210
Featured
See All Featured
Fireside Chat
paigeccino
34
3.2k
Writing Fast Ruby
sferik
628
61k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Designing for Performance
lara
604
68k
Being A Developer After 40
akosma
89
590k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
A Tale of Four Properties
chriscoyier
158
23k
Code Reviewing Like a Champion
maltzj
521
39k
How to Ace a Technical Interview
jacobian
276
23k
Become a Pro
speakerdeck
PRO
26
5.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Transcript
CSS Layout WITH
HTML5 The 5th revision of HTML CSS3 New JavaScript APIs
+ +
CSS3
https://en.wikipedia.org/wiki/HTML5
Semantics Connectivity Offline & Storage Multimedia 3D graphics & effects
Performance & Integration Device Access Styling https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
Semantics Styling
Semantics Styling <header>, <footer>, <article>, <section>, <aside>, <nav>, <figure>, <audio>,
<video>, …
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
Semantics Styling <!DOCTYPE html> Simplified DOCTYPE
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
Semantics Styling
Semantics Styling
Semantics Styling
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
• Selector • Box Model • Backgrounds & Border •
Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout
box-radius: 5px; Box radius
box-radius: 50%; Box radius
box-shadow: 1px 1px 0px pink; Box shadow
box-shadow: 1px 1px 0px pink, -1px -1px 0px green; Box
shadow
text-shadow: 1px 1px 0px pink; Hello Hello Text shadow
h1:before, h1:after { content: “*”; color: pink; } *Hello* Pseudo
elements
@font-face { font-family: “PilGi”; src: “PilGi.otf”; } h1 { font-family:
“PilGi”; } Hello Web fonts
#container { background: #fff; display: flex; width: 900px; height: 400px;
} Flexible Boxes #container
Flexible Boxes #container #main { background: pink; } #right-col {
background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }
Flexible Boxes #container #main { background: pink; width: 600px; }
#right-col { background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }
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; }
Transitions div { width: 100px; } div:hover { width: 800px;
}
Transitions div { width: 100px; } div:hover { width: 800px;
}
Transitions div { width: 100px; transition: width 2s ease-in-out; }
div:hover { width: 800px; }
Transitions div { width: 100px; transition: width 2s ease-in-out; }
div:hover { width: 800px; }
Transforms Hi div { transform: rotate(45deg); }
Don’t forget vendor prefixes -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);
-o-transform: rotate(45deg); transform: rotate(45deg);
Preprocessors
Preprocessors .css .css .styl .sass .scss .less Myth Less Sass
Stylus Postcss
Preprocessors
Question?
CSS Layout
FLEXBOX
10+ 22+ 21+ 6.1+ 12.1+ http://caniuse.com/#search=flexbox -webkit-
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.
TERMINOLOGY Flex Container 1 2 3 Flex Items
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
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
WITHOUT FLEXBOX 1 2 3
WITH FLEXBOX .container { display: flex; } 1 2 3
FLEX-CONTAINER PROPERTIES
flex-direction 1 2 3 row default 3 2 1 row-reverse
flex-direction 1 2 3 column 3 2 1 column-reverse
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
flex-flow row nowrap default 1 2 3 4 5 6
flex-direction
ALIGMENT align-items justify-content cross-axis main-axis
justify-content flex-start default 1 2 3 4 flex-end 1 2
3 4
justify-content center 1 2 3 4
justify-content space-between 1 2 3 4 space-around 1 2 3
4
align-items stretch default 1 2 3 4 flex-start 1 2
3 4
align-items flex-end center 1 2 3 4 1 2 3
4
align-items baseline 1 2 3 4
align-content stretch default 1 2 3 4 5 6 7
8 9
align-content flex-start 1 2 3 4 5 6 7 8
align-content flex-end 1 2 3 4 5 6 7 8
align-content center 1 2 3 4 5 6 7 8
align-content space-between 1 2 3 4 5 6 7 8
align-content space-around 1 2 3 4 5 6 7 8
1 2 3 FLEX-ITEMS PROPERTIES
order {number} 3 1 2 4 .item3 { order: -1;
}
flex-grow {number} 1 2 3 4 .item2 { flex-grow: 2;
}
flex-shrink {number} 1 2 3 4 .item2 { flex-shrink: 2;
}
flex-basis {size} 1 2 3 4 .item1 { flex-basis: 20px;
}
flex {number} 1 2 3 4 .item { flex: 0
1 auto; } flex-grow
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
Header Footer Body Aside 1 Aside 2 http://codepen.io/cesar2535/pen/KpYqwd
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
Question? THANK!