![](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2013\/11\/a-blue-box.png\")
<\/figure>\nLet us count the ways:<\/p>\n
- \n
- You can create a
<div><\/code> and style it with CSS. Immortalized here<\/a> by Tim Holman.<\/li>\n- But CSS is old school right? You could use Sass to help you write it<\/a>.<\/li>\n
- But to be totally hip you would make a @mixin in SCSS<\/a> that you could call.<\/li>\n
- It wouldn’t have to be a
<div><\/code> either, it could be a<table><\/code> (or literally any other HTML element) and it could have the styles inlined directly on the element<\/a>.<\/li>\n- Or you could not even use HTML at all but just a pseudo element on the implied body<\/a> or simply a border on the implied root<\/a>.<\/li>\n
- You could even skip CSS of any kind entirely going for spacing via HTML elements and old school attributes<\/a>.<\/li>\n
- Maybe a giant dash character<\/a>?<\/li>\n
- CSS gradients could draw a box<\/a> if you have color stops with no space between them. Might as well use Sass eh?<\/li>\n
- Don’t forget about box-shadow<\/a> also.<\/li>\n
- Certainly a drawing-specific language like SVG could do the trick<\/a>.<\/li>\n
- Or a drawing-specific language like Canvas could as well<\/a>.<\/li>\n
- Pfff, canvas? How pedestrian. How about WebGL?<\/a><\/li>\n
- Certainly some vanilla JavaScript could handle the job<\/a>.<\/li>\n
- Might as well make that a bookmarklet<\/a>.<\/li>\n
- But why do that when you could write a jQuery plugin<\/a>?<\/li>\n
- We’re just drawing to a screen after all, the web isn’t the only place you can do that. How about an iPhone app<\/a> that draws a box in Objective C?<\/li>\n<\/ul>\n
Pretty wild hey? Surely this isn’t a comprehensive collection of methods either (different image formats, dataURI’s, etc). Are all of them good to have and know about it? Does this make it intimidating for beginners or can they safely ignore many of them and learn them in time as needed? <\/p>\n","protected":false},"excerpt":{"rendered":"
A little meme went around CodePen the other night. A Blue Box. I’m not sure how it started, but lots […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[478],"class_list":["post-157371","post","type-post","status-publish","format-standard","hentry","category-articles","tag-css"],"acf":{"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":317348,"url":"https:\/\/css-tricks.com\/css-painting-order\/","url_meta":{"origin":157371,"position":0},"title":"CSS Painting Order","author":"Geoff Graham","date":"July 17, 2020","format":false,"excerpt":"Usually, when I see terms like \"painting order\" or \"stacking context\" my brain will start to shut off and my eyes will gloss over. Not that my brain doesn't normally shut off more often than not, but that's another topic for another time. Martin Robinson over at Igalia touches on\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/stacking-contexts.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/stacking-contexts.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/stacking-contexts.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/stacking-contexts.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/stacking-contexts.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":390460,"url":"https:\/\/css-tricks.com\/distinguishing-components-and-utilities-in-tailwind\/","url_meta":{"origin":157371,"position":1},"title":"Distinguishing “Components” and “Utilities” in Tailwind","author":"Zell Liew","date":"February 18, 2026","format":false,"excerpt":"The distinction between \"components\" and \"utilities\" seems clear at first glance, but gets a little blurred when working with them in Tailwind.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/tailwind-paint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/tailwind-paint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/tailwind-paint.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/tailwind-paint.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/tailwind-paint.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":351034,"url":"https:\/\/css-tricks.com\/fun-times-styling-checkbox-states\/","url_meta":{"origin":157371,"position":2},"title":"Fun Times Styling Checkbox States","author":"Preethi","date":"September 10, 2021","format":false,"excerpt":"We might leave a text input unstyled. We might leave a link unstyled. Even a button. But checkboxes\u2026 we don\u2019t leave them alone. That\u2019s why styling checkboxes never gets old. Although designing checkboxes is not that complicated, we also don\u2019t have to settle for simple background color changes, or adding\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/fun-checkboxes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/fun-checkboxes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/fun-checkboxes.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/fun-checkboxes.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/fun-checkboxes.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":152254,"url":"https:\/\/css-tricks.com\/conical-gradients-css\/","url_meta":{"origin":157371,"position":3},"title":"Conical Gradients in CSS","author":"Shankar Cabus","date":"October 8, 2013","format":false,"excerpt":"When I create filters, shadows, transformations or gradient backgrounds in CSS, it feels amazing. Who would have thought CSS would come this far. No need to use images for any of that stuff. I can almost hear the browser telling me \"don't worry, I do it for you.\" Despite all\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196202,"url":"https:\/\/css-tricks.com\/accidental-css-resets\/","url_meta":{"origin":157371,"position":4},"title":"Accidental CSS Resets","author":"Chris Coyier","date":"February 18, 2015","format":false,"excerpt":"Any time you use a shorthand property in CSS, you set all the values for all the properties it deals with. It's not a bug, it's just how CSS works. I've seen it confuse people plenty of times. Let's shine a light on the issue to hopefully make it more\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":383506,"url":"https:\/\/css-tricks.com\/positioning-text-around-elements-with-css-offset\/","url_meta":{"origin":157371,"position":5},"title":"Positioning Text Around Elements With CSS Offset","author":"Preethi","date":"January 24, 2025","format":false,"excerpt":"When it comes to positioning elements on a page, including text, there are many ways to go about it in CSS \u2014 the literal position property with corresponding inset-* properties, translate, margin, anchor() (limited browser support at the moment), and so forth. The offset property is another one that belongs\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"The number four in large print with a label that says number four' along it's top-left edge.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/css-offset-number-4.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/css-offset-number-4.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/css-offset-number-4.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/css-offset-number-4.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/01\/css-offset-number-4.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/157371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=157371"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/157371\/revisions"}],"predecessor-version":[{"id":157386,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/157371\/revisions\/157386"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=157371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=157371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=157371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- But CSS is old school right? You could use Sass to help you write it<\/a>.<\/li>\n