in this tutorial I'm going to walk through how to make a movable object like the rubber ducky below:
step 1: div tag
everything is going to live inside a div tag. this is a basic element of html that we can put things inside of.<div></div>
by default an empty div tag doesn't look like anything, so we need to give it a background color and a default size. we do this by adding properties to it using the "style" attribute.
<div style="
width:80px;
height:80px;
background:blue;"></div>
step 2: resizeability
the next thing we are going to do is make the div resizable. this adds a little handle to the bottom right corner of the element that the user can drag to resize it. to do this, we need to add two more properties: "overflow: auto" and "resize: both"
<div style="
width:80px;
height:80px;
background:blue;
overflow:auto;
resize:both;"></div>
unfortunately I find that on mobile browsers, the handle is extremely small and hard to grab, so keep this in mind.
if you want the div to only grow vertically or horizontally, you can use "resize: vertical" or "resize: horizontal"
step 3: background image
to add the object to the div, we will add it as a background image. css allows you to add multiple background images to an element, and also control their size, placement, and if they repeat or not. to make this work, we will add the rubber duck as an image using "background-image: url('...')", put it in the bottom right corner with "background-position: 100% 100%", and make it not repeat with "background-repeat: no-repeat". we'll also remove the old "background: blue" style.
<div style="
width:80px;
height:80px;
background-image: url('https://staging.cohostcdn.org/attachment/5ed9b6da-9f0c-4e34-ad5a-fa371307129e/ducky.png');
background-position: 100% 100%;
background-repeat: no-repeat;
overflow:auto;
resize:both;"></div>
now we're basically done! but there are a few more improvements that can be made.
step 4: clearer handle
I find the default browser handle to be hard to see, so I like to add a little 
icon to the bottom right. to do this, we can add it as a second background layer. in css, to add a second background you simply add a second value to all the background properties, separated by a comma:
<div style="
width:80px;
height:80px;
background-image: url('https://staging.cohostcdn.org/attachment/07d006ca-906f-4499-a89a-4528009f39e3/mover.png'), url('https://staging.cohostcdn.org/attachment/5ed9b6da-9f0c-4e34-ad5a-fa371307129e/ducky.png');
background-position: 100% 100%, 100% 100%;
background-repeat: no-repeat, no-repeat;
overflow:auto;
resize:both;"></div>
step 5: maximum sizes
you may have noticed that the div can be scaled infinitely large. this can be a problem if you're using it as a sub-element and you want to limit its size. to do this, you can use max-width and max-height. in the following example, we'll limit the width to 50% and the height to 200px.
<div style="
width:80px;
height:80px;
max-width:50%;
max-height:200px;
background-image: url('https://staging.cohostcdn.org/attachment/07d006ca-906f-4499-a89a-4528009f39e3/mover.png'), url('https://staging.cohostcdn.org/attachment/5ed9b6da-9f0c-4e34-ad5a-fa371307129e/ducky.png');
background-position: 100% 100%, 100% 100%;
background-repeat: no-repeat, no-repeat;
overflow:auto;
resize:both;"></div>
there is also min-width and min-height, which allows you to set a limit on how small the object can become. unfortunately, resizing an object to be smaller than the width and height properties is unsupported on safari and related browsers, so things can break on those browsers if you depend on that behavior.
alright, that's all from me for now. happy coposting! be sure to use the #interactable tag on the things you make<3
