Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 444607" data-attributes="member: 1872">It's been a while as I've been mad busy at work, but I saw a Dribbble design I liked and wanted to replicate it.Tried doing it without JavaScript as well.The design was this:<img src="https://cdn.dribbble.com/users/30252/screenshots/5925052/tab-ui-final.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" />My result was this: (less smooth but it works)<a href="https://codepen.io/Markshall/pen/rPzELR" target="_blank">https://codepen.io/Markshall/pen/rPzELR</a>HTML:[CODE=html]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp; &lt;meta charset=&quot;UTF-8&quot; /&gt;&nbsp; &nbsp; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot; /&gt;&nbsp; &nbsp; &lt;title&gt;Document&lt;/title&gt;&nbsp;&nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;//use.fontawesome.com/releases/v5.7.1/css/all.css&quot; integrity=&quot;sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr&quot; crossorigin=&quot;anonymous&quot; /&gt;&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;//fonts.googleapis.com/css?family=Source+Sans+Pro&quot; /&gt;&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;&nbsp; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp; &lt;div class=&quot;bottom-bar&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div class=&quot;bottom-bar--items&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;bottom-bar--item&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;radio&quot; name=&quot;bottom-bar--selected&quot; id=&quot;bottom-bar--alpha&quot; checked /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;bottom-bar--alpha&quot;&gt;&lt;/label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;name&quot;&gt;Home&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;bottom-bar--item&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;radio&quot; name=&quot;bottom-bar--selected&quot; id=&quot;bottom-bar--bravo&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;bottom-bar--bravo&quot;&gt;&lt;/label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fa fa-heart&quot;&gt;&lt;/i&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;name&quot;&gt;Likes&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;bottom-bar--item&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;radio&quot; name=&quot;bottom-bar--selected&quot; id=&quot;bottom-bar--charlie&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;bottom-bar--charlie&quot;&gt;&lt;/label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;name&quot;&gt;Search&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;bottom-bar--item&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;radio&quot; name=&quot;bottom-bar--selected&quot; id=&quot;bottom-bar--delta&quot; /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;bottom-bar--delta&quot;&gt;&lt;/label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;icon&quot;&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;name&quot;&gt;Profile&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &lt;/body&gt;&lt;/html&gt;[/CODE]SCSS:[CODE=scss]$purple: #5b37b7;$pink: #c33c96;$yellow: #e6a919;$blue: #1194aa;* {&nbsp; box-sizing: border-box;&nbsp; margin: 0;&nbsp; border: 0;&nbsp; padding: 0;}body {&nbsp; background-color: #f7f7f7;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; min-height: 100vh;&nbsp; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;}.bottom-bar {&nbsp; background-color: #fff;&nbsp; border-bottom-left-radius: 30px;&nbsp; border-bottom-right-radius: 30px;&nbsp; padding: 30px 50px;&nbsp; box-shadow: 0px 20px 90px rgba(50, 50, 50, .3);&nbsp; &amp;--items {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: space-between;&nbsp; }&nbsp; &amp;--item {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; padding: 15px 25px;&nbsp;&nbsp; &nbsp; &nbsp; &amp;:not(:last-child) {&nbsp; &nbsp; &nbsp; margin-right: 15px;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &amp;:nth-child(1) {&nbsp; &nbsp; &nbsp; .name {color: $purple;}&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; [type=&quot;radio&quot;]:checked {&nbsp; &nbsp; &nbsp; &nbsp; &amp; ~ .icon i {color: $purple;}&nbsp; &nbsp; &nbsp; &nbsp; &amp; ~ label { background-color: rgba($purple, .25);}&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &amp;:nth-child(2) {&nbsp; &nbsp; &nbsp; .name {color: $pink;}&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; [type=&quot;radio&quot;]:checked {&nbsp; &nbsp; &nbsp; &nbsp; &amp; ~ .icon i {color: $pink;}&nbsp; &nbsp; &nbsp; &nbsp; &amp; ~ label { background-color: rgba($pink, .25);}&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &amp;:nth-child(3) {&nbsp; &nbsp; &nbsp; .name {color: $yellow;}&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; [type=&quot;radio&quot;]:checked {&nbsp; &nbsp; &nbsp; &nbsp; &amp; ~ .icon i {color: $yellow;}&nbsp; &nbsp; &nbsp; &nbsp; &amp; ~ label { background-color: rgba($yellow, .25);}&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &amp;:nth-child(4) {&nbsp; &nbsp; &nbsp; .name {color: $blue;}&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; [type=&quot;radio&quot;]:checked {&nbsp; &nbsp; &nbsp; &nbsp; &amp; ~ .icon i {color: $blue;}&nbsp; &nbsp; &nbsp; &nbsp; &amp; ~ label { background-color: rgba($blue, .25);}&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; label {&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; top: 0; left: 0;&nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; border-radius: 30px;&nbsp; &nbsp; &nbsp; flex: none;&nbsp; &nbsp; &nbsp; background-color: rgba(255, 255, 255, 0);&nbsp; &nbsp; &nbsp; transition: background-color .15s ease-in-out;&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; [type=&quot;radio&quot;] {&nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; top: 0; left: 0;&nbsp; &nbsp; &nbsp; height: 0;&nbsp; &nbsp; &nbsp; width: 0;&nbsp; &nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; &nbsp; flex: none;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &amp;:checked {&nbsp; &nbsp; &nbsp; &nbsp; &amp; ~ .name {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; .icon {&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; i {&nbsp; &nbsp; &nbsp; &nbsp; color: #000;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 24px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; .name {&nbsp; &nbsp; &nbsp; font: {&nbsp; &nbsp; &nbsp; &nbsp; weight: 600;&nbsp; &nbsp; &nbsp; &nbsp; size: 16px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; width: 0%;&nbsp; &nbsp; &nbsp; margin-left: -15px;&nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &nbsp; transition: all .5s ease-in-out;&nbsp; &nbsp; }&nbsp; }}[/CODE]Hope you like</blockquote>

[QUOTE="Markshall, post: 444607, member: 1872"] It's been a while as I've been mad busy at work, but I saw a Dribbble design I liked and wanted to replicate it. Tried doing it without JavaScript as well. The design was this: [IMG]https://cdn.dribbble.com/users/30252/screenshots/5925052/tab-ui-final.gif[/IMG] My result was this: (less smooth but it works) [URL]https://codepen.io/Markshall/pen/rPzELR[/URL] HTML: [CODE=html]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" /> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="bottom-bar"> <div class="bottom-bar--items"> <div class="bottom-bar--item"> <input type="radio" name="bottom-bar--selected" id="bottom-bar--alpha" checked /> <label for="bottom-bar--alpha"></label> <div class="icon"></div> <div class="name">Home</div> </div> <div class="bottom-bar--item"> <input type="radio" name="bottom-bar--selected" id="bottom-bar--bravo" /> <label for="bottom-bar--bravo"></label> <div class="icon"></div> <div class="name">Likes</div> </div> <div class="bottom-bar--item"> <input type="radio" name="bottom-bar--selected" id="bottom-bar--charlie" /> <label for="bottom-bar--charlie"></label> <div class="icon"></div> <div class="name">Search</div> </div> <div class="bottom-bar--item"> <input type="radio" name="bottom-bar--selected" id="bottom-bar--delta" /> <label for="bottom-bar--delta"></label> <div class="icon"></div> <div class="name">Profile</div> </div> </div> </div> </body> </html>[/CODE] SCSS: [CODE=scss]$purple: #5b37b7; $pink: #c33c96; $yellow: #e6a919; $blue: #1194aa; * { box-sizing: border-box; margin: 0; border: 0; padding: 0; } body { background-color: #f7f7f7; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; } .bottom-bar { background-color: #fff; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; padding: 30px 50px; box-shadow: 0px 20px 90px rgba(50, 50, 50, .3); &--items { display: flex; align-items: center; justify-content: space-between; } &--item { display: flex; align-items: center; justify-content: center; position: relative; padding: 15px 25px; &:not(:last-child) { margin-right: 15px; } &:nth-child(1) { .name {color: $purple;} [type="radio"]:checked { & ~ .icon i {color: $purple;} & ~ label { background-color: rgba($purple, .25);} } } &:nth-child(2) { .name {color: $pink;} [type="radio"]:checked { & ~ .icon i {color: $pink;} & ~ label { background-color: rgba($pink, .25);} } } &:nth-child(3) { .name {color: $yellow;} [type="radio"]:checked { & ~ .icon i {color: $yellow;} & ~ label { background-color: rgba($yellow, .25);} } } &:nth-child(4) { .name {color: $blue;} [type="radio"]:checked { & ~ .icon i {color: $blue;} & ~ label { background-color: rgba($blue, .25);} } } label { position: absolute; top: 0; left: 0; height: 100%; width: 100%; cursor: pointer; border-radius: 30px; flex: none; background-color: rgba(255, 255, 255, 0); transition: background-color .15s ease-in-out; } [type="radio"] { display: none; position: absolute; top: 0; left: 0; height: 0; width: 0; -webkit-appearance: none; flex: none; &:checked { & ~ .name { margin-left: 15px; display: block; width: 100%; } } } .icon { i { color: #000; font-size: 24px; } } .name { font: { weight: 600; size: 16px; } width: 0%; margin-left: -15px; overflow: hidden; transition: all .5s ease-in-out; } } }[/CODE] Hope you like [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members