<div><\/code>.<\/p>\nWhy would she do that? Here’s one pertinent possibility: it’s none of our business. We’re free to wonder, or even ask if it’s done respectfully enough. But does it really matter? Let’s stop short of assuming she doesn’t know what’s she’s doing, assuming it’s a twisted form of pain, or that she’s unaware of other technologies. Check out the example where she drew the official SVG logo with CSS and a single div. Woke.<\/p>\n","protected":false},"author":3,"featured_media":269003,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Why would you do that in CSS? Because why not?","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[478],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/Screen-Shot-2018-03-27-at-2.36.19-PM.png?fit=2624%2C1534&ssl=1","jetpack-related-posts":[{"id":330337,"url":"https:\/\/css-tricks.com\/very-extremely-practical-css-art\/","url_meta":{"origin":268901,"position":0},"title":"Very Extremely Practical CSS Art","date":"December 8, 2020","format":false,"excerpt":"I've always enjoyed the CSS art people create, but I\u2019ve never ventured into it much myself. I'm familiar with many of the tricks involved, but still find it surprising every time: the way people are able to make such fluid and beautiful images out of little boxes. I always end\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-08-at-4.35.09-PM.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335580,"url":"https:\/\/css-tricks.com\/css-border-font\/","url_meta":{"origin":268901,"position":1},"title":"CSS Border Font","date":"February 28, 2021","format":false,"excerpt":"Every letter in this \"font\" by Davor Suljic is a single div and drawn only with border. That means employing some trickery like border-radius with exotic syntax like border-radius: 100% 100% 0 0 \/ 37.5% 37.5% 0 0; which rounds just the top of an element with a certain chillness\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/Screen-Shot-2021-02-28-at-8.02.33-AM.png?fit=1200%2C702&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255226,"url":"https:\/\/css-tricks.com\/animating-single-div-art\/","url_meta":{"origin":268901,"position":2},"title":"Animating Single Div Art","date":"May 31, 2017","format":false,"excerpt":"One thing that single div pieces rarely do is animate. If you can transform your div or one of its pseudo elements, that's fair (as Lynn Fisher does with her fantastic BB-8). But you cannot directly change the opacity or transform of the individual \"elements\" you create inside your div,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192219,"url":"https:\/\/css-tricks.com\/ajaxing-svg-sprite\/","url_meta":{"origin":268901,"position":3},"title":"Ajaxing for your SVG Sprite","date":"January 5, 2015","format":false,"excerpt":"Say you're building an SVG icon system. You're building a SVG sprite full of symbols by hand, or using a build tool like IcoMoon or grunt-svgstore to create it for you. What do you do with that sprite.svg? One option is to include it right at the top of the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":342718,"url":"https:\/\/css-tricks.com\/custom-property-brain-twisters\/","url_meta":{"origin":268901,"position":4},"title":"Custom Property Brain Twisters","date":"June 25, 2021","format":false,"excerpt":"I am part of that 82% that got the answer to Lea Verou's quiz wrong. Stephen Shaw posted a similar quiz as well and it's a fun exercise sharpen your CSS chops.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/custom-property-componentcolor.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335636,"url":"https:\/\/css-tricks.com\/how-to-use-tailwind-on-a-svelte-site\/","url_meta":{"origin":268901,"position":5},"title":"How to Use Tailwind on a Svelte Site","date":"March 12, 2021","format":false,"excerpt":"Let\u2019s spin up a basic Svelte site and integrate Tailwind into it for styling. One advantage of working with Tailwind is that there isn\u2019t any context switching going back and forth between HTML and CSS, since you\u2019re applying styles as classes right on the HTML. It\u2019s all the in same\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/tailwind-in-svelte.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268901"}],"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=268901"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268901\/revisions"}],"predecessor-version":[{"id":345964,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/268901\/revisions\/345964"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/269003"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=268901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=268901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=268901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}