First of, great job regarding this forum, love it!
& i'am watching a lot of your videos, great stuff.
Second, I've been practicing frond end (HTML, CSS & JS) for about 2 months now, and so far I have 2 front end problems in my test project that will most likely sound silly xD.
1: i'm trying to make a vertical navigation bar inspired from windows 10 groove music application, not sure if you're familiar with it and it seems i cant attach an image to the post so you can always just google the app if its not so much of a hassle xD, the problem is, I cant seem to create the blurred transparent background and cant have the buttons next to the icons appear smoothly while the div width expands from 3% to 10% and vice versa, I can send you an image or a video for clarification via whatever if you wish.
2: i have a set of icons that on click they show a menu, so each icon shows a different menu and the hole thing is inside a responsive div with each menu appearing on click under its icon, the problem is that when the div width decreases, the menus no longer appear perfectly under their corresponding icon, am using "left" to position the menus with a percentage.
your help is very much appreciated.
Hey man, glad you like things so far! Can help you out a bit for sure:
1. To get a nice background blur, you'll want to use a blur texture as a background image, then ensure its semi-transparent with opacity:
Code example here: https://codepen.io/ariona/pen/geFIK
Typically for sidebars like the Groove app, I keep them at a fixed width, because if you think about it, what use does a responsive sidebar really have when something always looks good at one particular size?
Usually I shrink my main content, but keep something small like a sidebar static, then re-arrange things on mobile once I'm below 768 pixels.
Let me know if that helps!
helps big time!, the code example link is not working tho, am getting a 404 (Page Not Found)
Want to participate?
Create a free Chris Courses account to begin
Essential canvas syntax at your fingertips.Download Cheat Sheet