(TH Crash Course) Advanced HTML & CSS

Transcript

1. Advanced HTML & CSS
2. Advanced HTML & CSS Seemingly Impressive things you can do with
3. @RyhanHassan
4. CSS Transitions
5. <img src=“foo”/> <style> img{ -webkit-transition: all 0.5s; top: 0px; } img:hover{ top: 10px; } </style> Transition from 0px to 10px
6. CSS Transform
7. -webkit-transform: rotate(360deg); -webkit-transform: skew(5deg,10deg); -webkit-transform: scale(2); -webkit-transform: translate(10px, 30px);
8. -webkit-transform: rotate(360deg); -webkit-transform: skew(5deg,10deg); -webkit-transform: scale(2); -webkit-transform: translate(10px, 30px); -webkit-transform: scale(2) rotate(10deg);
9. 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.
10. CSS Animations
11. <img src=“foo”/> <style> img{ -webkit-animation: bar linear 1s infinite; } @-webkit-keyframes bar{ 0%{ left: 0;} 50%{ left: 100px;} 100%{ left: 0;} } </style>
12. Exercise 2 1. Open up /demos/animations.html 2. Add a 2nd cat, and animate it with a keyframe animation
13. 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
14. 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;
15. Recap -webkit-transform:rotate/scale/skew/translate -webkit-transition: all 0.5s -webkit-animation: bar linear 1s infinite; @-webkit-keyframes bar{ 0% { } 100% { } }
16. For More Canvas Animations 3D effects with WebGL and Three.js
17. Mobile Web
18. Viewport Mobile browsers render pages in virtual “windows” wider than their actual screen.
19. Viewport Set Page Width Disable Zooming Set Zoom Level
20. Viewport Set Page Width Disable Zooming Set Zoom Level <meta name=“viewport” content = “ width = device-width, user-scalable = no, initial-scale = 1.0” />
21. Let your page adapt MediaQueries
22. Lots of Devices
23. Lots of Devices
24. 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)' />
25. Learn more animateyourhtml5.appspot.com/pres/ http://www.html5rocks.com/en/ Get in touch @ryhanhassan
26. @RyhanHassan