Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mefengl/css-note
https://github.com/mefengl/css-note
Last synced: 11 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/mefengl/css-note
- Owner: mefengl
- License: mit
- Created: 2023-06-16T15:00:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-18T03:53:31.000Z (over 1 year ago)
- Last Synced: 2024-10-30T10:15:36.373Z (about 2 months ago)
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# css-note
## transition
### colors
```css
.button {
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
```
```scss
@mixin transition-colors {
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.button {
@include transition-colors;
}
```
```jsx
// with tailwind
```
## animation
### squeeze
```css
.button {
transition: transform 0.2s;
}
.button:active {
transform: scale(0.9);
}
.button:not(:active) {
transition: transform 0.2s;
transform: scale(1);
}
```
```scss
@mixin squeeze {
transition: transform 0.2s;
&:active {
transform: scale(0.9);
}
&:not(:active) {
transition: transform 0.2s;
transform: scale(1);
}
}
.button {
@include squeeze;
}
```
### ripple
```css
.button {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.button:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.5s, opacity 1s;
}
.button:active:after {
transform: scale(0, 0);
opacity: 0.2;
transition: 0s;
}
```
```scss
@mixin ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
&:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.5s, opacity 1s;
}
&:active:after {
transform: scale(0, 0);
opacity: 0.2;
transition: 0s;
}
}
.button {
@include ripple;
}
```
## styles
## decoration
```css
element {
position: relative;
}
element::before {
content: "";
background: linear-gradient(90deg, orange 0%, rgba(255, 165, 0, 0.00) 100%);
opacity: 0.3;
border-top-left-radius: 40px;
border-bottom-left-radius: 20px;
width: 120%;
height: 50%;
position: absolute;
bottom: 0;
left: 0;
}
```