{"id":34202,"date":"2017-11-07T03:01:58","date_gmt":"2017-11-06T17:01:58","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=34202"},"modified":"2017-11-06T20:08:40","modified_gmt":"2017-11-06T10:08:40","slug":"multiple-class-slideshow-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/multiple-class-slideshow-primer-tutorial\/","title":{"rendered":"Multiple Class Slideshow Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slideshow_multiple_class.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multiple Class Slideshow Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/slideshow_multiple_class.jpg\" title=\"Multiple Class Slideshow Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Multiple Class Slideshow Primer Tutorial<\/p><\/div>\n<p>The benefits of multiple class HTML element definitions came to the fore when we presented <a title='CSS3 Button Animation Transition Game Sharing Tutorial' href='#css3batgst'>CSS3 Button Animation Transition Game Sharing Tutorial<\/a> and today we find a &#8230;<\/p>\n<ul>\n<li>slideshow &#8230; meets &#8230;<\/li>\n<li>animated GIF<\/li>\n<\/ul>\n<p> &#8230; &#8220;presentation&#8221; way as our theme for today&#8217;s &#8220;web application&#8221;.<\/p>\n<p>Unlike some other &#8220;slideshow&#8221; methods we navigate nowhere, but more, &#8220;slap&#8221; <a target=_blank title='Overlay tutorials' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>overlay<\/a> upon overlay onto the one image area, and we\u2019re officially adding it to our list of image presentation ideas you can see listed from <a target=_blank title='PDF on Mac OS X via Images and Finder and Preview Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/pdf-on-mac-os-x-via-images-and-finder-and-preview-tutorial\/'>PDF on Mac OS X via Images and Finder and Preview Tutorial<\/a> as shown below.<\/p>\n<p>From above, as you might surmise, and see for yourself trying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slideshow_multiple_class.html_GETME\" title=\"slideshow_multiple_class.html\">slideshow_multiple_class.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slideshow_multiple_class.html\" title=\"Click picture\">live run<\/a> link, what you can end up with are the makings of an animated GIF, effectively created just for your session, though on this side of the thinking we may make improvements as time goes on.<\/p>\n<p>How does it work?  Well, the user defines up to nine &#8230;<\/p>\n<ul>\n<li>image URL &#8230; and\/or &#8230;<\/li>\n<li>HTML URL containing <i>img<\/i> element src= properties pointing to image URL(s)<\/li>\n<\/ul>\n<p> &#8230; all able to contribute to the contents of the resultant &#8220;slideshow&#8221; (like animated GIF) presentation.<\/p>\n<p>We&#8217;ll leave you with some reruns of past slideshows we&#8217;ve presented &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Yii MVC PHP Framework Hello World Content Tutorial' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slideshow_multiple_class.html?image1=HTTP:\/\/www.rjmprogramming.com.au\/PHP\/Yii\/index.html&#038;image2=&#038;image3=&#038;image4=&#038;image5=&#038;image6=&#038;image7=&#038;image8=&#038;image9=&#038;background=&#038;hide=offoff#slideshow'>Yii MVC PHP Framework Hello World Content Tutorial<\/a><\/li>\n<li><a target=_blank title='Android Camera to Mac iPhoto Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slideshow_multiple_class.html?image1=HTTP:\/\/www.rjmprogramming.com.au\/Android\/Camera\/iPhoto\/index.html&#038;image2=&#038;image3=&#038;image4=&#038;image5=&#038;image6=&#038;image7=&#038;image8=&#038;image9=&#038;background=&#038;hide=offoff#slideshow'>Android Camera to Mac iPhoto Primer Tutorial<\/a><\/li>\n<li><a target=_blank title='NetBeans Backbone.js HTML5 Web Application Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/slideshow_multiple_class.html?image1=HTTP:\/\/www.rjmprogramming.com.au\/NetBeans\/HTML5\/BackBone\/index.html&#038;image2=&#038;image3=&#038;image4=&#038;image5=&#038;image6=&#038;image7=&#038;image8=&#038;image9=&#038;background=&#038;hide=offoff#slideshow'>NetBeans Backbone.js HTML5 Web Application Primer Tutorial<\/a><\/li>\n<\/ul>\n<hr>\n<p id='css3batgst'>Previous relevant <a target=_blank title='CSS3 Button Animation Transition Game Sharing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-button-animation-transition-game-sharing-tutorial\/'>CSS3 Button Animation Transition Game Sharing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Button Animation Transition Game Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/animated_button_game_email.jpg\" title=\"CSS3 Button Animation Transition Game Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Button Animation Transition Game Sharing Tutorial<\/p><\/div>\n<p>There are some familiar &#8220;items&#8221; with today&#8217;s additional functionality to yesterday&#8217;s <a title='CSS3 Button Animation Transition Game Tutorial' href='#css3batgt'>CSS3 Button Animation Transition Game Tutorial<\/a> &#8230; and some other matters we encourage you to consider, the primary one of <b>these<\/b> being &#8230;<\/p>\n<ul>\n<li><b>the benefits of multiple class HTML element definitions where the <i>C<\/i>ascading in <i>C<\/i>SS comes into (its hierarchical) play with first class being a &#8220;template&#8221; one refined by second class &#8220;localizing&#8221; styles<\/b> &#8230; we instigated before familiar &#8230;<\/li>\n<li>localization of our Animated Button Game allowing the user to define their own &#8220;Phrase or Proverb&#8221; versus &#8220;Explanation of phrase or proverb&#8221; relationship &#8230; and our favourite &#8230;<\/li>\n<li>sharing email (via client email <i>a<\/i> link to <a target=_blank title='mailto information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto:<\/i><\/a> href element) mechanism for &#8230;\n<ol>\n<li>email link to game &#8230; and\/or &#8230;<\/li>\n<li>email link to game with any localizations and as a challenge to an emailee (with the same order of questioning) and a &#8221; versus otherscore\/othergoes&#8221; flagging of <i>score<\/i> HTML element<\/li>\n<\/ol>\n<\/li>\n<li>interfacing to the user via new &#8220;character&#8221; and emoji and &#8220;emoji plus <a target=_blank title='HTML sup tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_sup.asp'>sup<\/a> button&#8221; (as a new means by which we can effect a multiple emoji &#8220;feel&#8221;)<\/li>\n<\/ul>\n<p>The (new version of the) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.htm\" title=\"Click picture\">game<\/a>&#8216;s HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.html-GETME\" title=\"animated_button_game.htm\">animated_button_game.htm<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.html-GETME\" title=\"animated_button_game.htm\">this way<\/a> for this work today, the biggest block of change representing how that CSS started using <b>multiple class definitions<\/b> like &#8230;<\/p>\n<p><code><br \/>\n class=\"<b>button <\/b>button1\"<br \/>\n<\/code><\/p>\n<p> &#8230; and reduced the CSS definition from right hand side to left hand side as below &#8230;<\/p>\n<table style=\"width:100%;\">\n<tr>\n<th>New multiple class CSS<\/th>\n<th>Old single class use CSS<\/th>\n<\/tr>\n<tr>\n<td>&lt;style&gt;<br \/>\nselect {<br \/>\n  width:70%;<br \/>\n  border: 2px solid pink;<br \/>\n}<\/p>\n<p>.button {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #f4511e;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button span:after {<br \/>\n  content: &#8216;in Spain falls mainly on the plain.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button1 {<br \/>\n  background-color: #f4511e;<br \/>\n}<\/p>\n<p>.button1 span:after {<br \/>\n  content: &#8216;in Spain falls mainly on the plain.&#8217;;<br \/>\n}<\/p>\n<p>.button2 {<br \/>\n  background-color: #511ef4;<br \/>\n}<\/p>\n<p>.button2 span:after {<br \/>\n  content: &#8216;make light work.&#8217;;<br \/>\n}<\/p>\n<p>.button3 {<br \/>\n  background-color: #51f41e;<br \/>\n}<\/p>\n<p>.button3 span:after {<br \/>\n  content: &#8216;in the hand is worth two in the bush.&#8217;;<br \/>\n}<\/p>\n<p>.button4 {<br \/>\n  background-color: #154f1e;<br \/>\n}<\/p>\n<p>.button4 span:after {<br \/>\n  content: &#8216;in time saves nine.&#8217;;<br \/>\n}<\/p>\n<p>.button5 {<br \/>\n  background-color: #1577e1;<br \/>\n}<\/p>\n<p>.button5 span:after {<br \/>\n  content: &#8216;gather no moss.&#8217;;<br \/>\n}<\/p>\n<p>.button6 {<br \/>\n  background-color: #cea5b1;<br \/>\n}<\/p>\n<p>.button6 span:after {<br \/>\n  content: &#8216;and no play makes Jack a dull boy.&#8217;;<br \/>\n}<\/p>\n<p>.button7 {<br \/>\n  background-color: #ceab51;<br \/>\n}<\/p>\n<p>.button7 span:after {<br \/>\n  content: &#8216;is the mother of invention.&#8217;;<br \/>\n}<\/p>\n<p>.button8 {<br \/>\n  background-color: #1eab5c;<br \/>\n}<\/p>\n<p>.button8 span:after {<br \/>\n  content: &#8216;is worth a thousand words.&#8217;;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/td>\n<td>&lt;style&gt;<br \/>\nselect {<br \/>\n  width:70%;<br \/>\n  border: 2px solid pink;<br \/>\n}<\/p>\n<p>.button1 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #f4511e;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button1 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button1 span:after {<br \/>\n  content: &#8216;in Spain falls mainly on the plain.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button1:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button1:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button2 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #511ef4;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button2 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button2 span:after {<br \/>\n  content: &#8216;make light work.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button2:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button2:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button3 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #51f41e;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button3 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button3 span:after {<br \/>\n  content: &#8216;in the hand is worth two in the bush.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button3:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button3:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button4 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #154f1e;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button4 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button4 span:after {<br \/>\n  content: &#8216;in time saves nine.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button4:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button4:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button5 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #1577e1;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button5 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button5 span:after {<br \/>\n  content: &#8216;gather no moss.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button5:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button5:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button6 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #cea5b1;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button6 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button6 span:after {<br \/>\n  content: &#8216;and no play makes Jack a dull boy.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button6:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button6:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button7 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #ceab51;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button7 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button7 span:after {<br \/>\n  content: &#8216;is the mother of invention.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button7:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button7:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<\/p>\n<p>.button8 {<br \/>\n  display: inline-block;<br \/>\n  border-radius: 4px;<br \/>\n  background-color: #1eab5c;<br \/>\n  border: none;<br \/>\n  color: #FFFFFF;<br \/>\n  text-align: center;<br \/>\n  font-size: 28px;<br \/>\n  padding: 20px;<br \/>\n  width: 250px;<br \/>\n  transition: all 0.5s;<br \/>\n  cursor: pointer;<br \/>\n  margin: 5px;<br \/>\n}<\/p>\n<p>.button8 span {<br \/>\n  cursor: pointer;<br \/>\n  display: inline-block;<br \/>\n  position: relative;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button8 span:after {<br \/>\n  content: &#8216;is worth a thousand words.&#8217;;<br \/>\n  position: absolute;<br \/>\n  opacity: 0;<br \/>\n  top: 60px;<br \/>\n  right: -20px;<br \/>\n  transition: 0.5s;<br \/>\n}<\/p>\n<p>.button8:hover span {<br \/>\n  padding-right: 25px;<br \/>\n  height: 245px;<br \/>\n}<\/p>\n<p>.button8:hover span:after {<br \/>\n  opacity: 1;<br \/>\n  right: 0;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/td>\n<\/tr>\n<\/table>\n<p>Cute, huh?!<\/p>\n<hr>\n<p id='css3batgt'>Previous relevant <a target=_blank title='CSS3 Button Animation Transition Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-button-animation-transition-game-tutorial\/'>CSS3 Button Animation Transition Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Button Animation Transition Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/animated_button_game.jpg\" title=\"CSS3 Button Animation Transition Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Button Animation Transition Game Tutorial<\/p><\/div>\n<p>The recent <a title='CSS3 Transition Game Tutorial' href='#css3tgt'>CSS3 Transition Game Tutorial<\/a> had us examining <a target=_blank title='CSS3 information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> (Cascading Style Sheet) specification <a target=_blank title='CSS3 Transitions information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>&#8220;Transitions&#8221;<\/a> as tools for animation styling.  Today we &#8230;<\/p>\n<ul>\n<li>apply such &#8220;transition&#8221; thinking to the animation of HTML button elements (as inspired by <a target=_blank title='https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_buttons_animate1' href='https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_buttons_animate1'>https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_buttons_animate1<\/a> thanks) &#8230; in terms of &#8230;<\/li>\n<li>creating a game whereby the user links a (most often based on <a target=_blank title='Wikipedia' href='http:\/\/wikipedia.org'>Wikipedia<\/a> sources, thanks) &#8220;proverb or phrase explanation&#8221; the game randomly selects for the user in an HTML select element dropdown (made to be &#8220;readonly&#8221; via the use of the <a target=_blank title='HTML element disabled attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_disabled.asp'>disabled<\/a>=&#8221;disabled&#8221; attribute) &#8230; to &#8230;<\/li>\n<li>HTML button elements initially showing a prefix &#8230; that when &#8230;<\/li>\n<li>hovered over CSS3 &#8220;transition&#8221; animation also channelling the checked against the <a target=_blank title='CSS :after selector information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_after.asp'>:after<\/a> selector to show a full proverb or phrase as the user selection &#8230;<\/li>\n<li>Javascript checked against <a target=_blank title='HTML and Javascript data attribute information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/Guide\/HTML\/Using_data_attributes'><i>data attributed<\/i><\/a> (to hide from &#8220;nosy&#8221; users) the link to &#8220;explanation&#8221; correct matches to &#8230;<\/li>\n<li>increase the user&#8217;s score in the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.html\" title=\"Click picture\">game<\/a>&#8216;s HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/animated_button_game.html_GETME\" title=\"animated_button_game.html\">animated_button_game.html<\/a><\/li>\n<\/ul>\n<p>Do you remember a recent <a title='Recent Stop Press' href='#pstopp'>&#8220;Stop Press&#8221;<\/a> explaining a neat way to get mobile platforms to effectively map their onclick event logic to an onmouseover event based Javascript logic set, via the application of &#8230;<\/p>\n<p><code><br \/>\n onclick=\"\"<br \/>\n<\/code><\/p>\n<p> &#8230; HTML element (today that being a <i>button<\/i> element) logic?  Well, today that is used again to allow for this game to be played on mobile devices, but just with those users clicking buttons rather than the &#8220;hover&#8221; that a non-mobile user does to play the same game.<\/p>\n<hr>\n<p id='css3tgt'>Previous relevant <a target=_blank title='CSS3 Transition Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-game-tutorial\/'>CSS3 Transition Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Transition Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/css3_transitions_game.jpg\" title=\"CSS3 Transition Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Transition Game Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='CSS3 Transition Primer Tutorial' href='#css3tpt'>CSS3 Transition Primer Tutorial<\/a> started us thinking about <a target=_blank title='CSS3 specification information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> (Cascading Style Sheet) specification <a target=_blank title='CSS3 Transitions information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>&#8220;Transitions&#8221;<\/a>, and there, we intimated that they could be used to serve up to the web application user simple animation functionality.  Today, we go a bit further down that road exporing a few more ideas in this line of work, along the way using &#8220;transitions&#8221; in a simple spider game as below &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.htm?game=y' style='width:100%;height:920px;' title='Spider Game'><\/iframe><\/p>\n<p>Added into the &#8220;transitions&#8221; usage, building on yesterday, are the concepts (all available to read further on <a target=_blank title='CSS3 Transitions information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>here<\/a>, thanks) &#8230;<\/p>\n<ul>\n<li>multiple &#8220;concept&#8221; transitions<\/li>\n<li>transition-timing-function modes of use<\/li>\n<li>transition (CSS styling) <i>definition<\/i> separated out into its 3 constituent parts &#8230;\n<ol>\n<li>transition-property<\/li>\n<li>transition-delay<\/li>\n<li>transition-duration<\/li>\n<\/ol>\n<p>&#8230; as per &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n.cdiv {<br \/>\n    width: 300px;<br \/>\n    height: 200px;<br \/>\n    background: red;<br \/>\n    -webkit-transition-delay: 3s;<br \/>\n    transition-delay: 3s;<br \/>\n    -webkit-transition-property: height, width; \/* Safari *\/<br \/>\n    transition-property: height, width;<br \/>\n    -webkit-transition-duration: 4s, 22s; \/* Safari *\/<br \/>\n    transition-duration: 4s, 22s;<br \/>\n}<br \/>\n<br \/>\n.cdiv:hover {<br \/>\n    width: 600px;<br \/>\n    height: 400px;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>The game today recalls the recent <a target=_blank title='CSS3 Background Size Contain and Cover Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-background-size-contain-and-cover-primer-tutorial\/'>CSS3 Background Size Contain and Cover Primer Tutorial<\/a> use of the CSS <i>background-size<\/i> <i>contain<\/i> and <i>cover<\/i> attribute values that we harness to (lamely, admittedly) make (just one of our) spiders rear up, and mildly scare our web application game users (perhaps a few of which are rolling on the floor in apopleptic laughter).<\/p>\n<p>The HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.htm\" title=\"Click picture\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html-GETME\" title=\"css3_transitions.htm\">css3_transitions.htm<\/a> HTML and CSS and Javascript source code, changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html-GETME\" title=\"css3_transitions.htm\">this way<\/a>.<\/p>\n<hr>\n<p id='css3tpt'>Previous relevant <a target=_blank title='CSS3 Transition Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-transition-primer-tutorial\/'>CSS3 Transition Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Transition Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/css3_transitions.jpg\" title=\"CSS3 Transition Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Transition Primer Tutorial<\/p><\/div>\n<p>The <a target=_blank title='CSS3 specification information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> (Cascading Style Sheet) specification introduced <a target=_blank title='CSS3 Transitions information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'>&#8220;Transitions&#8221;<\/a> to CSS styling of web pages.  A CSS3 &#8220;transition&#8221; &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/css\/css3_transitions.asp'><p>\nCSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.\n<\/p><\/blockquote>\n<p>Today, we use the CSS <a target=_blank title='CSS hover selector' href='https:\/\/www.w3schools.com\/cssref\/sel_hover.asp'><i>:hover<\/i><\/a> selector as the basis for transitions in our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html\">live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css3_transitions.html_GETME\" title=\"css3_transitions.html\">css3_transitions.html<\/a> HTML and CSS source code.<\/p>\n<p>As you might surmise using this web application, CSS3 &#8220;Transitions&#8221; can act like simple animations.<\/p>\n<p id='pstopp'><b><\/i>Stop Press<\/i><\/b><\/p>\n<p>The CSS <a target=_blank title='CSS hover selector' href='https:\/\/www.w3schools.com\/cssref\/sel_hover.asp'><i>:hover<\/i><\/a> selector is not a &#8220;good fit&#8221; (euphemism for &#8220;it doesn&#8217;t work, Bud!&#8221;) on mobile platforms.  Looking around the &#8220;net&#8221; got to this <a target=_blank title='Great link, thanks' href='https:\/\/stackoverflow.com\/questions\/22559756\/changing-hover-to-touch-click-for-mobile-devices'>great link<\/a>, thanks, which suggested adding <i>onlick=&#8221;&#8221;<\/i> on all relevant <a target=_blank title='CSS hover selector' href='https:\/\/www.w3schools.com\/cssref\/sel_hover.asp'><i>:hover<\/i><\/a> selector HTML elements, to allow for (and it only really makes sense when the real <i>onclick<\/i> event meaning is not needed) the <i>onclick<\/i> event to be simulating the <i>onmouseover<\/i> event, for those mobile platforms missing the real <i>onmouseover<\/i> event.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34023' onclick='var dv=document.getElementById(\"d34023\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34023' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34038' onclick='var dv=document.getElementById(\"d34038\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34038' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34085' onclick='var dv=document.getElementById(\"d34085\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/button\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34085' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34104' onclick='var dv=document.getElementById(\"d34104\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/class\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34104' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d34202' onclick='var dv=document.getElementById(\"d34202\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/slideshow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d34202' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The benefits of multiple class HTML element definitions came to the fore when we presented CSS3 Button Animation Transition Game Sharing Tutorial and today we find a &#8230; slideshow &#8230; meets &#8230; animated GIF &#8230; &#8220;presentation&#8221; way as our theme &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/multiple-class-slideshow-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,37],"tags":[83,84,210,576,590,652,894,980,997,1151,1319,1345],"class_list":["post-34202","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-tutorials","tag-animated-gif","tag-animation-2","tag-class","tag-html","tag-image","tag-javascript","tag-overlay","tag-presentation","tag-programming","tag-slideshow","tag-tutorial","tag-url"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34202"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=34202"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34202\/revisions"}],"predecessor-version":[{"id":34209,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/34202\/revisions\/34209"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=34202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=34202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=34202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}