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
70
Other Decks in Programming
See All in Programming
テストをしないQAエンジニアは何をしているか?
nealle
0
130
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
sappoRo.R #12 初心者セッション
kosugitti
0
230
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Ruby on cygwin 2025-02
fd0
0
140
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
最近のVS Codeで気になるニュース 2025/01
74th
1
250
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Featured
See All Featured
Producing Creativity
orderedlist
PRO
343
39k
GraphQLとの向き合い方2022年版
quramy
44
13k
4 Signs Your Business is Dying
shpigford
182
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Statistics for Hackers
jakevdp
797
220k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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!