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
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
Spring gRPC について / About Spring gRPC
mackey0225
0
220
技術を根付かせる / How to make technology take root
kubode
1
240
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.9k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
670
Software Architecture
hschwentner
6
2.1k
CI改善もDatadogとともに
taumu
0
110
チームリードになって変わったこと
isaka1022
0
190
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
820
sappoRo.R #12 初心者セッション
kosugitti
0
240
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
GitHub's CSS Performance
jonrohan
1030
460k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Agile that works and the tools we love
rasmusluckow
328
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
The Language of Interfaces
destraynor
156
24k
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