<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>html &#8211; Set Side B</title>
	<atom:link href="https://setsideb.com/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>https://setsideb.com</link>
	<description>The Flipside of Gaming</description>
	<lastBuildDate>Thu, 27 Feb 2025 06:03:22 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>

<image>
	<url>https://setsideb.com/wp-content/uploads/2022/04/cropped-mascot512-32x32.png</url>
	<title>html &#8211; Set Side B</title>
	<link>https://setsideb.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Gamefinds: CSS Puzzle Box</title>
		<link>https://setsideb.com/gamefinds-css-puzzle-box-2-0/</link>
		
		<dc:creator><![CDATA[rodneylives]]></dc:creator>
		<pubDate>Thu, 27 Feb 2025 15:00:00 +0000</pubDate>
				<category><![CDATA[niche]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[puzzle]]></category>
		<category><![CDATA[PuzzleBox]]></category>
		<category><![CDATA[trickery]]></category>
		<category><![CDATA[web]]></category>
		<guid isPermaLink="false">https://setsideb.com/?p=9407</guid>

					<description><![CDATA[Some of you may remember seeing, from a while ago, a clever hack that implemented a series of interactive puzzles on a website. If you didn&#8217;t see it, or don&#8217;t know much about how these things usually work, you might not think much of that, we&#8217;ve all been playing web games for two decades now, &#8230; <a href="https://setsideb.com/gamefinds-css-puzzle-box-2-0/" class="more-link">Continue reading<span class="screen-reader-text"> "Gamefinds: CSS Puzzle Box"</span></a>]]></description>
										<content:encoded><![CDATA[<div class="wp-block-image">
<figure class="alignleft size-full"><img fetchpriority="high" decoding="async" width="256" height="256" src="https://setsideb.com/wp-content/uploads/2023/11/gamefinds_big.png" alt="" class="wp-image-6282" srcset="https://setsideb.com/wp-content/uploads/2023/11/gamefinds_big.png 256w, https://setsideb.com/wp-content/uploads/2023/11/gamefinds_big-150x150.png 150w" sizes="(max-width: 256px) 85vw, 256px" /></figure>
</div>


<p><em>We love it when we find weird and unique indie games to tell you all about! Our alien friends to the left herald these occasions.</em></p>



<p>Some of you may remember seeing, from a while ago, a clever hack that implemented a series of interactive puzzles on a website. If you didn&#8217;t see it, or don&#8217;t know much about how these things usually work, you might not think much of that, we&#8217;ve all been playing web games for two decades now, and an entire web platform for them (Flash) has arisen and died in that time. It now has an updated version, with new puzzles to figure out!</p>


<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img decoding="async" width="913" height="1024" src="https://setsideb.com/wp-content/uploads/2025/02/image-23-913x1024.png" alt="" class="wp-image-9412" style="width:438px;height:auto" srcset="https://setsideb.com/wp-content/uploads/2025/02/image-23-913x1024.png 913w, https://setsideb.com/wp-content/uploads/2025/02/image-23-268x300.png 268w, https://setsideb.com/wp-content/uploads/2025/02/image-23-768x861.png 768w, https://setsideb.com/wp-content/uploads/2025/02/image-23-1200x1346.png 1200w, https://setsideb.com/wp-content/uploads/2025/02/image-23.png 1335w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px" /><figcaption class="wp-element-caption">CSS Puzzle Box 2.0, starting state</figcaption></figure>
</div>


<p>Nowadays these things tend to be made using Javascript, or some language that renders down to Javascript. That&#8217;s what makes the CSS Puzzle Box amazing: it doesn&#8217;t use Javascript! It&#8217;s implemented entirely with HTML tags and CSS! <a href="https://suricrasia.online/puzzlebox/">See for yourself</a>! Caveat: it doesn&#8217;t work on mobile platforms, some of the click or drag handles are a little hard to hit with your clumsy human finger. On desktop browsers, watching for the cursor to change when it&#8217;s over an interactive element is tremendously helpful.</p>



<p> It&#8217;s challenging, but far from impossible. It requires some close observation to get started, but after that you can probably get through it with enough time spent and effort expended. The hardest puzzle is one of the first, &#8220;Lights On,&#8221; one of those puzzles where clicking on a square inverts that light and those adjacent. <a href="https://www.logicgamesonline.com/lightsout/tutorial.html">You can follow these directions</a> (swapping off lights for on ones) to solve it, or click on the O in the Lights On title a few times to skip it, or just muddle through—if you get stuck with just one or two lights on and can&#8217;t clear them, mess up the puzzle by clicking everywhere on it randomly and try again, and eventually you&#8217;ll happen on a pattern that resolves nicely.</p>



<p>So, about the technical underpinnings. Its creator blackle mori (<a href="https://lethargic.talkative.fish/@suricrasia">Mastodon</a>) wrote up <a href="https://suricrasia.online/blog/inline-css-puzzle-box/">a nice breakdown</a> of how it manages to do what it does without scripting. Part of it includes the &lt;details&gt; tag and its accompanying &lt;summary&gt; tag, a way in pure HTML to have collapsing content. If you want to know the tricks there they are, but you don&#8217;t have to care about that to enjoy the puzzles. Good luck!</p>



<p><a href="https://suricrasia.online/puzzlebox/">CSS Puzzle Box 2.0</a> by blackle mori (webgame) </p>
<div class="saboxplugin-wrap" itemtype="http://schema.org/Person" itemscope itemprop="author"><div class="saboxplugin-tab"><div class="saboxplugin-gravatar"><img alt='rodneylives' src='https://secure.gravatar.com/avatar/cb688ada8b517e838b06bdbcddb8d1ea3dd56de2e66848938e8c6568002a4fa9?s=100&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/cb688ada8b517e838b06bdbcddb8d1ea3dd56de2e66848938e8c6568002a4fa9?s=200&#038;d=mm&#038;r=g 2x' class='avatar avatar-100 photo' height='100' width='100' itemprop="image"/></div><div class="saboxplugin-authorname"><a href="https://setsideb.com/author/rodneylives/" class="vcard author" rel="author"><span class="fn">rodneylives</span></a></div><div class="saboxplugin-desc"><div itemprop="description"></div></div><div class="clearfix"></div><div class="saboxplugin-socials "><a title="Twitter" target="_self" href="https://twitter.com/rodneylives" rel="nofollow noopener" class="saboxplugin-icon-grey"><svg aria-hidden="true" class="sab-twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z" /></svg></span></a><a title="Instagram" target="_self" href="https://www.instagram.com/rodneysnotdead/" rel="nofollow noopener" class="saboxplugin-icon-grey"><svg aria-hidden="true" class="sab-instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></span></a><a title="Html5" target="_self" href="https://www.metafilter.com/user/23306" rel="nofollow noopener" class="saboxplugin-icon-grey"><svg aria-hidden="true" class="sab-html5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path></svg></span></a><a title="Mastodont" target="_self" href="https://cybre.space/@rodneylives" rel="nofollow noopener" class="saboxplugin-icon-grey"><svg aria-hidden="true" class="sab-mastodont" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417 512"><path fill="currentColor" d="M417.8 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.5-28.4-290.4 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54-.6-4.4-.9-9-.9-13.9 85.6 20.9 158.6 9.1 178.7 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6V190.1c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H75.1c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"></path></svg></span></a></div></div></div>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Karate Great</title>
		<link>https://setsideb.com/karate-great/</link>
		
		<dc:creator><![CDATA[rodneylives]]></dc:creator>
		<pubDate>Fri, 05 May 2023 14:00:00 +0000</pubDate>
				<category><![CDATA[indies]]></category>
		<category><![CDATA[babarageo]]></category>
		<category><![CDATA[book2]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[indie]]></category>
		<category><![CDATA[karategreat]]></category>
		<category><![CDATA[kungfu]]></category>
		<category><![CDATA[spartanx]]></category>
		<category><![CDATA[web]]></category>
		<guid isPermaLink="false">https://setsideb.com/?p=4426</guid>

					<description><![CDATA[Another work of Babarageo, Karate Great riffs on Kung Fu, known as Spartan X in Japan in which you have to take down hordes of mooks, and the occasional boss, using karate moves. This revision of the idea gives you only one control, an attack that&#8217;s activated by clicking/tapping the game screen. This causes your &#8230; <a href="https://setsideb.com/karate-great/" class="more-link">Continue reading<span class="screen-reader-text"> "Karate Great"</span></a>]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="713" height="1024" src="https://setsideb.com/wp-content/uploads/2023/04/image-15-713x1024.png" alt="" class="wp-image-4428" srcset="https://setsideb.com/wp-content/uploads/2023/04/image-15-713x1024.png 713w, https://setsideb.com/wp-content/uploads/2023/04/image-15-209x300.png 209w, https://setsideb.com/wp-content/uploads/2023/04/image-15-768x1103.png 768w, https://setsideb.com/wp-content/uploads/2023/04/image-15.png 891w" sizes="auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px" /></figure>


<div class="wp-block-image">
<figure class="alignright size-large is-resized"><img loading="lazy" decoding="async" width="711" height="1024" src="https://setsideb.com/wp-content/uploads/2023/04/image-16-711x1024.png" alt="" class="wp-image-4429" style="width:260px;height:374px" srcset="https://setsideb.com/wp-content/uploads/2023/04/image-16-711x1024.png 711w, https://setsideb.com/wp-content/uploads/2023/04/image-16-208x300.png 208w, https://setsideb.com/wp-content/uploads/2023/04/image-16-768x1105.png 768w, https://setsideb.com/wp-content/uploads/2023/04/image-16.png 890w" sizes="auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px" /></figure>
</div>


<p>Another work of Babarageo, Karate Great riffs on Kung Fu, known as Spartan X in Japan in which you have to take down hordes of mooks, and the occasional boss, using karate moves. This revision of the idea gives you only one control, an attack that&#8217;s activated by clicking/tapping the game screen. This causes your leggy karate lady to swiftly knock basic opponents right off the screen, and inflict damage on bosses both mini and major. Further, if you can hit four opponents in quick succession, she&#8217;ll switch to some <em>gun fu</em>, pulling out a pink pistol and just blasting following opponents. Why doesn&#8217;t she use the gun all the time isn&#8217;t explained; it only shows up as the fifth through eighth hits of a combo. And if you can get in a <em>ninth</em> hit&#8230; well I don&#8217;t want to spoil it, but it makes short work of most bosses.</p>


<div class="wp-block-image">
<figure class="alignleft size-large is-resized"><img loading="lazy" decoding="async" width="711" height="1024" src="https://setsideb.com/wp-content/uploads/2023/04/image-17-711x1024.png" alt="" class="wp-image-4430" style="width:241px;height:347px" srcset="https://setsideb.com/wp-content/uploads/2023/04/image-17-711x1024.png 711w, https://setsideb.com/wp-content/uploads/2023/04/image-17-208x300.png 208w, https://setsideb.com/wp-content/uploads/2023/04/image-17-768x1105.png 768w, https://setsideb.com/wp-content/uploads/2023/04/image-17.png 890w" sizes="auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px" /></figure>
</div>


<p>All of these moves make K-lady pretty overpowered for most of the game! It isn&#8217;t until the last couple of stages where you face opponents where just clicking away at the screen rapidly won&#8217;t suffice. The last boss, an evil CEO, has an attack that can&#8217;t be deflected by the normal means, and will probably stymie you until you come to realize that you have to learn how to trigger the combo-ending move to thwart it.</p>



<p>It&#8217;s short but fun, as good web games should be!</p>


<div class="wp-block-image">
<figure class="aligncenter size-large is-resized"><img loading="lazy" decoding="async" width="711" height="1024" src="https://setsideb.com/wp-content/uploads/2023/04/image-18-711x1024.png" alt="" class="wp-image-4431" style="width:334px;height:481px" srcset="https://setsideb.com/wp-content/uploads/2023/04/image-18-711x1024.png 711w, https://setsideb.com/wp-content/uploads/2023/04/image-18-208x300.png 208w, https://setsideb.com/wp-content/uploads/2023/04/image-18-768x1105.png 768w, https://setsideb.com/wp-content/uploads/2023/04/image-18.png 890w" sizes="auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px" /></figure>
</div>


<p><a href="https://babarageo.com/game/karate/index.html?en">Karate Great</a> (web, $0)</p>
<div class="saboxplugin-wrap" itemtype="http://schema.org/Person" itemscope itemprop="author"><div class="saboxplugin-tab"><div class="saboxplugin-gravatar"><img alt='rodneylives' src='https://secure.gravatar.com/avatar/cb688ada8b517e838b06bdbcddb8d1ea3dd56de2e66848938e8c6568002a4fa9?s=100&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/cb688ada8b517e838b06bdbcddb8d1ea3dd56de2e66848938e8c6568002a4fa9?s=200&#038;d=mm&#038;r=g 2x' class='avatar avatar-100 photo' height='100' width='100' itemprop="image"/></div><div class="saboxplugin-authorname"><a href="https://setsideb.com/author/rodneylives/" class="vcard author" rel="author"><span class="fn">rodneylives</span></a></div><div class="saboxplugin-desc"><div itemprop="description"></div></div><div class="clearfix"></div><div class="saboxplugin-socials "><a title="Twitter" target="_self" href="https://twitter.com/rodneylives" rel="nofollow noopener" class="saboxplugin-icon-grey"><svg aria-hidden="true" class="sab-twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z" /></svg></span></a><a title="Instagram" target="_self" href="https://www.instagram.com/rodneysnotdead/" rel="nofollow noopener" class="saboxplugin-icon-grey"><svg aria-hidden="true" class="sab-instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></span></a><a title="Html5" target="_self" href="https://www.metafilter.com/user/23306" rel="nofollow noopener" class="saboxplugin-icon-grey"><svg aria-hidden="true" class="sab-html5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"></path></svg></span></a><a title="Mastodont" target="_self" href="https://cybre.space/@rodneylives" rel="nofollow noopener" class="saboxplugin-icon-grey"><svg aria-hidden="true" class="sab-mastodont" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417 512"><path fill="currentColor" d="M417.8 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.5-28.4-290.4 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54-.6-4.4-.9-9-.9-13.9 85.6 20.9 158.6 9.1 178.7 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6V190.1c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H75.1c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"></path></svg></span></a></div></div></div>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
