Create a Custom SVG Checkbox (Animated AND Accessible!)
http://www.linode.com/designcourse - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
(Codepen below) - Today, we're going to check out how to create a custom SVG checkbox that animates on click. We'll use Chromevox to ensure it's accessible as well. First, we'll hop into Adobe Illustrator (although, you can use any vector-capable software) to design the icon, then we'll define the HTML and CSS. There's a tiny bit of JavaScript as well, to toggle and reverse the animation.
Codepen demo for this project:
https://codepen.io/designcourse/pen/K...
https://codepen.io/Foxxite/pen/LYEdOoX (Improved, no JS)
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
Auf dieser Seite können Sie das Online-Video Create a Custom SVG Checkbox (Animated AND Accessible!) mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer DesignCourse 09 Januar 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 37,133 Mal angesehen und es wurde von 1.2 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
