Hoe maak je een Anything schuifregelaar met Just CSS

Vroeger was het ondenkbaar om een ​​schuifregelaar zonder JavaScript in te zetten, maar in deze korte video-tutorial leer je hoe je een "alles" -schuifknop kunt maken met alleen CSS, om elk type inhoud te presenteren dat je nodig hebt.

We zullen CodePen gebruiken voor dit project, dus er zijn twee pennen waar je op moet letten. Ten eerste, de basispen, die u kunt vorkten om aan de slag te gaan:

Dan is er het eindresultaat, dat u kunt bekijken op CodePen. Maak dus een kopie van de basispen en volg de onderstaande video-les terwijl we zelf een "alles" -schuifje bouwen!

Bekijk de zelfstudie

Bekijk de volledige cursus

Dit was slechts een van de projecten in mijn recente cursus, 10 CSS3-projecten: UI en lay-out. In de volledige cursus maak je tien UI- en lay-outprojecten die je zullen helpen een aantal van de ontzagwekkende nieuwe ontwerptechnieken te leren die CSS3 naar de tafel brengt, van geanimeerde tabs tot een draaibare 3D-kubus.