WIP 3dbutton
This commit is contained in:
parent
e9d6360e8c
commit
e1344d1d5d
SSH key fingerprint:
SHA256:3RU4RLOoM8oAjFU19f1W6t8uouZbA7GWkaSW6rjp1k8
2 changed files with 77 additions and 23 deletions
|
|
@ -2,20 +2,16 @@
|
|||
<div>
|
||||
<div>
|
||||
<button class="button" style="margin-right: 1em; margin-bottom: 1em;">
|
||||
<span>A</span>
|
||||
<span>+</span>
|
||||
</button>
|
||||
|
||||
<button class="button" style="margin-right: 1em;">
|
||||
<span>BB</span>
|
||||
<span>TEST !</span>
|
||||
</button>
|
||||
<button class="button">
|
||||
<span>CCCC</span>
|
||||
<span>-</span>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="button" style="margin-right: 1em;">
|
||||
<span>DDDDDDDDDDDDDDDDDDDDDDDDDDD</span>
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
|
@ -37,11 +33,13 @@ body {
|
|||
}
|
||||
|
||||
.button {
|
||||
--cr-shadow-color: rgba(5, 5, 235, 0.75);
|
||||
--fl-shadow-color: rgba(5, 5, 5, 1);
|
||||
--str-shadow-color: rgba(5, 5, 5, 0.5);
|
||||
--shadow-color: rgba(5, 5, 5, 0.25);
|
||||
--lt-shadow-color: rgba(5, 5, 5, 0.1);
|
||||
|
||||
--cr-highlight-color: rgba(55, 55, 255, 0.25);
|
||||
--highlight-color: rgba(255, 255, 255, 0.25);
|
||||
--fl-highlight-color: rgba(255, 255, 255, 1);
|
||||
|
||||
|
|
@ -55,10 +53,12 @@ body {
|
|||
padding: 1em 1.5em;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
box-shadow:
|
||||
-0.15em -0.15em 0.15em -0.075em var(--shadow-color),
|
||||
0.15em -0.15em 0.15em -0.075em var(--lt-shadow-color),
|
||||
0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color);
|
||||
// outline to in shadow (fixed) [curvature of background surface]
|
||||
box-shadow:
|
||||
-0.15em -0.15em 0.15em -0.075em var(--shadow-color), // tl
|
||||
0.15em -0.15em 0.15em -0.075em var(--shadow-color), // tr
|
||||
-0.15em 0.15em 0.15em -0.075em var(--shadow-color), // bl
|
||||
0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color); // br // why different ? (improves perspective shadow feel?)
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
|
|
@ -71,35 +71,40 @@ body {
|
|||
&::before {
|
||||
z-index: 1;
|
||||
inset: 0.025em;
|
||||
// outline shadow perspective
|
||||
box-shadow:
|
||||
0 0.05em 0.05em -0.01em var(--fl-shadow-color),
|
||||
0 0.01em 0.01em -0.01em var(--str-shadow-color),
|
||||
0.15em 0.3em 0.1em -0.01em var(--shadow-color);
|
||||
// 0 0.05em 0.05em -0.01em var(--fl-shadow-color), // perspective gap btm (opt)
|
||||
// 0 0.01em 0.01em -0.01em var(--str-shadow-color), // perspective gap btm (opt)
|
||||
0.15em 0.3em 0.1em -0.01em var(--shadow-color); // button shadow itself
|
||||
}
|
||||
|
||||
&::after {
|
||||
z-index: 2;
|
||||
inset: 0.0125em;
|
||||
// main button color
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
rgb(230, 230, 230),
|
||||
rgb(180, 180, 180)
|
||||
);
|
||||
clip-path: inset(0 round 999vw);
|
||||
// inline shadows
|
||||
box-shadow:
|
||||
0 0 0 0 inset var(--shadow-color),
|
||||
-0.05em -0.05em 0.05em 0 inset var(--shadow-color),
|
||||
0 0 0.05em 0.2em inset var(--highlight-color),
|
||||
// 0.025em 0.05em 0.1em 0 inset var(--fl-highlight-color),
|
||||
-0.075em -0.25em 0.25em 0.1em inset var(--shadow-color);
|
||||
// inline-perspective shadow
|
||||
0 0 0 0 inset var(--shadow-color),
|
||||
|
||||
// Rounding of the button itself
|
||||
-0.05em -0.05em 0.05em 0 inset var(--shadow-color), // button bottom
|
||||
0 0 0.05em 0.2em inset var(--highlight-color), // button top
|
||||
-0.075em -0.25em 0.25em 0.1em inset var(--shadow-color); // side
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&::before {
|
||||
// outline shadow perspective
|
||||
box-shadow:
|
||||
0 0.05em 0.0em -0.01em var(--fl-shadow-color),
|
||||
0 0.01em 0.01em -0.01em var(--str-shadow-color),
|
||||
// 0 0.05em 0.0em -0.01em var(--fl-shadow-color),
|
||||
//0 0.01em 0.01em -0.01em var(--str-shadow-color),
|
||||
0.1em 0.2em 0.066em -0.01em var(--shadow-color);
|
||||
}
|
||||
|
||||
|
|
@ -115,6 +120,7 @@ body {
|
|||
|
||||
&:active {
|
||||
&::before {
|
||||
// outline shadow perspective
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -155,3 +161,45 @@ body {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
# interface
|
||||
|
||||
- brainstorm:
|
||||
- example button equivalent?:
|
||||
- "3ds hover:3ds-depth-100 active:3ds-depth-200 active:3ds-backlight-red"
|
||||
- general config:
|
||||
- "3ds-light-angle-[120deg]" (day night cycle) 🤯
|
||||
- "3ds-component-red"
|
||||
- "3ds-surface-green"
|
||||
- "3ds-view-angle-[120deg]" ???? (rotatable perspective???) (possible???)
|
||||
- "3ds-ambient-occlusion" ?
|
||||
- "3ds-gap-light?"
|
||||
- "3ds-inline-outline-ratio?"
|
||||
- "sizes? (increased em size)"
|
||||
- open questions:
|
||||
- how to make text work ? 3ds-text required?
|
||||
- depth levels ?
|
||||
- make virtual height configurable as well?????
|
||||
- would need to compute level/ratio when outline shadow disappears
|
||||
- shrinking looks weird for components that are much wider than they are high and vice-versa
|
||||
|
||||
# Wants
|
||||
- depth
|
||||
|
||||
- component color
|
||||
- mounting surface color
|
||||
- text color ? (needed?)
|
||||
|
||||
- nesting?
|
||||
|
||||
## Shadow types?
|
||||
|
||||
outline-depth-shadow (fixed)
|
||||
|
||||
|
||||
inline-depth-shadow
|
||||
- ambient occlusion(bot+top) + highlight
|
||||
|
||||
|
||||
inline-perspective-shadow
|
||||
outline-perspective-shadow
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
@use 'tailwind'
|
||||
@use 'tailwind';
|
||||
|
||||
@layer components {
|
||||
.btn-example {
|
||||
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue