{"id":11142,"date":"2024-01-28T21:35:29","date_gmt":"2024-01-28T16:35:29","guid":{"rendered":"https:\/\/codehim.com\/?p=11142"},"modified":"2024-02-03T13:18:27","modified_gmt":"2024-02-03T08:18:27","slug":"css-stylish-box-with-animated-gradient-border","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/","title":{"rendered":"CSS Stylish Box with Animated Gradient Border"},"content":{"rendered":"<p>This CSS code snippet helps you to create a stylish box with an animated gradient border that comes to life when you hover over the element. The animation is achieved by cleverly manipulating custom properties and keyframes. The article element showcases a stunning border made up of two gradients, styled with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value\/oklch\" target=\"_blank\" rel=\"noopener\">OKLCH<\/a> to enhance visual appeal.<\/p>\n<p>Furthermore, this code is perfect for adding a touch of elegance and interactivity to your web projects without relying on JavaScript.<\/p>\n<h2>How to Create CSS Stylish Box With Animated Gradient Border<\/h2>\n<p>1. First of all, create your HTML with a main container and an article element. Inside the article, add a heading and a paragraph to showcase the content of your stylish box.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;main&gt;\r\n  &lt;article&gt;\r\n    &lt;h1&gt;Hey look, this is only CSS!&lt;\/h1&gt;\r\n    &lt;p&gt;\r\n      I didn\u2019t know you could do gradient borders like this. Hover over this element to see the gradient animate!\r\n    &lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n&lt;\/main&gt;<\/pre>\n<p>2. Finally, let&#8217;s bring the magic to life with the CSS styles. Copy and paste the following CSS code into your project. This code includes custom properties, keyframes, and gradient styling to achieve the desired animated effect.<\/p>\n<pre class=\"prettyprint linenums lang-css\">@charset \"UTF-8\";\r\n\/**\r\n * `@property` is required for the animation to work.\r\n * Without it, the angle values won\u2019t interpolate properly.\r\n *\r\n * @see https:\/\/dev.to\/afif\/we-can-finally-animate-css-gradient-kdk\r\n *\/\r\n@property --bg-angle {\r\n  inherits: false;\r\n  initial-value: 0deg;\r\n  syntax: \"&lt;angle&gt;\";\r\n}\r\n\/**\r\n * To animate the gradient, we set the custom property to 1 full\r\n * rotation. The animation starts at the default value of `0deg`.\r\n *\/\r\n@keyframes spin {\r\n  to {\r\n    --bg-angle: 360deg;\r\n  }\r\n}\r\narticle {\r\n  \/* add the animation, but pause it by default *\/\r\n  animation: spin 2.5s infinite linear paused;\r\n  \/**\r\n   * Using `background-origin` we can create a \u201cborder\u201d using two gradients. And to\r\n   * make the gradients better-looking, we use OKLCH.\r\n   *\r\n   * @see https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-origin\r\n   * @see https:\/\/evilmartians.com\/chronicles\/oklch-in-css-why-quit-rgb-hsl\r\n   *\/\r\n  background: linear-gradient(to bottom, oklch(0.1 0.2 240\/0.95), oklch(0.1 0.2 240\/0.95)) padding-box, conic-gradient(from var(--bg-angle) in oklch longer hue, oklch(0.85 0.37 0) 0 0) border-box;\r\n  \/* extends to outer border edges *\/\r\n  \/* a clear border lets the background gradient shine through *\/\r\n  border: 6px solid transparent;\r\n  \/* unpause the animation on hover *\/\r\n}\r\narticle:hover {\r\n  animation-play-state: running;\r\n}\r\n\r\n\/******************************************************************\r\n * Other styles to make the demo look nice\r\n ******************************************************************\/\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\r\n  font-size: 18px;\r\n  line-height: 1.45;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n  background: radial-gradient(circle, oklch(0.15 0.2 330\/0), oklch(0.15 0.2 330\/1)), linear-gradient(344deg in oklch, oklch(0.3 0.37 310), oklch(0.35 0.37 330), oklch(0.3 0.37 310)) !important;\r\n  display: grid;\r\n  height: 100svh;\r\n  place-items: center;\r\n}\r\n\r\narticle {\r\n  border-radius: 1rem;\r\n  box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315\/0.25);\r\n  color: white;\r\n  padding: 1rem;\r\n  width: min(400px, 90vw);\r\n}\r\narticle h1 {\r\n  line-height: 1.1;\r\n  margin: 0;\r\n}\r\narticle p {\r\n  margin: 0.75rem 0 0;\r\n}<\/pre>\n<p>The <code>background<\/code> property combines two gradients, creating a visually appealing border effect. The <code>border<\/code> property is set to transparent, allowing the background gradient to shine through.<\/p>\n<p>On the other hand, the <code>animation-play-state: running;<\/code> property ensures the rotation effect starts when the user hovers over the article.<\/p>\n<p>That&#8217;s all! hopefully, you have successfully created a box with an animated gradient border on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This CSS code snippet helps you to create a stylish box with an animated gradient border that comes to life&#8230;<\/p>\n","protected":false},"author":1,"featured_media":11195,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[],"class_list":["post-11142","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Stylish Box with Animated Gradient Border &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a CSS Stylish Box with Animated Gradient Border. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Stylish Box with Animated Gradient Border &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a CSS Stylish Box with Animated Gradient Border. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-28T16:35:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-03T08:18:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"CSS Stylish Box with Animated Gradient Border\",\"datePublished\":\"2024-01-28T16:35:29+00:00\",\"dateModified\":\"2024-02-03T08:18:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/\"},\"wordCount\":234,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png\",\"articleSection\":[\"HTML5 &amp; CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/\",\"name\":\"CSS Stylish Box with Animated Gradient Border &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png\",\"datePublished\":\"2024-01-28T16:35:29+00:00\",\"dateModified\":\"2024-02-03T08:18:27+00:00\",\"description\":\"Here is a free code snippet to create a CSS Stylish Box with Animated Gradient Border. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png\",\"width\":1280,\"height\":960,\"caption\":\"CSS Stylish Box with Animated Gradient Border\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 &amp; CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Stylish Box with Animated Gradient Border\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Stylish Box with Animated Gradient Border &#8212; CodeHim","description":"Here is a free code snippet to create a CSS Stylish Box with Animated Gradient Border. You can view demo and download the source code.","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:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/","og_locale":"en_US","og_type":"article","og_title":"CSS Stylish Box with Animated Gradient Border &#8212; CodeHim","og_description":"Here is a free code snippet to create a CSS Stylish Box with Animated Gradient Border. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-28T16:35:29+00:00","article_modified_time":"2024-02-03T08:18:27+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"CSS Stylish Box with Animated Gradient Border","datePublished":"2024-01-28T16:35:29+00:00","dateModified":"2024-02-03T08:18:27+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/"},"wordCount":234,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png","articleSection":["HTML5 &amp; CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/","url":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/","name":"CSS Stylish Box with Animated Gradient Border &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png","datePublished":"2024-01-28T16:35:29+00:00","dateModified":"2024-02-03T08:18:27+00:00","description":"Here is a free code snippet to create a CSS Stylish Box with Animated Gradient Border. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/02\/CSS-Stylish-Box-with-Animated-Gradient-Border.png","width":1280,"height":960,"caption":"CSS Stylish Box with Animated Gradient Border"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/css-stylish-box-with-animated-gradient-border\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 &amp; CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"CSS Stylish Box with Animated Gradient Border"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1121,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=11142"}],"version-history":[{"count":2,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11142\/revisions"}],"predecessor-version":[{"id":11245,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11142\/revisions\/11245"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11195"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}