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
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Deep Dive into ~/.claude/projects
hiragram
8
1.5k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
160
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
210
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
100
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
790
技術同人誌をMCP Serverにしてみた
74th
1
350
XP, Testing and ninja testing
m_seki
3
190
NPOでのDevinの活用
codeforeveryone
0
190
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
Side Projects
sachag
455
42k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Being A Developer After 40
akosma
90
590k
The Pragmatic Product Professional
lauravandoore
35
6.7k
GitHub's CSS Performance
jonrohan
1031
460k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Code Reviewing Like a Champion
maltzj
524
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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