{"id":15999,"date":"2013-01-07T18:01:00","date_gmt":"2013-01-07T10:01:00","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15999"},"modified":"2025-04-04T00:06:56","modified_gmt":"2025-04-03T16:06:56","slug":"web-transparency","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/","title":{"rendered":"Guide to: Using Transparency (Opacity) In Web Design"},"content":{"rendered":"<p><strong>Note:<\/strong> This post was first published on the 7th Jan, 2013.<\/p>\n<p>Transparency is an effect that allows us <strong>to see what is underneath<\/strong>. In design, transparency could create the illusion of an area looking more spacious than it really is. If done right, it could even make the overall design look more elegant. In Photoshop, this effect can be easily achieved by decreasing the <strong>Opacity<\/strong> or <strong>Fill<\/strong>, but in website space, it is a different matter.<\/p>\n<p>In this post, we are going to look into how this particular effect is evolving throughout the years in web space, which includes going back a couple of years to see how it was done prior to the emergence of CSS3.<\/p>\n<h2>IEpngfix \u2013 Old School<\/h2>\n<p>In the old days, <strong>Transparency effect<\/strong> is commonly done using transparent PNG, which is also known to have some shortcomings.<\/p>\n<p>For instance, in Internet Explorer 6, transparent PNG will be rendered (really) ugly and although this case is solvable through <a href=\"https:\/\/www.twinhelix.com\/css\/iepngfix\/\" rel=\"nofollow\">this JavaScript library<\/a>, if we only have a small portion of transparent PNG in our website, applying this library is quite unnecessary.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/ie6.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>Another problem is when we add an image, we will also add more HTTP requests for a browser to process. When it comes to <strong>a lot of images<\/strong>, could slow down our website performance.<\/p>\n<h3>Pros<\/h3>\n<ul>\n<li>Relatively easy to apply when you are familiar with image editors like Photoshop<\/li>\n<li>Wide browser support<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>Looks ugly in IE6<\/li>\n<li>Brings extra HTTP request<\/li>\n<\/ul>\n<h2>The Opacity<\/h2>\n<p>There is an easier way to create <strong>transparency<\/strong> in a website, that is, by using <code>opacity<\/code> CSS property. This property is just officially included in CSS3, but the support coverage is wider than the other CSS3 properties in general. According to <a href=\"https:\/\/caniuse.com\/css-opacity\" rel=\"nofollow\">caniuse.com<\/a>, opacity has been supported in as early as Firefox 2 and Chrome 4.<\/p>\n<p>Now, Let\u2019s take a look at the following example.<\/p>\n<pre>\r\ndiv {\r\n\twidth: 200px;\r\n\theight: 200px;\r\n\tbackground-color: #fff;\r\n\topacity: 0.5;\t\r\n}\r\n<\/pre>\n<p>This code will result in a white box with <code>0.5<\/code> or <code>50%<\/code> transparency, the <code>opacity<\/code> notation range from <code>1<\/code> to <code>0<\/code> where <code>1<\/code> will make the element solid while <code>0<\/code> will make the targeted element completely invisible.<\/p>\n<p>There are a few things you should remember, though, when applying <code>opacity<\/code>. This property will affect anything inside the element, let\u2019s say we have some text in this box, and the text will also be transparent at 50%.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/opacity.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>Also, in IE8 or earlier we need to substitute this property with filter, for example <code>filter: alpha(opacity=50)<\/code>.<\/p>\n<h3>Pros<\/h3>\n<ul>\n<li>Easy to implement<\/li>\n<li>Cross-browser support, (IE requires \u2018filter\u2019)<\/li>\n<li>No HTTP request<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>Affecting the entire element as shown<\/li>\n<\/ul>\n<h2>The Alpha Channel<\/h2>\n<p>Another way we can take it is using the Alpha channel of RGBa and HSLa (which I consider to be better than the previous two practices). Unlike the <code>opacity<\/code> property which lowers the entire element\u2019s opacity, the alpha channel only affects color density.<\/p>\n<p>Let\u2019s see this example below;<\/p>\n<pre>\r\ndiv {\r\n\twidth: 200px;\r\n\theight: 200px;\r\n\tbackground-color: rgba(255,255,255,0.5);\r\n}\r\n<\/pre>\n<p>We still have the same box, but we now replace the <code>background-color<\/code> with RGBa color function and lower the alpha channel to <code>0.5<\/code>. This code will result in the same effect similar to what the <code>opacity<\/code> property did, but since the alpha channel basically only controls color density, the other elements inside it will not be affected.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/rgba.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>In term of HSLa, it works no different except that the colors are composed from the Hue, Saturation and Lightness. If you have been working with Photoshop, this color function works similar to this window dialog below, from the <strong>Image &gt; Adjustment &gt; Hue\/Saturation<\/strong> menu.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/hue.jpg\" width=\"500\" height=\"300\"><\/figure>\n<h3>Pros<\/h3>\n<ul>\n<li>Easy to implement<\/li>\n<li>No HTTP request<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>RGBa and HSLa will not work in Internet Explorer 8 and earlier<\/li>\n<\/ul>\n<h2>Filter Property \u2013 The IE way<\/h2>\n<p>It seems that Internet Explorer always takes a different route from the industry standard. As we mentioned above, RGBa or HSLa will not work in Internet Explorer (version 8 and earlier). Instead, the Internet Explorer oddly uses <strong>#ARGB<\/strong> with their exclusive <code>filter<\/code> property.<\/p>\n<p>What is #ARGB? honestly I don\u2019t quite get it either but it basically does not equal to RGBa on the surface. The RGB values range from 0 to 255 while the <code>#ARGB<\/code> is hexadecimal.<\/p>\n<p>Here is how we can apply this color function;<\/p>\n<pre>\r\ndiv {\r\n\twidth: 200px;\r\n\theight: 200px;\r\n\tbackground-color: rgba(255,255,255,0.5);\r\n\r\n\t-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);\r\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);\r\n\tzoom: 1;\r\n}\r\n<\/pre>\n<p>We are still dealing with the same box and this time we added <code>filter<\/code> and <code>-ms-filter<\/code> for IE. Notice this hex number <code>#80FFFFFF<\/code>, it is actually converted from <code>rgba(255,255,255,0.5)<\/code><\/p>\n<h3>Pros<\/h3>\n<ul>\n<li>Works for Internet Explorer 8 and earlier<\/li>\n<\/ul>\n<h3>Cons<\/h3>\n<ul>\n<li>At the same time, it only works in IE<\/li>\n<li>The syntax, as well as the color format, is not easily understandable<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Note: This post was first published on the 7th Jan, 2013. Transparency is an effect that allows us to see what is underneath. In design, transparency could create the illusion of an area looking more spacious than it really is. If done right, it could even make the overall design look more elegant. In Photoshop,&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[1336],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Guide to: Using Transparency (Opacity) In Web Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"Note: This post was first published on the 7th Jan, 2013. Transparency is an effect that allows us to see what is underneath. In design, transparency\" \/>\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\/web-transparency\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide to: Using Transparency (Opacity) In Web Design\" \/>\n<meta property=\"og:description\" content=\"Note: This post was first published on the 7th Jan, 2013. Transparency is an effect that allows us to see what is underneath. In design, transparency\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-transparency\/\" \/>\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-01-07T10:01:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T16:06:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/ie6.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=\"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\\\/web-transparency\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Guide to: Using Transparency (Opacity) In Web Design\",\"datePublished\":\"2013-01-07T10:01:00+00:00\",\"dateModified\":\"2025-04-03T16:06:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/\"},\"wordCount\":728,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-transparency\\\/ie6.jpg\",\"keywords\":[\"transparency\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/\",\"name\":\"Guide to: Using Transparency (Opacity) In Web Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-transparency\\\/ie6.jpg\",\"datePublished\":\"2013-01-07T10:01:00+00:00\",\"dateModified\":\"2025-04-03T16:06:56+00:00\",\"description\":\"Note: This post was first published on the 7th Jan, 2013. Transparency is an effect that allows us to see what is underneath. In design, transparency\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-transparency\\\/ie6.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-transparency\\\/ie6.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-transparency\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide to: Using Transparency (Opacity) In Web Design\"}]},{\"@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":"Guide to: Using Transparency (Opacity) In Web Design - Hongkiat","description":"Note: This post was first published on the 7th Jan, 2013. Transparency is an effect that allows us to see what is underneath. In design, transparency","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\/web-transparency\/","og_locale":"en_US","og_type":"article","og_title":"Guide to: Using Transparency (Opacity) In Web Design","og_description":"Note: This post was first published on the 7th Jan, 2013. Transparency is an effect that allows us to see what is underneath. In design, transparency","og_url":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-01-07T10:01:00+00:00","article_modified_time":"2025-04-03T16:06:56+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/ie6.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Guide to: Using Transparency (Opacity) In Web Design","datePublished":"2013-01-07T10:01:00+00:00","dateModified":"2025-04-03T16:06:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/"},"wordCount":728,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/ie6.jpg","keywords":["transparency"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-transparency\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/","url":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/","name":"Guide to: Using Transparency (Opacity) In Web Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/ie6.jpg","datePublished":"2013-01-07T10:01:00+00:00","dateModified":"2025-04-03T16:06:56+00:00","description":"Note: This post was first published on the 7th Jan, 2013. Transparency is an effect that allows us to see what is underneath. In design, transparency","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-transparency\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/ie6.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-transparency\/ie6.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-transparency\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Guide to: Using Transparency (Opacity) In Web Design"}]},{"@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-4a3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15999","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=15999"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15999\/revisions"}],"predecessor-version":[{"id":73485,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15999\/revisions\/73485"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15999"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}