Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML & CSS for the gaming board Game Title Score Stats Board Controls #grid { display: -ms-grid; -ms-grid-columns: auto 1fr; -ms-grid-rows:

Similar presentations


Presentation on theme: "HTML & CSS for the gaming board Game Title Score Stats Board Controls #grid { display: -ms-grid; -ms-grid-columns: auto 1fr; -ms-grid-rows:"— Presentation transcript:

1

2

3

4

5

6

7 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 }

8

9 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 } }

10

11

12

13 SpecificationTransitionsAnimations Characteristics Delay Duration Timing function Properties to transition Delay Duration Timing function Events transitionendanimationstart animationend animationiteration How it works Change property value and browser takes over. “Fire and forget”. Keyframes: which properties to change, to what values, at what times.

14

15 Integrating inside a game

16

17

18

19 MIME Type: text/cache-manifest

20

21

22

23

24 Integrating inside a game

25

26

27 Single page web application

28

29

30

31

32

33

34

35

36

37

38


Download ppt "HTML & CSS for the gaming board Game Title Score Stats Board Controls #grid { display: -ms-grid; -ms-grid-columns: auto 1fr; -ms-grid-rows:"

Similar presentations


Ads by Google