Intro
Welcome back to the Recreate Spotify Series! In this part I will recreate a portion of the bottom bar!
What I want to recreate:
If you have any recommendations or you think that I could do anything differently feel free to leave a comment 🙂.
A sneak peek of the result:
and a closer look 👀:
The starting point 🏁
As always, the first step is to split the design to smaller chunks.
Looking at the bottom bar of the Spotify I can see 3 different areas.
In this part of the series I will focus in the area marked with the number 1.
After splitting the design I can see 3 main areas, marked in the image below:
One extra step
Before starting to code it is a good idea to hover & click the elements in the design to see what happens. Maybe an event, such as hovering over an item, triggers a new element to appear or changes the color of an item.
After hovering over the area I see some minor changes in the design:
These are the following:
- Hovering over the image, makes a new element visible (the arrow circle)
- Text hover changes color to white (#fff) and "underlines" the text. (I will explain later why the "underlines" is in quotes 🤔 )
- Icon hover changes the color to white (#fff) again.
Code 💻
If you want to follow along, you can find the code from the part 4 (Home page) of the series in this Github gist.
Structure
I will start by adding the html code for the bottom bar right after the ending of the </main> tag.
</main> <div class="bottom-bar"> <div class="bottom-bar--left-col"> <div class="bottom-bar--left-col--song"> <div class="bottom-bar--left-col--song--img"> <div class="bottom-bar--left-col--song--img--pull-up"> <i class='lni lni-chevron-up'></i> </div> <img src="http://via.placeholder.com/150x150" alt=""> </div> <div class="bottom-bar--left-col--song--details"> <div class="bottom-bar--left-col--song--details--wrapper"> <a href="#" class="bottom-bar--left-col--song--details--title">Song Title</a> </div> <div class="bottom-bar--left-col--song--details--wrapper"> <a href="#" class="bottom-bar--left-col--song--details--artist">Artist</a> </div> </div> </div> <div class="bottom-bar--left-col--actions"> <button class="bottom-bar--left-col--actions--favorite"> <i class='lni lni-heart'></i> </button> <button class="bottom-bar--left-col--actions--pip"> <i class="pip-icon"></i> </button> </div> </div> </div> This is how the section looks without any added styles:
Yep, that's right! You can't even see it without any styling 😅
Styling
Adding the basic styles so that the bottom bar is correctly positioned and is visible.
main { max-height: calc(100vh - 90px); /* 90px is the height of the bottom bar */ min-height: calc(100vh - 90px); /* 90px is the height of the bottom bar */ } .sidebar { height: calc(100% - 90px); /* 90px is the height of the bottom bar */ } .bottom-bar { width: 100%; height: 90px; border-top: 1px solid #000; background-color: rgba(24, 24, 24, 1); z-index: 1; position: absolute; bottom: 0; padding-left: 16px; padding-right: 16px; display: flex; } 
I know it is not looking the best right now, but at least it's visible.
First things first, I need to contain the elements inside the bottom bar and not let them overflow it.
.bottom-bar--left-col { display: flex; align-items: center; position: relative; transition: left 300ms; left: 0; } .bottom-bar--left-col--song { display: flex; } .bottom-bar--left-col--song--img img { height: 56px; width: 56px; } 
It looks much better now!
Time to focus on the actual styling of the elements. I will start working on the image and the hoverable arrow icon.
.bottom-bar--left-col--song--img img { height: 56px; width: 56px; box-shadow: 0 10px 30px 0 rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.2); } .bottom-bar--left-col--song--img { margin-right: 14px; display: flex; position: relative; } .bottom-bar--left-col--song--img--pull-up { position: absolute; top: 4px; right: 4px; background: #000; width: 24px; height: 24px; opacity: 0.7; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 0.75rem; color: #b3b3b3; } .bottom-bar--left-col--song--img--pull-up:hover { /* Hovering over the arrow icon makes it bigger and brighter */ opacity: 0.8; transform: scale(1.1); color: #fff; } .bottom-bar--left-col--song--img:hover .bottom-bar--left-col--song--img--pull-up { /* Hovering over the image reveals the arrow icon */ display: flex; } 
Now the image part of the bottom bar is finished and I can move on the the text on the right side of the image.
.bottom-bar--left-col--song--details { justify-content: center; display: flex; flex-direction: column; margin-right: 14px; } .bottom-bar--left-col--song--details--wrapper { display: block; line-height: 17px; } .bottom-bar--left-col--song--details a { display: inline; text-decoration: none; color: #fff; letter-spacing: 0; } .bottom-bar--left-col--song--details a:hover { color: #fff; /* Border-bottom instead of text-decoration: underline */ border-bottom: 1px solid #fff; } .bottom-bar--left-col--song--details--title { font-size: 0.875rem; } .bottom-bar--left-col--song--details--artist { font-size: 0.75rem; } 
When hovering over the text "Song Title" we get the underline effect.
⚔ Text-decoration: underline vs border-bottom ("underline")
Now remember when I talked about the Text hover "underline" and why the "underline" was in quotes?
Let's see the Spotify hover text "underline":
Now let's see how the text-decoration: underline looks like on the "Song Title":
.bottom-bar--left-col--song--details a:hover { text-decoration: underline; } 
As you can see the difference between text-decoration: underline; and border-bottom is subtle, but it does exist.
Now let's begin working with the icons on the right side.
I will start with the heart icon, since this one is available in the LineIcons library.
.bottom-bar--left-col--actions { display: flex; align-items: center; } .bottom-bar--left-col--actions--favorite { background: transparent; border: 0; outline: 0; color: #b3b3b3; font-size: 1rem; margin-right: 10px; } .bottom-bar--left-col--actions--favorite:hover { color: #fff; } 
When hovering over the icon:
As you can see I still have to style the last icon, which is the Picture in Picture (PiP) icon.
Boy am I in a pickle, I couldn't find any icon resembling the Picture in Picture icon in the LineIcons library.
Since I can't find the icon, I have 3 options:
- Use a png of an icon from some other site,
- Use one more icon library that contains the PiP icon
- Build the icon with css
Well, I didn't want to use a png for icon, because it is a very simple icon, and I didn't want to bloat the project with 2 icon libraries. So, I went with option 3, which is good since this series is targeted for beginners.
/* Reset the button's default styles */ .bottom-bar--left-col--actions--pip { background: transparent; border: 0; outline: 0; position: relative; /* Width and height will be the actual size of the PiP icon */ width: 16px; height: 13px; padding: 0; } /* The outside of the PiP icon, the Rectangle part of the icon */ .pip-icon { border: 1px solid; border-bottom: 2px solid; border-radius: 1px; border-color: #b3b3b3; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } /* The small rectangle of the PiP icon that is on filled and is on the bottom right corner of the icon */ .pip-icon:before { content: ''; position: absolute; bottom: 1px; right: 1px; height: 3px; width: 5px; background: #b3b3b3; border-radius: 1px; } .bottom-bar--left-col--actions--pip:hover .pip-icon { border-color: #fff; } .bottom-bar--left-col--actions--pip:hover .pip-icon:before { background: #fff; } 
When the user hovers over the PiP icon:
That is the last part that I will add to this section of the series. Now let's have a look at the result:
And a closer look at the bottom bar 👀:
Conclusion
🎉 Thank you for reading through all the post! 🎉
If you have any questions or any feedback, let me know in the comments 🗨.
For the next part of the series I will create rest of the bottom bar. You can see it in this image:
If you want to follow along, you can find the code of the series in these Gists:
Top comments (0)