{"id":22535,"date":"2020-01-16T21:13:44","date_gmt":"2020-01-16T13:13:44","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22535"},"modified":"2020-06-29T01:40:06","modified_gmt":"2020-06-28T17:40:06","slug":"built-with-css","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/","title":{"rendered":"20 Cool Things You Won&#8217;t Believe Were Built Using CSS"},"content":{"rendered":"<p>Contrary to popular belief, <strong>CSS is not only used to provide basic style for a web page<\/strong> in order to make it look more attractive. There are plenty of other things that one can do with CSS as well. With the ability to create animations and interactions, CSS along with HTML and Javascript allow web developers the opportunity to play around and experiment with different methods.<\/p>\n<p>It is as if the web browser is like an empty canvas that they can play around with. Featured here are just <strong>18 examples of the cool and creative things that people have <a href=\"https:\/\/www.hongkiat.com\/blog\/css-triangle-generator\/\">built using CSS<\/a><\/strong>. From original characters to interesting animations, there\u2019s plenty to inspire you to mess around with CSS on your own.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css3-image-captions\/\" class=\"ref-block__link\" title=\"Read More: 6 Cool Image Captions with CSS3\" rel=\"bookmark\"><span class=\"screen-reader-text\">6 Cool Image Captions with CSS3<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-image-captions.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15247 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-image-captions.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">6 Cool Image Captions with CSS3<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCSS3 is really powerful. It used to be that we needed images or many lines of JavaScript code...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/pattle.github.io\/simpsons-in-css\/\">The Simpsons<\/a><\/h2>\n<p><strong>Chris Pattle<\/strong> created the members of the Simpsons family using only CSS. He took each character\u2019s face, broke it up into smaller shapes then pieced them back together. He even animated the eyes to breathe some life into the characters.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/the_simpsons_in_css.jpg\" alt=\"simpson\" width=\"500\" height=\"300\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cssdeck.com\/labs\/minions-css\">Minions With Pure CSS<\/a><\/h2>\n<p>If you can\u2019t get over the Minion craze (courtesy of the \u2018<em>Despicable Me<\/em>\u2018 movies), you\u2019ll be going bananas for this. Amr Zakaria has created Minions using pure CSS. The Minions come complete with blinking eyes and a friendly wave.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/minnion_jerry.jpg\" alt=\"minions\" width=\"354\" height=\"376\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cssdeck.com\/labs\/neon-signs-css3\">Broken neon sign<\/a><\/h2>\n<p>This is  an amazing example of  text-shadow implementation to achieve the broken neon signage effect with CSS. Mouse over to see the lights on the letters \u2018c\u2019, \u2018n\u2019 and \u2018i  \u2018dim slightly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/css3_neon.jpg\" alt=\"css neon\" width=\"500\" height=\"300\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/HugoGiraudel\/pen\/Ewger\">Mmm\u2026 Cheese<\/a><\/h2>\n<p>It\u2019s a simple block of cheese, or is it? <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/HugoGiraudel\/\">Hugo Giraduel<\/a> created this 3D cheese block using CSS. I don\u2019t know about you but it kind of looks like a certain household item too.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/cheese.jpg\" alt=\"cheese\" width=\"500\" height=\"300\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/HugoGiraudel\/full\/gpcwa\/\">Single Element CSS character<\/a><\/h2>\n<p>Another one of Hugo Giraudel\u2019s work. This time, he created an 8-bit character using only one element.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/brick_character.jpg\" alt=\"brick character\" width=\"500\" height=\"300\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/roxik.com\/cat\/\">Long Cat<\/a><\/h2>\n<p>Resize your browser window and the cat\u2019s body will stretch or compress accordingly with the browser window\u2019s width. How far do you think you can stretch or squash the CSS-kitty?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/long_cat.jpg\" alt=\"long cat\" width=\"500\" height=\"300\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.romancortes.com\/ficheros\/css-coke.html\">Rolling coke Can<\/a><\/h2>\n<p>Here\u2019s another fun one. When you scroll to the right, slowly, it looks as though you are spinning or rotating the Coke can. An awesome effect done purely with CSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/coke_bottle_css.jpg\" alt=\"coke bottle css\" width=\"500\" height=\"300\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thecodeplayer.com\/index.php\/walkthrough\/javascript-css3-calculator\">Calculator<\/a><\/h2>\n<p>This calculator\u2019s design is simple and clean but when combined with Javascript, it gives you a more fun and approachable way to take your calculations further.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/calculator.jpg\" alt=\"calculator\" width=\"500\" height=\"300\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/daneden\/pen\/JFxAw\">Smooth iOS toogle<\/a><\/h2>\n<p>This toggle button made by <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/daneden\/\">Dan Eden<\/a> was inspired by the iOS7 toogle. If you try it out for yourself, you\u2019ll be able to see how similiar this is to the original iOS7 toogle button.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/ios_7_toogle.jpg\" alt=\"ios toogle\" width=\"500\" height=\"300\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/lpi\/pen\/vgaJC\">Minion<\/a><\/h2>\n<p>This is another adorable Minion done in the style of a drawing crafted from CSS.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/minnion.jpg\" alt=\"minion\" width=\"100%\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Zaku\/pen\/vcaFr\">Menu toogle SVG animation<\/a><\/h2>\n<p>Take a look at the animation\u2019s demo and you will see the smooth transition of the menu shape into another shape.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/menu_toggle_svg.jpg\" alt=\"menu toggle svg\" width=\"500\" height=\"300\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/lynnandtonic\/pen\/NWWmzjr\">Tesla Truck<\/a><\/h2>\n<p>Do you believe that this shiny Tesla truck is made of just a single <code>div<\/code> element? Not to mention that it also has great details with the lighting and the front light. Pretty impressive.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/tesla-truck.jpg\" alt=\"Tesla Truck on dark background\" width=\"740\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/alphardex\/pen\/dyPorwJ\">Snow at Night<\/a><\/h2>\n<p>An animated snow fall. Made with 200 hundreds <code>div<\/code> and CSS animation. It could be a perfect background for your website during the winter season or Christmas.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/snow.jpg\" alt=\"Snow at Night\" width=\"740\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/ivorjetski\/pen\/ExaKmjw\">CSS Playing Card<\/a><\/h2>\n<p>A playing card made entirely with just HTML and CSS even the details like the King\u2019s shirt and the body.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/css-playing-card.jpg\" alt=\"King Card\" width=\"740\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/aaroniker\/pen\/PowbEKp\">CSS Heart Switch<\/a><\/h2>\n<p>A switch UI with a heart shape. You could possibly use it to make your website or app look mores unconventional.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/css-heart-switch.jpg\" alt=\"Switch UI in heart shape with pink color\" width=\"740\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/z-\/pen\/xxbrEbL\">CSS Swinging Christmas Tree<\/a><\/h2>\n<p>What\u2019s better than a Christmas tree? A <em>swinging<\/em> Christmas tree made fully with CSS animation. A perfect decoration for your website during Christmas.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/css-swing-christmas.jpg\" alt=\"Christmas tree swinging\" width=\"740\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/andrewrock\/pen\/jOEZxrY\">CSS Camper<\/a><\/h2>\n<p>If you\u2019re not a fan of the Tesla truck, what about this classic VW camper van?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/css-camper.jpg\" alt=\"Camper van with pink color\" width=\"740\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/DonKarlssonSan\/pen\/KKwvVGz\">CSS Square Swirl<\/a><\/h2>\n<p>With Pug templates, SCSS, precission calculation we can make this square swirl.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/css-square-swirl.jpg\" alt=\"Swirl in square shape\" width=\"740\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/TajShireen\/pen\/abzmoRE\">CSS Multiple Text Shadow<\/a><\/h2>\n<p>With just CSS we can now also add shadow to text. Not just one but several to make it more alive like below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/multiple-text-shadow.jpg\" alt=\"multiple text shadow\" width=\"740\" height=\"480\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/codepen.io\/chrisota\/pen\/QWWxXxQ\">CSS Rolex<\/a><\/h2>\n<p>Also it\u2019s not made entirely with HTML and CSS \u2014 the clock ticking hands are moved with JavaScript \u2014 this fancy Lorex watch detail is just fascinating. That\u2019s make worth into this list.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/css-rolex.jpg\" alt=\"Rolex watch\" width=\"740\" height=\"480\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Contrary to popular belief, CSS is not only used to provide basic style for a web page in order to make it look more attractive. There are plenty of other things that one can do with CSS as well. With the ability to create animations and interactions, CSS along with HTML and Javascript allow web&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>20 Cool Things You Won&#039;t Believe Were Built Using CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Contrary to popular belief, CSS is not only used to provide basic style for a web page in order to make it look more attractive. There are plenty of other\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/built-with-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"20 Cool Things You Won&#039;t Believe Were Built Using CSS\" \/>\n<meta property=\"og:description\" content=\"Contrary to popular belief, CSS is not only used to provide basic style for a web page in order to make it look more attractive. There are plenty of other\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/built-with-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-16T13:13:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-28T17:40:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/the_simpsons_in_css.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"20 Cool Things You Won&#8217;t Believe Were Built Using CSS\",\"datePublished\":\"2020-01-16T13:13:44+00:00\",\"dateModified\":\"2020-06-28T17:40:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/\"},\"wordCount\":715,\"commentCount\":19,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/built-with-css\\\/the_simpsons_in_css.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/\",\"name\":\"20 Cool Things You Won't Believe Were Built Using CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/built-with-css\\\/the_simpsons_in_css.jpg\",\"datePublished\":\"2020-01-16T13:13:44+00:00\",\"dateModified\":\"2020-06-28T17:40:06+00:00\",\"description\":\"Contrary to popular belief, CSS is not only used to provide basic style for a web page in order to make it look more attractive. There are plenty of other\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/built-with-css\\\/the_simpsons_in_css.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/built-with-css\\\/the_simpsons_in_css.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/built-with-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 Cool Things You Won&#8217;t Believe Were Built Using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"20 Cool Things You Won't Believe Were Built Using CSS - Hongkiat","description":"Contrary to popular belief, CSS is not only used to provide basic style for a web page in order to make it look more attractive. There are plenty of other","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/","og_locale":"en_US","og_type":"article","og_title":"20 Cool Things You Won't Believe Were Built Using CSS","og_description":"Contrary to popular belief, CSS is not only used to provide basic style for a web page in order to make it look more attractive. There are plenty of other","og_url":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-01-16T13:13:44+00:00","article_modified_time":"2020-06-28T17:40:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/the_simpsons_in_css.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"20 Cool Things You Won&#8217;t Believe Were Built Using CSS","datePublished":"2020-01-16T13:13:44+00:00","dateModified":"2020-06-28T17:40:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/"},"wordCount":715,"commentCount":19,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/the_simpsons_in_css.jpg","keywords":["CSS"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/built-with-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/","url":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/","name":"20 Cool Things You Won't Believe Were Built Using CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/the_simpsons_in_css.jpg","datePublished":"2020-01-16T13:13:44+00:00","dateModified":"2020-06-28T17:40:06+00:00","description":"Contrary to popular belief, CSS is not only used to provide basic style for a web page in order to make it look more attractive. There are plenty of other","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/built-with-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/the_simpsons_in_css.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/built-with-css\/the_simpsons_in_css.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/built-with-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"20 Cool Things You Won&#8217;t Believe Were Built Using CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5Rt","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=22535"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22535\/revisions"}],"predecessor-version":[{"id":51773,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22535\/revisions\/51773"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=22535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=22535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=22535"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=22535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}