Hello! and welcome to CSS Sandbox(The Box). First and foremost, The Box is a learning resource. Whether you are just beginning your coding journey, like I am, and even if you have some time under your belt, I guarentee The Box has something to teach you. I have dug deep and done my due diligence in terms of researching css variables and lesser known css in general.
A good place to start is with the cards on the landing page. Each card contains a little bit of CSS magic. You will find tutorial style videos linked in underneath some of the examples. Watch these to get a feel for what this site is all about.Back that thang up
Using The Box is simple. Once you are in the Sandbox page you will see a column titled "Sandbox Options". There is also a small box with the text "CSS Sandbox!". Within the options box there are all kinds of CSS properties. Sometimes there is a slider next to the property, sometimes there is a menu with options or even a text field you fill in. To start with, just play around with some of the sliders and watch the box. Everything you do with the sliders affects the box's CSS property with the slider name. You can change everything!.
Once you get the hang of everything you can create a simple
element with a
inside of it. It is basically a headline or a paragraph, depending on what size and layout choices you make. Once you have something you like you have the option of getting the HTML and CSS code for what you made! Just press the "Show Code" button. Now you can copy and paste the code into your project.
Even if you don't use what you make, looking at the code can give you ideas for the future. Maybe you will discover some CSS that you didn't know about. Hopefully, you had a good time no matter what you use The Box for.
Take it to the next level by going to "Advanced Options". Just click the button with the . Now you can control the transitions that the little box makes when you change something. You will also have access to the site color theme. Just another fun thing to play around with.
I have included a few Google Fonts. These won't automatically be included in your page if you copy and paste the code reveal. In order to use Google Fonts you need to go their website and follow some simple instructions to import the fonts you need into your projectBack that thang up
This explanation refers to the Slider and Ball example on the landing page. First off, the ball is nothing more than a "div" element with
border-radius: 50% and position: relative
I first assign a css variable to the "left" css property of the div. I then define the variable globally at the top of my css stylesheet, assigning it to the ":root" selector. This is a little trick that essentially makes any variable global.
I then assign the proper initial value to the variable that positions the div where I want it. Finally, I attach an event listener to the nearby slider and set the slider's value equals to css variable I made earlier. The event listener allows us to be updated upon any change in the slider's value. Defining a "transition" on the moving div helps smooth out the animation. Also, alligning the inital left value with the slider's minimum value and making sure the slider's maximum value doesn't position our div in an undesireable place are key steps you won't want to skip.Back that thang up
Over the course of designing this site, this feature evolved into what it is now. At first it was a text input for one box, just to show how a css variable can be assigned on the fly. Then I deceded to go a step or two further and make a game out of it. Now, in my eyes, that little game almost outshines the sandbox
By simply passing around the variable and its properties, the you will receive instant feedback and maybe learn a color or two in the process. I am planning a tutorial in the near future and I will update this section when I do.Back that thang up
This explanation gets a little verbose, as they say. I am attaching a link to a video series I made that details the build process for this element. There is a lot of fancy css combined with a timing function. To see a step by step guide, check out this You Tube video seriesBack that thang up
You may have noticed the option for Text Outline Color, as well as the toggle button. The fact is that this isn't an official CSS property. The effect is the result of a few small text shadows chained together. If you bring up the code reveal you can see for yourself. I found thisText Outline Hack Site and decided to include the trick just for fun. The site will give you the exact numbers you need for your specific text size and font-family. Pretty Cool stuff.Back that thang up
You might have noticed that the returned CSS for your box only has one transform applied, and that transform is matrix3d. This is because of how the program retrieves the CSS information. It uses jquery to fetch the CSS properties, and in that process all the transforms get lumped into one big matrix3d transform. At this stage, I haven't learned enough to be able to break that down into individual transforms. I also haven't looked into other ways to get the CSS reveal to show your individual transforms. At some point in the future I may tackle this issue. For now, know that the matrix3d transform will do the same thing as your individual transforms. Also, you have the values of each seperate transform on display in Sandbox options. If you need the code you can always just apply what you see there.Back that thang up
If I am being honest, the puzzle was a total after thought. Making this site has been my first time using JQuery UI. I was surfing around their DOCS and I came across their drag and drop section. While this is a native api (you don't need jquery ui), they had some example code. I took their code and tweaked it heavily into a simple puzzle. I just googled "funny cartoon" and took the second illustration from images. Credit to whomever made the cartoon. It is kind of funny. Making the puzzle was easy. I just chopped an image up into nine equal squares and set up nine drag and drop tiles of the same dimensions. I would image if someone had the willingness, something super cool could be made with drag and drop.Back that thang up