{"id":3511,"date":"2022-06-10T06:45:55","date_gmt":"2022-06-10T06:45:55","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3511"},"modified":"2023-06-12T14:30:31","modified_gmt":"2023-06-12T14:30:31","slug":"css-tutorial-elastic-tabs","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-elastic-tabs\/","title":{"rendered":"CSS Tutorial &#8211; Elastic Tabs"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; CSS Tutorial &#8211; Elastic Tabs, Click on tabs to see them in action.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial \u2013 Elastic Tabs\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/RwyXeRM?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/RwyXeRM\"><br \/>\nCSS Tutorial \u2013 Elastic Tabs<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@import url('https:\/\/fonts.googleapis.com\/css?family=Roboto');\r\n\r\nbody{\r\n  height:100vh;\r\n  display:flex;\r\n  flex-direction:column;\r\n  justify-content:center;\r\n  align-items:center;\r\n  font-family: 'Roboto', sans-serif;\r\n}\r\n\r\nh2{\r\n  margin:0px;\r\n  text-transform: uppercase;\r\n}\r\n\r\nh6{\r\n  margin:0px;\r\n  color:#777;\r\n}\r\n\r\n.wrapper{\r\n  text-align:center;\r\n  margin:50px auto;\r\n}\r\n\r\n.tabs{\r\n  margin-top:50px;\r\n  font-size:15px;\r\n  padding:0px;\r\n  list-style:none;\r\n  background:#fff;\r\n  box-shadow:0px 5px 20px rgba(0,0,0,0.1);\r\n  display:inline-block;\r\n  border-radius:50px;\r\n  position:relative;\r\n}\r\n\r\n.tabs a{\r\n  text-decoration:none;\r\n  color: #777;\r\n  text-transform:uppercase;\r\n  padding:10px 20px;\r\n  display:inline-block;\r\n  position:relative;\r\n  z-index:1;\r\n  transition-duration:0.6s;\r\n}\r\n\r\n.tabs a.active{\r\n  color:#fff;\r\n}\r\n\r\n.tabs a i{\r\n  margin-right:5px;\r\n}\r\n\r\n.tabs .selector{\r\n  height:100%;\r\n  display:inline-block;\r\n  position:absolute;\r\n  left:0px;\r\n  top:0px;\r\n  z-index:1;\r\n  border-radius:50px;\r\n  transition-duration:0.6s;\r\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n  \r\n  background: #05abe0;\r\n  background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);\r\n  background: -webkit-linear-gradient(45deg, #05abe0 0%,#8200f4 100%);\r\n  background: linear-gradient(45deg, #05abe0 0%,#8200f4 100%);\r\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#8200f4',GradientType=1 );\r\n}<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var tabs = $('.tabs');\r\nvar selector = $('.tabs').find('a').length;\r\n\/\/var selector = $(\".tabs\").find(\".selector\");\r\nvar activeItem = tabs.find('.active');\r\nvar activeWidth = activeItem.innerWidth();\r\n$(\".selector\").css({\r\n  \"left\": activeItem.position.left + \"px\", \r\n  \"width\": activeWidth + \"px\"\r\n});\r\n\r\n$(\".tabs\").on(\"click\",\"a\",function(e){\r\n  e.preventDefault();\r\n  $('.tabs a').removeClass(\"active\");\r\n  $(this).addClass('active');\r\n  var activeWidth = $(this).innerWidth();\r\n  var itemPos = $(this).position();\r\n  $(\".selector\").css({\r\n    \"left\":itemPos.left + \"px\", \r\n    \"width\": activeWidth + \"px\"\r\n  });\r\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; CSS Tutorial &#8211; Elastic Tabs, Click on tabs to <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-elastic-tabs\/\" title=\"CSS Tutorial &#8211; Elastic Tabs\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3515,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[357,356,103,227],"newstopic":[],"class_list":{"0":"post-3511","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-elastic-tabs","10":"tag-mobile-css","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3511"}],"version-history":[{"count":8,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3511\/revisions"}],"predecessor-version":[{"id":3524,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3511\/revisions\/3524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3515"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3511"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}