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
250
(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
230
Other Decks in Programming
See All in Programming
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
CSC509 Lecture 06
javiergs
PRO
0
260
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
140
Devoxx BE - Local Development in the AI Era
kdubois
0
130
CSC305 Lecture 06
javiergs
PRO
0
240
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
CSC305 Lecture 08
javiergs
PRO
0
210
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Docker and Python
trallard
46
3.6k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Designing for Performance
lara
610
69k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
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