How to Easily Create Pure CSS Tabs (No JavaScript Needed!)
ฝัง
- เผยแพร่เมื่อ 21 ก.ย. 2024
- Link to code:
codepen.io/dco...
In today's video I'll be showing you how to easily create CSS-only tabs - this is a perfect solution that only requires HTML & CSS and can easily be added to an existing website or web application.
For your reference, check this out:
developer.mozi...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #css
Oh, elegant solution! I wonder how well these nest inside of one another, it could be a unique primary navigation system!
Dude, this is amazing. Thx a lot.
Dude, thank you so much for this!
was searching for such tutorial...very easy to understand for beginners. Really nicely explained with pure css. 👍
This actually worked, thank u
Excellent tutorial, thanks!
Thanks a lot for this video: easy to understand, simple to implement and very useful
Thank you very much! I learned a lot!❤
good tutorials, thanks
very cool css tutorial thank's
What can I do to make it work on mobile or responsive? When I click on it, it doesn't work.
really useful thanks a lot
Could this work via the keyboard? Tabbable? Accessible?
Awesome work
I was just wondering I do we have to select the two adjacent siblings ? .tabs__radio:checked + .tabs__label + .tabs__content, why cant we just .tabs__radio:checked > .tabs__content ?
Can someone answer? Thank you
Hi. Does making the tabs differ at all when making a spreadsheet like excel...? Do you know of a video that shows how to make tabs with a spreadsheet situation...? I tried making the "flex-wrap" idea but it didn't work. I'm not sure what I did wrong... Currently it shows both spreadsheets on the same page...one under the other...🙏
thank you
hey man, thanks for this. what is the name of the vsc theme tho?
Great, was looking for something like this. Quick q, is there a way to create a new tab button? As in lile a chrome or browser tab to open a new tab, is there a way to do this for this tutorial?
You are awesome 👍
Please resume yesterday tutorial about table, can we make datatable with pure JavaScript?
Best one
amazing
Plesse make an video, how to create Mobile (responsive) 2 colum card layout 🙂
Please can you make vertical tab?
Thanks,,,,,🤓
Welcome
13:45 code or didn't happen! Many browsers have bugs and you can make it work in one browser but not another. Good idea but half-assed implementation.
If you have problems in rendering styles between browser, test them in every browser using some extension. Also use some prefixes in css properties like -moz for firefox, -webkit for chrome and some browsers, etc
👏👏👏
Is flex responsive?
It certainly does encourage responsive behaviour :)
:)
Hey Dom, thanks a lot for the tutorial. Is it possible that it doesn't work if the CSS tabs are inserted more than twice on a page?
Certainly works with up to 4 tabs as I've done that without any issue.
This actually worked, thank u