Reset CSS
a {
/* inherit means having parent's color*/
color: inherit;
text-decoration: none;
}
button:focus, button:active,
input:focus, input:active,
textarea:focus, textarea:active {
box-shadow: none;
outline:none;
}
ul, ol, li {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
Modal
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 20;
background-color: rgba(0, 0, 0, 0.75);
}
.modal {
position: fixed;
top: 20vh;
left: 5%;
width: 90%;
background-color: white;
padding: 1rem;
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
z-index: 30;
animation: slide-down 300ms ease-out forwards;
}
@media (min-width: 768px) {
.modal {
width: 40rem;
left: calc(50% - 20rem);
}
}
@keyframes slide-down {
from {
opacity: 0;
transform: translateY(-3rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
bump animation
.bump {
animation: bump 300ms ease-out;
}
@keyframes bump {
0% {
transform: scale(1);
}
10% {
transform: scale(0.9);
}
30% {
transform: scale(1.1);
}
50% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
button:disabled
button:disabled,
button:disabled:hover,
button:disabled:active {
cursor: not-allowed;
}
loading spinner
const LoadingSpinner = () => {
return <div className={classes.spinner}></div>;
}
export default LoadingSpinner;
.spinner {
display: inline-block;
width: 80px;
height: 80px;
}
.spinner:after {
content: ' ';
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid teal;
border-color: teal transparent teal transparent;
animation: spinner 1.2s linear infinite;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
+) 기타
Pure CSS Type-writer Effect with animation-timing-function
'Study > CSS' 카테고리의 다른 글
Selectors (0) | 2022.05.20 |
---|---|
etc | box-shadow, overflow, transform, visibility (0) | 2022.05.20 |
Background (0) | 2022.05.19 |
Typography & SR only (0) | 2022.05.18 |
Float & Pseudo Element (0) | 2022.05.18 |