{"id":350,"date":"2012-05-01T21:43:34","date_gmt":"2012-05-01T21:43:34","guid":{"rendered":"http:\/\/blog.alexandremagno.net\/?p=350"},"modified":"2012-06-23T03:22:07","modified_gmt":"2012-06-23T03:22:07","slug":"creating-navigation-menus-for-carousels-with-css3","status":"publish","type":"post","link":"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/","title":{"rendered":"Fancy navigation indicator with css3"},"content":{"rendered":"<p>In this tutorial I will show how to make a beatiful indicator using CSS3. This kind of navigation is recommended to slide throught carousels like these:<\/p>\n<div id='gallery-1' class='gallery galleryid-350 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/03\/yahoo-carousel-accordion-3.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/03\/yahoo-carousel-accordion-3-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"This tutorial show how to make a beatiful navigation indicator with css3\" srcset=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/03\/yahoo-carousel-accordion-3-150x150.png 150w, https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/03\/yahoo-carousel-accordion-3-100x100.png 100w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/05\/Screen-shot-2012-03-30-at-7.12.42-PM.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"83\" src=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/05\/Screen-shot-2012-03-30-at-7.12.42-PM-150x83.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/05\/Screen-shot-2012-05-01-at-6.35.26-PM.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/05\/Screen-shot-2012-05-01-at-6.35.26-PM-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"A carousel navigation\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p>First of all, it&#8217;s important to remember that this solution will not work in versions earlier than Internet Explorer 9, but will degrade gracefully, without losing any of their features.<\/p>\n<p>First, you will need a simple unordered list:<\/p>\n<pre lang=\"html\">\r\n<ul class=\"navigation\">\r\n\t<li><a class=\"default\" href=\"#\"><span>link 1<\/span><\/a><\/li>\r\n\t<li><a class=\"default\" href=\"#\"><span>link 1<\/span><\/a><\/li>\r\n\t<li><a class=\"default\" href=\"#\"><span>link 1<\/span><\/a><\/li>\r\n\t<li><a class=\"default\" href=\"#\"><span>link 1<\/span><\/a><\/li>\r\n<\/ul>\r\n<\/pre>\n<p>This unordered list with a simple basic style and any checked item will be a different class called <strong>active <\/strong>and the others one with <strong>default.<\/strong><\/p>\n<p><strong><\/strong> The reason why there&#8217;s a span inside the links is just because we will use this extra markup to hide the text, keeping the semantic correct, but throught css we will hide the text inside span, and will make the link a square that applying a border-radius of 50% it will become a elegant ball, with a more fancier shadow and gradient. It&#8217;s possible to achieve this effect with no images:<\/p>\n<p>[jsfiddle url=&#8221;http:\/\/jsfiddle.net\/RcMMn\/&#8221; height=&#8221;200px&#8221; include=&#8221;result, html,css&#8221;]<\/p>\n<p>This is the CSS Applied:<\/p>\n<pre lang=\"css\">.navigation li a span {\r\n  display: none;\r\n}\r\n.navigation li a.default, .navigation li a.active {\r\n  display: block;\r\n  float: left;\r\n  margin: 20px 10px;\r\n  width: 30px;\r\n  height: 30px;\r\n  -webkit-border-radius: 50%;\r\n  -moz-border-radius: 50%;\r\n  border-radius: 50%;\r\n}\r\n\r\n.navigation li a.default {\r\n  background-color: #CACACA;\r\n  box-shadow: 3px 3px 1px 1px #b9b9b9 inset;\r\n  -webkit-box-shadow: 3px 3px 1px 1px #b9b9b9 inset;\r\n  -moz-box-shadow: 3px 3px 1px 1px #b9b9b9 inset;\r\n}\r\n\r\n.navigation li a.active {\r\n  background: #85d945; \/* Old browsers *\/\r\nbackground: -moz-linear-gradient(top, #85d945 0%, #749f54 100%); \/* FF3.6+ *\/\r\nbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85d945), color-stop(100%,#749f54)); \/* Chrome,Safari4+ *\/\r\nbackground: -webkit-linear-gradient(top, #85d945 0%,#749f54 100%); \/* Chrome10+,Safari5.1+ *\/\r\nbackground: -o-linear-gradient(top, #85d945 0%,#749f54 100%); \/* Opera 11.10+ *\/\r\nbackground: -ms-linear-gradient(top, #85d945 0%,#749f54 100%); \/* IE10+ *\/\r\nbackground: linear-gradient(top, #85d945 0%,#749f54 100%); \/* W3C *\/\r\n}\r\n\r\n.navigation li a.default:hover {\r\n  background-color: #B6B6B6;\r\n  box-shadow: 3px 3px 1px 1px #B3B3B3 inset;\r\n  -webkit-box-shadow: 3px 3px 1px 1px #B9B9B9 inset;\r\n  -moz-box-shadow: 3px 3px 1px 1px #999 inset;\r\n}<\/pre>\n<p>As we know, I&#8217;m using the firefox and webkit syntax for border radius, gradient, box shadow or any CSS3 feature, and, as usual, we still have to declare the W3C syntax waiting for someday they maybe use the default syntax officially.<\/p>\n<p>There&#8217;s a lot of repeating code, make symple effects have to be declare even more than tree times to reflect the same result. This is bad, don&#8217;t you think?<\/p>\n<p>A possible way to deal with this of a &#8220;abstract&#8221; way, is use <a title=\"LESS, a dynamic stylesheet language\" href=\"http:\/\/lesscss.org\/\" target=\"_blank\">LESS<\/a> or <a title=\"Compass Style, a css authoring framework\" href=\"http:\/\/compass-style.org\/\" target=\"_blank\">Compass<\/a>.<\/p>\n<p>With <a title=\"Compass Style, a css authoring framework\" href=\"http:\/\/compass-style.org\/\" target=\"_blank\">Compass<\/a>, for example, is possible to do this:<\/p>\n<pre lang=\"css\">.navigation {\r\nli a span {\r\n  display: none;\r\n}\r\nli a.default, .navigation li a.active {\r\n  display: block;\r\n  float: left;\r\n  margin: 20px 10px;\r\n  width: 30px;\r\n  height: 30px;\r\n  @include border-radius(50%);\r\n}\r\n\r\n.navigation li a.default {\r\n  background-color: #CACACA;\r\n  @include box-shadow('3px 3px 1px 1px #b9b9b9 inset');\r\n}\r\n li a.active {\r\n  background: #85d945; \/* Old browsers *\/\r\n@include linear-gradient(top, #85d945 0%, #749f54 100%); \/* FF3.6+ *\/\r\n}\r\n\r\n li a.default:hover {\r\n  background-color: #B6B6B6;\r\n  @include box-shadow(3px 3px 1px 1px #B3B3B3 inset);\r\n}\r\n}<\/pre>\n<p>Much simple and cleaner, but is generate using Ruby with a defined syntax, but this way you can explore variables and mixins, there are ways to store color names for example and the second are functions, that you can make reusable CSS snippets, passing parameters, like functions). Well, compass and LESS are well documented and who knows the basic of programming can well follow the guidelines of the language. There different syntax styles.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial I will show how to make a beatiful indicator using CSS3. This kind of navigation is recommended to slide throught carousels like these: First of all, it&#8217;s important to remember that this solution will not work in versions earlier [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":359,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72],"tags":[87,88,86],"class_list":["post-350","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-htmlcss-en","tag-carousel","tag-css3","tag-navigation"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Fancy navigation indicator with css3 - Webpoint<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fancy navigation indicator with css3 - Webpoint\" \/>\n<meta property=\"og:description\" content=\"In this tutorial I will show how to make a beatiful indicator using CSS3. This kind of navigation is recommended to slide throught carousels like these: First of all, it&#8217;s important to remember that this solution will not work in versions earlier [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Webpoint\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-01T21:43:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-06-23T03:22:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/03\/yahoo-carousel-accordion-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"610\" \/>\n\t<meta property=\"og:image:height\" content=\"837\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"alexanmtz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alexanmtz\" \/>\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:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/\"},\"author\":{\"name\":\"alexanmtz\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\"},\"headline\":\"Fancy navigation indicator with css3\",\"datePublished\":\"2012-05-01T21:43:34+00:00\",\"dateModified\":\"2012-06-23T03:22:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/\"},\"wordCount\":359,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"keywords\":[\"carousel\",\"css3\",\"navigation\"],\"articleSection\":[\"HTML\/CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/\",\"url\":\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/\",\"name\":\"Fancy navigation indicator with css3 - Webpoint\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/#website\"},\"datePublished\":\"2012-05-01T21:43:34+00:00\",\"dateModified\":\"2012-06-23T03:22:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/alexandremagno.net\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fancy navigation indicator with css3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/alexandremagno.net\/#website\",\"url\":\"https:\/\/alexandremagno.net\/\",\"name\":\"Webpoint\",\"description\":\"Weblosofia com desenvolvimento web\",\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/alexandremagno.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/alexandremagno.net\/#organization\",\"name\":\"Webpoint\",\"url\":\"https:\/\/alexandremagno.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"contentUrl\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"width\":35,\"height\":31,\"caption\":\"Webpoint\"},\"image\":{\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\",\"name\":\"alexanmtz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"caption\":\"alexanmtz\"},\"sameAs\":[\"https:\/\/alexandremagno.net\"],\"url\":\"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fancy navigation indicator with css3 - Webpoint","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:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/","og_locale":"en_US","og_type":"article","og_title":"Fancy navigation indicator with css3 - Webpoint","og_description":"In this tutorial I will show how to make a beatiful indicator using CSS3. This kind of navigation is recommended to slide throught carousels like these: First of all, it&#8217;s important to remember that this solution will not work in versions earlier [&hellip;]","og_url":"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/","og_site_name":"Webpoint","article_published_time":"2012-05-01T21:43:34+00:00","article_modified_time":"2012-06-23T03:22:07+00:00","og_image":[{"width":610,"height":837,"url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2012\/03\/yahoo-carousel-accordion-3.png","type":"image\/png"}],"author":"alexanmtz","twitter_card":"summary_large_image","twitter_misc":{"Written by":"alexanmtz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/#article","isPartOf":{"@id":"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/"},"author":{"name":"alexanmtz","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af"},"headline":"Fancy navigation indicator with css3","datePublished":"2012-05-01T21:43:34+00:00","dateModified":"2012-06-23T03:22:07+00:00","mainEntityOfPage":{"@id":"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/"},"wordCount":359,"commentCount":0,"publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"keywords":["carousel","css3","navigation"],"articleSection":["HTML\/CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/","url":"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/","name":"Fancy navigation indicator with css3 - Webpoint","isPartOf":{"@id":"https:\/\/alexandremagno.net\/#website"},"datePublished":"2012-05-01T21:43:34+00:00","dateModified":"2012-06-23T03:22:07+00:00","breadcrumb":{"@id":"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/alexandremagno.net\/en\/2012\/05\/01\/creating-navigation-menus-for-carousels-with-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/alexandremagno.net\/en\/"},{"@type":"ListItem","position":2,"name":"Fancy navigation indicator with css3"}]},{"@type":"WebSite","@id":"https:\/\/alexandremagno.net\/#website","url":"https:\/\/alexandremagno.net\/","name":"Webpoint","description":"Weblosofia com desenvolvimento web","publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alexandremagno.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/alexandremagno.net\/#organization","name":"Webpoint","url":"https:\/\/alexandremagno.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/","url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","contentUrl":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","width":35,"height":31,"caption":"Webpoint"},"image":{"@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af","name":"alexanmtz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","caption":"alexanmtz"},"sameAs":["https:\/\/alexandremagno.net"],"url":"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/"}]}},"_links":{"self":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/comments?post=350"}],"version-history":[{"count":10,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/350\/revisions"}],"predecessor-version":[{"id":430,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/350\/revisions\/430"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media\/359"}],"wp:attachment":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media?parent=350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/categories?post=350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/tags?post=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}