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
(TH Crash Course) Advanced HTML & CSS
Search
Ryhan Hassan
January 18, 2013
Programming
5
240
(TH Crash Course) Advanced HTML & CSS
Ryhan Hassan
January 18, 2013
Tweet
Share
More Decks by Ryhan Hassan
See All by Ryhan Hassan
(TH Crash Course) Intro to JavaScript
ryhan
1
100
(Skill Swap Weekend) HTML5 & CSS3
ryhan
7
270
Introductory HTML & CSS
ryhan
3
220
Other Decks in Programming
See All in Programming
ニーリーにおけるプロダクトエンジニア
nealle
0
500
GoのGenericsによるslice操作との付き合い方
syumai
3
690
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
370
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
Deep Dive into ~/.claude/projects
hiragram
8
1.5k
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
220
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Practical Orchestrator
shlominoach
188
11k
Designing for humans not robots
tammielis
253
25k
Navigating Team Friction
lara
187
15k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Site-Speed That Sticks
csswizardry
10
660
BBQ
matthewcrist
89
9.7k
Into the Great Unknown - MozCon
thekraken
39
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
Advanced HTML & CSS
Advanced HTML & CSS Seemingly Impressive things you can do
with
@RyhanHassan
CSS Transitions
<img src=“foo”/> <style> img{ -webkit-transition: all 0.5s; top: 0px; }
img:hover{ top: 10px; } </style> Transition from 0px to 10px
CSS Transform
-webkit-transform: rotate(360deg); -webkit-transform: skew(5deg,10deg); -webkit-transform: scale(2); -webkit-transform: translate(10px, 30px);
-webkit-transform: rotate(360deg); -webkit-transform: skew(5deg,10deg); -webkit-transform: scale(2); -webkit-transform: translate(10px, 30px); -webkit-transform:
scale(2) rotate(10deg);
Exercise 1 1. Download starter code at github.com/ryhan/htmlDemos 2. Open
up /demos/transitions.html 3. Add a 7th troll face, and animate it.
CSS Animations
<img src=“foo”/> <style> img{ -webkit-animation: bar linear 1s infinite; }
@-webkit-keyframes bar{ 0%{ left: 0;} 50%{ left: 100px;} 100%{ left: 0;} } </style>
Exercise 2 1. Open up /demos/animations.html 2. Add a 2nd
cat, and animate it with a keyframe animation
Exercise 2 1. Open up /demos/animations.html 2. Add a 2nd
cat, and animate it with a keyframe animation Exercise 2.5 1. Download more starter code at github.com/ryhan/Bounce
3D Transforms -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); Set how far away
we are (scene) -webkit-perspective: 1000px; Preserve Depth (object) -webkit-transform-style: preserve-3d;
Recap -webkit-transform:rotate/scale/skew/translate -webkit-transition: all 0.5s -webkit-animation: bar linear 1s infinite;
@-webkit-keyframes bar{ 0% { } 100% { } }
For More Canvas Animations 3D effects with WebGL and Three.js
Mobile Web
Viewport Mobile browsers render pages in virtual “windows” wider than
their actual screen.
Viewport Set Page Width Disable Zooming Set Zoom Level
Viewport Set Page Width Disable Zooming Set Zoom Level <meta
name=“viewport” content = “ width = device-width, user-scalable = no, initial-scale = 1.0” />
Let your page adapt MediaQueries
Lots of Devices
Lots of Devices
Responsive Design Reflow content to fit any screen. <link rel='stylesheet'
href='../css/mobile.css' media='screen and (max-width: 600px)' /> <link rel='stylesheet' href='../css/normal.css' media='screen and (min-width: 600px)' />
Learn more animateyourhtml5.appspot.com/pres/ http://www.html5rocks.com/en/ Get in touch @ryhanhassan
@RyhanHassan