{"id":400,"date":"2017-10-26T09:49:21","date_gmt":"2017-10-26T06:49:21","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=400"},"modified":"2025-02-05T14:04:24","modified_gmt":"2025-02-05T12:04:24","slug":"html-css-drawing-star-wars-characters","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/","title":{"rendered":"HTML-CSS Drawing Star Wars Characters"},"content":{"rendered":"

I have showcased many times the possibilities that you can make using plaing HTML-CSS coding<\/a> without the use of JavaScript. You can draw shapes and even make simple animations.<\/p>\n

Today I’d like to present how to draw Star Wars characters using the HTML5 markup and CSS3 styles.<\/p>\n

\"html<\/p>\n

This amazing artwork was created by Ryan Spilhaus who has other similar and maybe even cooler works<\/a> like the X-Men characters. He made\u00a0small cartoons like the Stupid Robots<\/em> or the Isometric Lego animation<\/em>\u00a0using keyframes.<\/p>\n

The Star Wars characters can be seen here<\/a>.<\/p>\n

The famous Star Wars intro running text can be tested here<\/a>.<\/p>\n

Inspect the HTML elements to discover how he managed to put them together. There’s a separate DIV element for the two eyes, the nose, the mouth all these wrapped inside the “face” div.<\/p>\n","protected":false},"excerpt":{"rendered":"

I have showcased many times the possibilities that you can make using plaing HTML-CSS coding without the use of JavaScript. You can draw shapes and even make simple animations. Today I’d like to present how to draw Star Wars characters using the HTML5 markup and CSS3 styles.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3,4],"tags":[],"class_list":["post-400","post","type-post","status-publish","format-standard","hentry","category-css","category-freebies","category-html"],"yoast_head":"\nDrawing HTML5 CSS3 Star Wars Characters<\/title>\n<meta name=\"description\" content=\"You can draw shapes and even make simple animations.Today I'd like to present how to draw Star Wars characters using the HTML5 markup and CSS3 styles\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Drawing HTML5 CSS3 Star Wars Characters\" \/>\n<meta property=\"og:description\" content=\"You can draw shapes and even make simple animations.Today I'd like to present how to draw Star Wars characters using the HTML5 markup and CSS3 styles\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-26T06:49:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-05T12:04:24+00:00\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"HTML-CSS Drawing Star Wars Characters\",\"datePublished\":\"2017-10-26T06:49:21+00:00\",\"dateModified\":\"2025-02-05T12:04:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/\"},\"wordCount\":142,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"articleSection\":[\"CSS\",\"Freebies\",\"HTML\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/\",\"url\":\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/\",\"name\":\"Drawing HTML5 CSS3 Star Wars Characters\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"datePublished\":\"2017-10-26T06:49:21+00:00\",\"dateModified\":\"2025-02-05T12:04:24+00:00\",\"description\":\"You can draw shapes and even make simple animations.Today I'd like to present how to draw Star Wars characters using the HTML5 markup and CSS3 styles\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML-CSS Drawing Star Wars Characters\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Drawing HTML5 CSS3 Star Wars Characters","description":"You can draw shapes and even make simple animations.Today I'd like to present how to draw Star Wars characters using the HTML5 markup and CSS3 styles","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:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/","og_locale":"en_GB","og_type":"article","og_title":"Drawing HTML5 CSS3 Star Wars Characters","og_description":"You can draw shapes and even make simple animations.Today I'd like to present how to draw Star Wars characters using the HTML5 markup and CSS3 styles","og_url":"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2017-10-26T06:49:21+00:00","article_modified_time":"2025-02-05T12:04:24+00:00","author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"HTML-CSS Drawing Star Wars Characters","datePublished":"2017-10-26T06:49:21+00:00","dateModified":"2025-02-05T12:04:24+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/"},"wordCount":142,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"articleSection":["CSS","Freebies","HTML"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/","url":"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/","name":"Drawing HTML5 CSS3 Star Wars Characters","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"datePublished":"2017-10-26T06:49:21+00:00","dateModified":"2025-02-05T12:04:24+00:00","description":"You can draw shapes and even make simple animations.Today I'd like to present how to draw Star Wars characters using the HTML5 markup and CSS3 styles","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/html-css-drawing-star-wars-characters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"HTML-CSS Drawing Star Wars Characters"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=400"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/400\/revisions"}],"predecessor-version":[{"id":2253,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/400\/revisions\/2253"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}