{"id":5736,"date":"2015-07-20T12:15:42","date_gmt":"2015-07-20T09:15:42","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5736"},"modified":"2018-01-08T14:17:27","modified_gmt":"2018-01-08T12:17:27","slug":"css-scrollbar-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/","title":{"rendered":"CSS Scrollbar Example"},"content":{"rendered":"

In this example, we will learn how to create and customize scrollbars. <\/p>\n

Scrollbars are elements of a webpage, most of the times untouched, with their default settings as their main function is to scroll the content up\/down or left\/right, else known as vertical scrollbar and horizontal scrollbar.<\/p>\n

When considering a normal webpage, when content extends beyond the end of the visible browser area, a scrollbar appears on your right side letting you know that there is more to see below.<\/p>\n

Browsers that we already use have different compatibility issues with scrollbars (the customized ones), because some browsers are webkit based and others not. This leads to different properties being used to style it.
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Document Setup<\/h2>\n

Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS Scrollbar Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Create the Scrollbar<\/h2>\n
Creating a scrollbar is pretty easy. First, add two elements in HTML, a scrollbar wrapper (div) and a content wrapper (div):<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"scrollbar\">\r\n    <div class=\"content\">Lorem ipsum dolor sit amet<\/div>\r\n<\/div>\r\n<\/pre>\n
In the style section, we’ll refer to the scrollbar<\/code> class to give scrollbar attributes and then to content<\/code> to set content size.<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n.scrollbar{\r\n  width: 300px;\r\n  height: 200px;\r\n  background-color:lightgray;\r\n  margin-top:40px;\r\n  margin-left:40px;\r\n  overflow: scroll; \/*if the content extends beyond width and height use the scrollbar*\/\r\n  float:left;\r\n}\r\n.content{\r\n  height:450px;\r\n  width: 500px;\r\n} \r\n<\/style>\r\n<\/pre>\n
Simple as that, we have create a scrollable div inside a page that looks like this for now:
\n
\"A<\/a>
A Basic Scrollbar<\/figcaption><\/figure><\/p>\n
3. Style the Scrollbar<\/h2>\n
The process of styling includes styling the background track, setting the size border and color, and then the main scrollbar.<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\n\/* Set the scrollbar width *\/\r\n::-webkit-scrollbar {\r\n    width: 16px;\r\n}\r\n \r\n\/* Track *\/\r\n::-webkit-scrollbar-track {\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); \r\n    -webkit-border-radius: 8px;\r\n    border-radius: 8px;\r\n}\r\n \r\n\/* Handle *\/\r\n::-webkit-scrollbar-thumb {\r\n    -webkit-border-radius: 8px;\r\n    border-radius: 8px;\r\n    background: #6be1a0;\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); \r\n}\r\n::-webkit-scrollbar-thumb:window-inactive {\r\n  background: rgba(255,0,0,0.4); \r\n}\r\n<\/style>\r\n<\/pre>\n
Now we’d have a fully customized scrollbar, which would look like this in the browser:
\n
\"A<\/a>
A Customized Scrollbar<\/figcaption><\/figure><\/p>\n
4. Using Pseudo-Classes with Scrollbars<\/h2>\n
There are a number of pseudo-classes designed to work with scrollbars and give you much more accessibility when styling.<\/p>\n
:horizontal<\/code> \u2013 applies to any scrollbar pieces that have a horizontal orientation.<\/p>\n
:vertical<\/code> \u2013  applies to any scrollbar pieces that have a vertical orientation.<\/p>\n
:decrement<\/code> \u2013  applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view\u2019s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).<\/p>\n
:increment<\/code> \u2013  applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view\u2019s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).<\/p>\n
:start<\/code> \u2013  applies to buttons and track pieces. It indicates whether the object is placed before the thumb.<\/p>\n
:end<\/code> \u2013 applies to buttons and track pieces. It indicates whether the object is placed after the thumb.<\/p>\n
:double-button<\/code> \u2013  applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.<\/p>\n
:single-button<\/code> \u2013  applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.<\/p>\n
:no-button<\/code> \u2013 applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.<\/p>\n
:corner-present<\/code> \u2013 applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.<\/p>\n
:window-inactive<\/code> \u2013 applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)<\/p>\n
Below, I’ve shown an example of some of the pseudo-classes being used to modify specific aspects of the scrollbar:<\/p>\n
\r\n::-webkit-scrollbar:horizontal {\r\n  background-color: lightgray;\r\n}\r\n::-webkit-scrollbar:vertical {\r\n  background-color: #b6eff8;\r\n}\r\n::-webkit-scrollbar:hover {\r\n  background-color: lightblue;\r\n}\r\n<\/pre>\n
The few pseudo-classes used here would result in this view:
\n
\"Using<\/a>
Using Pseudo Classes to Style the Scrollbar<\/figcaption><\/figure><\/p>\n
5. Conclusion<\/h2>\n
To conclude, we can say that scrollbars are important elements necessary to scroll pages to content that lies out of the first stacked view of the webpage. In general, unless you want to have your very own personal page, scrollbars are not styled but just left to their own default style. However, when several sections of your page have these divs you want to limit in size but not in content, you can use and customize a scrollbar for all of your needs inside the page. The process is fairly easy and just takes time to try all the various options.<\/p>\n
6. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS Scrollbar<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we will learn how to create and customize scrollbars. Scrollbars are elements of a webpage, most of the times untouched, with their default settings as their main function is to scroll the content up\/down or left\/right, else known as vertical scrollbar and horizontal scrollbar. When considering a normal webpage, when content extends …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Scrollbar Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we will learn how to create and customize scrollbars. Scrollbars are elements of a webpage, most of the times untouched, with their\" \/>\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.webcodegeeks.com\/css\/css-scrollbar-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Scrollbar Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we will learn how to create and customize scrollbars. Scrollbars are elements of a webpage, most of the times untouched, with their\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-20T09:15:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:17:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Scrollbar Example\",\"datePublished\":\"2015-07-20T09:15:42+00:00\",\"dateModified\":\"2018-01-08T12:17:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/\"},\"wordCount\":747,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/\",\"name\":\"CSS Scrollbar Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-07-20T09:15:42+00:00\",\"dateModified\":\"2018-01-08T12:17:27+00:00\",\"description\":\"In this example, we will learn how to create and customize scrollbars. Scrollbars are elements of a webpage, most of the times untouched, with their\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Scrollbar Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Scrollbar Example - Web Code Geeks - 2026","description":"In this example, we will learn how to create and customize scrollbars. Scrollbars are elements of a webpage, most of the times untouched, with their","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.webcodegeeks.com\/css\/css-scrollbar-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Scrollbar Example - Web Code Geeks - 2026","og_description":"In this example, we will learn how to create and customize scrollbars. Scrollbars are elements of a webpage, most of the times untouched, with their","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-07-20T09:15:42+00:00","article_modified_time":"2018-01-08T12:17:27+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Scrollbar Example","datePublished":"2015-07-20T09:15:42+00:00","dateModified":"2018-01-08T12:17:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/"},"wordCount":747,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/","name":"CSS Scrollbar Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-07-20T09:15:42+00:00","dateModified":"2018-01-08T12:17:27+00:00","description":"In this example, we will learn how to create and customize scrollbars. Scrollbars are elements of a webpage, most of the times untouched, with their","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-scrollbar-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Scrollbar Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5736"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}