A simple animated dismiss all button to dismiss notifications
A Pen by IpsumLorem16 on CodePen.
IpsumLorem16
/ animated-dismiss-all-button.markdown
Created
April 18, 2021 13:00
Animated dismiss all button
IpsumLorem16
/ animated-dismiss-all-button-as-an-object.markdown
Created
April 18, 2021 12:59
Animated dismiss all button { as an object }
IpsumLorem16
/ accessible-toggle-switch.markdown
Created
April 18, 2021 12:59
Accessible Toggle switch
Accessible toggle switch done the right way.
Personal preference: can be tabbed to, but does not gain focus on button/label click.
A Pen by IpsumLorem16 on CodePen.
IpsumLorem16
/ accessible-toggle-switch-different-styles.markdown
Created
April 18, 2021 12:59
Accessible Toggle switch [different styles]
Accessible toggle switch.
With different styles using icons
A Pen by IpsumLorem16 on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg class="bounce" role="status" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" aria-labelledby="title desc"> | |
| <!-- accessible descriptors --> | |
| <title id="title">Loading</title> | |
| <desc id="desc"> fetching content, please wait.</desc> | |
| <circle r="20%" cx="15%" cy="50%" color="#000"/> | |
| <circle r="20%" cx="50%" cy="50%" color="#000"/> | |
| <circle r="20%" cx="85%" cy="50%" color="#000"/> | |
| </svg> | |
| <svg class="fade-out" role="status" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100"> |
A Pen by IpsumLorem16 on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Delete content wrapper --> | |
| <div class="content-wrapper"> | |
| <div class="toggle-container"> | |
| <label for="toggle-1" class="toggle-switch"> | |
| Label | |
| </label> | |
| <button role="switch" type="button" aria-checked="false" id="toggle-1" class="toggle-switch"> | |
| <span aria-hidden="true"></span> | |
| <span class="knob"></span> | |
| <span aria-hidden="true"></span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body data-show-bg="false"> | |
| <!-- Delete content wrapper --> | |
| <div class="content-wrapper"> | |
| <div class="toggle-container"> | |
| <label for="toggle-1" class="toggle-switch"> | |
| Background | |
| </label> | |
| <button role="switch" type="button" aria-checked="false" id="toggle-1" class="toggle-switch"> | |
| <span aria-hidden="true"></span> | |
| <span class="knob"></span> |
IpsumLorem16
/ animated-svg-likes-gsap-wip-fork.markdown
Created
April 18, 2021 12:57
Animated SVG 'likes' (GSAP) [WIP]fork
A Pen by IpsumLorem16 on CodePen.
IpsumLorem16
/ animated-svg-heart-button.markdown
Created
April 18, 2021 12:56
Animated SVG heart button
NewerOlder