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
98
(Skill Swap Weekend) HTML5 & CSS3
ryhan
7
270
Introductory HTML & CSS
ryhan
3
220
Other Decks in Programming
See All in Programming
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
CI改善もDatadogとともに
taumu
0
110
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Done Done
chrislema
182
16k
What's in a price? How to price your products and services
michaelherold
244
12k
Designing for humans not robots
tammielis
250
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
We Have a Design System, Now What?
morganepeng
51
7.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Scaling GitHub
holman
459
140k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
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