{"id":17243,"date":"2013-05-27T18:01:04","date_gmt":"2013-05-27T10:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17243"},"modified":"2023-06-12T22:45:10","modified_gmt":"2023-06-12T14:45:10","slug":"psd-to-css3","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/","title":{"rendered":"Convert PSD to CSS Codes Easily With CSS3Ps"},"content":{"rendered":"<p>Photoshop isn\u2019t only the popular choice for <a href=\"https:\/\/www.hongkiat.com\/blog\/11-free-alternatives-softwares-to-adobe-photoshop\/\">photo editing<\/a>, it\u2019s also a good choice for designing a website. We have previously shown you <a href=\"https:\/\/www.hongkiat.com\/blog\/blog-layout-in-photoshop-cs6\/\">how to design a blog layout with Photoshop<\/a>. With a range of effects and features, Photoshop allowed us to compose a visually rich presentation using drop shadows, rounded corners, inner glow, outer glow, and texture, among other effects that make a website look fascinating.<\/p>\n<p>But, the problem comes when we are about to convert those heavy effects into CSS3. It would be a very tedious task indeed to convert every piece of effect into <a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\">CSS3<\/a>. If you are facing this problem, we hope this tip can help you out.<\/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\/top-psd2html-services\/\" class=\"ref-block__link\" title=\"Read More: Best PSD To HTML Services to Code Your Design\" rel=\"bookmark\"><span class=\"screen-reader-text\">Best PSD To HTML Services to Code Your Design<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/top-psd2html-services.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16031 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/top-psd2html-services.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Best PSD To HTML Services to Code Your Design<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tIn this Internet world full of business opportunities, having a semantic and user-friendly website is important to the...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Using CSS3Ps<\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/css3ps.com\/\">CSS3Ps<\/a> is a free Photoshop plugin and a cloud-based service to convert your Photoshop layers to <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\">CSS3<\/a>, <a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/\">SCSS and Sass syntax<\/a> in seconds \u2013 and yes, this plugin supports SCSS and Sass for <a href=\"https:\/\/www.hongkiat.com\/blog\/saas-compass\/\">Compass<\/a> as well.<\/p>\n<p>This plugin is available for Photoshop CS3 up to the latest CS6, and at the time of this writing, it supports the following conversion (more features will be added in the future).<\/p>\n<table>\n<thead>\n<tr>\n<td>Photoshop Effect or Object<\/td>\n<td>CSS3 Property<\/td>\n<\/tr>\n<\/thead>\n<tr>\n<td>Object Size<\/td>\n<td><code>height<\/code> and <code>width<\/code><\/td>\n<\/tr>\n<tr>\n<td>Shape with Border Radius<\/td>\n<td><code>border-radius<\/code><\/td>\n<\/tr>\n<tr>\n<td>Stroke<\/td>\n<td><code>border<\/code><\/td>\n<\/tr>\n<tr>\n<td>Inner Glow, Outer Glow, Drop Shadow, and Inner Shadow<\/td>\n<td><code>box-shadow<\/code><\/td>\n<\/tr>\n<tr>\n<td>Text<\/td>\n<td><code>font<\/code>, <code>text-transform<\/code>, <code>text-decoration<\/code>, and <code>color<\/code>.<\/td>\n<\/tr>\n<\/table>\n<p>In addition, CSS3Ps also added the vendor prefixes for cross-browser compatibility.<\/p>\n<p>For this demonstration, we will convert the following transparent objects, as pointed in the following screenshot, from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.premiumpixels.com\/freebies\/image-slider-controls-psd\/\">this PSD<\/a> at <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.premiumpixels.com\/\">Premium Pixels<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/psd-to-css3\/psd-transparent-bar.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>This plugin is simple to work. Just select the corresponding layer for the object, and click the CSS3Ps bar, as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/psd-to-css3\/psd-layer.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>Then, we will be redirected to the CSS3Ps webpage, where the output is generated. In our case, the output is as shown in the following snippets.<\/p>\n<p>The result is clever, it turned the Opacity effect into Alpha channel from RGBA format.<\/p>\n<pre>\r\n controls base\r\n{\r\n    width: 500px;\r\n    height: 40px;\r\n    -webkit-border-radius: 4px;\r\n    -moz-border-radius: 4px;\r\n    border-radius: 4px;\r\n    background-color: rgba(34, 36, 38, .9);\r\n    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .7), \r\n                       inset 0 2px rgba(255, 255, 255, .15);\r\n    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .7), \r\n                     inset 0 2px rgba(255, 255, 255, .15);\r\n    box-shadow: 0 1px 3px rgba(0, 0, 0, .7), \r\n                inset 0 2px rgba(255, 255, 255, .15);\r\n    border: solid 1px #000;\r\n    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .35), rgba(255, 255, 255, .35));\r\n    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .35), rgba(255, 255, 255, .35));\r\n    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .35), rgba(255, 255, 255, .35));\r\n    background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, .35), rgba(255, 255, 255, .35));\r\n    background-image: linear-gradient(to top, rgba(0, 0, 0, .35), rgba(255, 255, 255, .35));\r\n}\r\n<\/pre>\n<h2>Final Thoughts<\/h2>\n<p>This plugin is really a time saver and reduces the workload involved. It is worth noting that in order for this plugin to convert appropriately, make sure to use the right Photoshop fx for displaying the effect.<\/p>\n<p>The only downside that I saw from this service is the waiting time, as the process is done in the Cloud. Depending on your Internet connection, the speed may vary. Still, it is practically faster than doing the conversion manually.<\/p>\n<p>Have you tried this plugin? Feel free to share your thoughts in the comment box below.<\/p>","protected":false},"excerpt":{"rendered":"<p>Photoshop isn\u2019t only the popular choice for photo editing, it\u2019s also a good choice for designing a website. We have previously shown you how to design a blog layout with Photoshop. With a range of effects and features, Photoshop allowed us to compose a visually rich presentation using drop shadows, rounded corners, inner glow, outer&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[352],"tags":[507,3579,1130,3414],"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.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Convert PSD to CSS Codes Easily With CSS3Ps - Hongkiat<\/title>\n<meta name=\"description\" content=\"Photoshop isn&#039;t only the popular choice for photo editing, it&#039;s also a good choice for designing a website. We have previously shown you how to design a\" \/>\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\/psd-to-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Convert PSD to CSS Codes Easily With CSS3Ps\" \/>\n<meta property=\"og:description\" content=\"Photoshop isn&#039;t only the popular choice for photo editing, it&#039;s also a good choice for designing a website. We have previously shown you how to design a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/\" \/>\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=\"2013-05-27T10:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-12T14:45:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/psd-to-css3\/psd-transparent-bar.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Convert PSD to CSS Codes Easily With CSS3Ps\",\"datePublished\":\"2013-05-27T10:01:04+00:00\",\"dateModified\":\"2023-06-12T14:45:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/\"},\"wordCount\":420,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/psd-to-css3\\\/psd-transparent-bar.jpg\",\"keywords\":[\"CSS\",\"Photoshop\",\"psd\",\"toolkit\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/\",\"name\":\"Convert PSD to CSS Codes Easily With CSS3Ps - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/psd-to-css3\\\/psd-transparent-bar.jpg\",\"datePublished\":\"2013-05-27T10:01:04+00:00\",\"dateModified\":\"2023-06-12T14:45:10+00:00\",\"description\":\"Photoshop isn't only the popular choice for photo editing, it's also a good choice for designing a website. We have previously shown you how to design a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/psd-to-css3\\\/psd-transparent-bar.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/psd-to-css3\\\/psd-transparent-bar.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/psd-to-css3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Convert PSD to CSS Codes Easily With CSS3Ps\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Convert PSD to CSS Codes Easily With CSS3Ps - Hongkiat","description":"Photoshop isn't only the popular choice for photo editing, it's also a good choice for designing a website. We have previously shown you how to design a","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\/psd-to-css3\/","og_locale":"en_US","og_type":"article","og_title":"Convert PSD to CSS Codes Easily With CSS3Ps","og_description":"Photoshop isn't only the popular choice for photo editing, it's also a good choice for designing a website. We have previously shown you how to design a","og_url":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-05-27T10:01:04+00:00","article_modified_time":"2023-06-12T14:45:10+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/psd-to-css3\/psd-transparent-bar.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Convert PSD to CSS Codes Easily With CSS3Ps","datePublished":"2013-05-27T10:01:04+00:00","dateModified":"2023-06-12T14:45:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/"},"wordCount":420,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/psd-to-css3\/psd-transparent-bar.jpg","keywords":["CSS","Photoshop","psd","toolkit"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/","url":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/","name":"Convert PSD to CSS Codes Easily With CSS3Ps - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/psd-to-css3\/psd-transparent-bar.jpg","datePublished":"2013-05-27T10:01:04+00:00","dateModified":"2023-06-12T14:45:10+00:00","description":"Photoshop isn't only the popular choice for photo editing, it's also a good choice for designing a website. We have previously shown you how to design a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/psd-to-css3\/psd-transparent-bar.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/psd-to-css3\/psd-transparent-bar.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/psd-to-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Convert PSD to CSS Codes Easily With CSS3Ps"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4u7","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17243","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17243"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17243\/revisions"}],"predecessor-version":[{"id":67465,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17243\/revisions\/67465"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17243"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}