CSS Navbar: Create a Beautiful Navigation Bar From Scratch
3.1 هزار بار بازدید -
پارسال
-
A step-by-step guide to creating
A step-by-step guide to creating a simple yet beautiful navigation bar from scratch using CSS, from creating a semantic HTML structure for the navigation to picking beautiful gradients and tweaking the design until it feels and works just right.
🔗 Links
Codepen demo: https://codepen.io/ZoranJambor/pen/NW...
Direction Aware Hover Effect Using :has() Selector: Create a Direction Aware Hover Effect...
In-Depth Guide to CSS Logical Properties: In-Depth Guide to CSS Logical Properties
Switch to HSL Color Format: Switch to HSL Color Format
Hypercolor Gradients: https://hypercolor.dev
Contraste: https://contrasteapp.com/
📖 Chapters
00:00 Intro
00:22 Create HTML Structure for Navbar using Emmet
03:40 Select a background gradient for the page
05:17 Switch RGB to HSL color format using Chrome DevTools
06:44 Tweak page styles (font-family, font-size, line-height)
07:45 Style the header element container
09:00 Tweak logo size using Chrome DevTools
09:57 Position the logo next to the navigation bar using flexbox
10:53 Layout menu links one next to another using flexbox
11:07 Tweak menu colors
11:22 Adjust menu spacing and align links properly
16:13 Add hover effect on menu items
19:18 Create the responsive version using media queries
21:34 Adjust responsive version spacing
24:36 Add background to menu item links
27:44 Add gap between logo and navigation menu
28:15 Tweak the responsive version
30:35 Conclusion
Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: https://masteringlinting.com/
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: Twitter: CSSWeekly
👉 Instagram: Instagram: cssweekly
👉 Facebook: Facebook: CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: Twitter: zoranjambor
👉 LinkedIn: LinkedIn: zoranjambor
- Zoran Jambor
#css #flexbox
🔗 Links
Codepen demo: https://codepen.io/ZoranJambor/pen/NW...
Direction Aware Hover Effect Using :has() Selector: Create a Direction Aware Hover Effect...
In-Depth Guide to CSS Logical Properties: In-Depth Guide to CSS Logical Properties
Switch to HSL Color Format: Switch to HSL Color Format
Hypercolor Gradients: https://hypercolor.dev
Contraste: https://contrasteapp.com/
📖 Chapters
00:00 Intro
00:22 Create HTML Structure for Navbar using Emmet
03:40 Select a background gradient for the page
05:17 Switch RGB to HSL color format using Chrome DevTools
06:44 Tweak page styles (font-family, font-size, line-height)
07:45 Style the header element container
09:00 Tweak logo size using Chrome DevTools
09:57 Position the logo next to the navigation bar using flexbox
10:53 Layout menu links one next to another using flexbox
11:07 Tweak menu colors
11:22 Adjust menu spacing and align links properly
16:13 Add hover effect on menu items
19:18 Create the responsive version using media queries
21:34 Adjust responsive version spacing
24:36 Add background to menu item links
27:44 Add gap between logo and navigation menu
28:15 Tweak the responsive version
30:35 Conclusion
Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: https://masteringlinting.com/
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: Twitter: CSSWeekly
👉 Instagram: Instagram: cssweekly
👉 Facebook: Facebook: CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: Twitter: zoranjambor
👉 LinkedIn: LinkedIn: zoranjambor
- Zoran Jambor
#css #flexbox
پارسال
در تاریخ 1402/01/07 منتشر شده
است.
3,197
بـار بازدید شده