If you can't read please download the document
MIME Type: text/cache-manifest
Embed Size (px)
Citation preview
- Slide 1
- Slide 2
- Slide 3
- Slide 4
- Slide 5
- Slide 6
- Slide 7
- MIME Type: text/cache-manifest
- Slide 8
- Slide 9
- Slide 10
- Slide 11
- Slide 12
- Slide 13
- Slide 14
- /* Tablet (landscape) ----------- */ @media only screen and
(min-device-width : 768px) and (max-device-width : 1024px) and
(orientation : landscape) { /* Styles */ } /* Tablet (portrait)
----------- */ @media only screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait) { /*
Styles */ } /* Desktops and laptops ----------- */ @media only
screen and (min-width : 1224px) { /* Styles */ }
teegallery.com
- Slide 15
- Title Stats Score Board
- Slide 16
- HTML & CSS for the gaming board Game Title Score Stats
Board Controls #grid { display: -ms-grid; -ms-grid-columns: auto
1fr; -ms-grid-rows: auto 1fr auto; } #title { -ms-grid-column: 1;
-ms-grid-row: 1 } #score { -ms-grid-column: 1; -ms-grid-row: 3 }
#stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align:
start } #board { -ms-grid-column: 2; -ms-grid-row: 1;
-ms-grid-row-span: 2 } #controls { -ms-grid-column: 2;
-ms-grid-row: 3; -ms-grid-column-align: center }
- Slide 17
- Slide 18
- Merging grid & media queries @media (orientation:
landscape) { #title { -ms-grid-column: 1; -ms-grid-row: 1 } #score
{ -ms-grid-column: 1; -ms-grid-row: 3 } #stats { -ms-grid-column:
1; -ms-grid-row: 2; -ms-grid-row-align: start } #board {
-ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 }
#controls { -ms-grid-column: 2; -ms-grid-row: 3;
-ms-grid-column-align: center } } @media (orientation: portrait) {
#title { -ms-grid-column: 1; -ms-grid-row: 1 } #score {
-ms-grid-column: 1; -ms-grid-row: 2 } #stats { -ms-grid-column: 2;
-ms-grid-row: 1; -ms-grid-row-span: 2 } #board { -ms-grid-column:
1; -ms-grid-row: 3; -ms-grid-column-span: 2 } #controls
{-ms-grid-column: 1; -ms-grid-row: 4; -ms-grid-column-span: 2;
-ms-grid-column-align: center } }
- Slide 19
- Slide 20
- http://goldengridsystem.com/ http://cssgrid.net/ Less Framework
http://lessframework.com/http://foundation.zurb.com/
- Slide 21
- Slide 22
- TransitionsAnimations Delay Duration Timing function Properties
to transition Delay Duration Timing function
transitionEndanimationStart animationEnd animationIteration
Keyframes: , ,
- Slide 23
- Slide 24
- #id_of_the_html_element { animation-name:
name_of_the_animation; animation-duration: number_of_seconds s;
animation-iteration-count: number | infinite; }
- Slide 25
- Slide 26
- Slide 27
- Slide 28
- Slide 29
- Slide 30
- Slide 31
- function inferInputModel() { if
(window.navigator.msPointerEnabled) { return 'pointer'; } else if
(window.ontouchstart !== undefined) { return 'touch'; } else {
return 'unknown'; } switch (inferInputModel()) { case 'pointer':
element.addEventListener('MSPointerDown', msStart);
element.addEventListener('MSPointerOut', msStop);
document.addEventListener('MSPointerUp', msStop);
document.addEventListener('MSPointerCancel', msStop);
document.addEventListener('MSHoldVisual', preventDefault); break;
case 'touch': element.addEventListener('touchstart', touchStart);
document.addEventListener('touchend', touchStop);
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop); break; default:
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop); break; }
- Slide 32
- Slide 33
- Slide 34
- Slide 35
- Slide 36
- Slide 37