Scribd
Upload
38 views4 pages

Estilo Site

The document defines CSS variables and keyframes for animating a phone interface with multiple gradient-filled sections. It sets variables for colors, sizing, positioning, durations and easing. It structures the phone interface with elements for the body, phone shell, buttons, screen container and background sections. The background sections are filled with radial gradients and effects like blurring, overlaying and scaling on hover.

Uploaded by

henriquepurificacao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
38 views4 pages

Estilo Site

The document defines CSS variables and keyframes for animating a phone interface with multiple gradient-filled sections. It sets variables for colors, sizing, positioning, durations and easing. It structures the phone interface with elements for the body, phone shell, buttons, screen container and background sections. The background sections are filled with radial gradients and effects like blurring, overlaying and scaling on hover.

Uploaded by

henriquepurificacao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

:root{
--size: max(5px, 1vmin);
--heght: 80em;
--pad: 1.25em;
--border-radius: 6.666em;
--gutter: calc(var(--pad) * 2);
--button-width: 0.333em;
--notch-height: 3.33em;
--notch-width: 33.3%;
--notch-radius: calc(var(--border-radius) - calc(var(--pad) * 2));
--notch-duration: 0.333s;
--ease: cubic-bezier(.666, 0, .4, 1);
--ease-spring: cubic-bezier(.666, 0, .4, 1.2);
--ease-out: cubic-bezier(.15, 0, .333, 1);
--border-width: 0.4em;
--deep-purple: 284;
--gold: 30;
--space-black: 215;
--silver: 254;
--c-h: var(--deep-purple);
--c-s: 100%;
--c-l: 50%;
}

@-webkit-keyframes appear{
to{
transform: scale3d(1, 1, 1);
opacity: 1;
}
}

@keyframes appear{
to{
transform: scale3d(1, 1, 1);
opacity: 1;
}
}

body{
background: #00000a;
display: flex;
flex-direction: column;
gap: 3em;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'inter';
font-size: var(--size);
}

.phone{
position: relative;
z-index: 1;
aspect-ratio: 37/76;
background: black;
height: var(--heght);
border-radius: var(--border-radius);
box-shadow: 0 0 0.1em 0.25em hsl(var(--c-h), 20%, 25%), 0 0 0 var(--border-
width) hsl(var(--c-h), 30%, 85%);
box-sizing: border-box;
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
-webkit-animation: appear 1s var(--ease-out) forwards;
animation: appear 1s var(--ease-out) forwards;
--webkit-backface-visibility: hidden;
}

.phone::before{
content: "";
position: absolute;
top: var(--border-radius);
right: calc(var(--border-width) * 1);
bottom: calc(var(--border-radius));
left: calc(var(--border-width) * -1);
border: 0.5em solid hsl(var(--c-h),20%, 30%);
border-left-width: 0;
border-right-width: 0;
}

.buttons{
position: absolute;
inset: calc(var(--border-width) * -1);
pointer-events: none;
}

.buttons .left, .buttons .right{


position: absolute;
width: var(--button-width);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.5em;
}

.buttons .left{
right: 100%;
top: calc(var(--border-radius) * 2);
}

.buttons .left .button:nth-child(1){


height: 3em;
margin-bottom: 0,5em;
}

.buttons .right{
left: 100%;
transform: scale3d(-1, 1, 1);
top: calc(var(--border-radius) * 3);
}

.buttons .right .button{


height: 9.5em;
}

.buttons .button{
background: hsl(var(--c-h), 20%, 95%);
height: 6em;
box-shadow: inset -0.15em 0 0.1em black, inset 0 0 0.1em hsl(var(--c-h), 30%,
90%), inset 0 0.2em 0.1em hsl(var(--c-h), 30%, 90%), inset 0 -0.2em 0.1em
hsl(var(--c-h), 30%, 90%), inset -0.1em 0.333em 0.1em rgba(0, 0, 0, 0.5), inset -
0.1em -0.333em 0.1em rgba(0, 0, 0, 0.5);
border-top-left-radius: 0.2em;
border-bottom-left-radius: 0.2em;
}

.screen-container{
position: absolute;
inset: 0;
border-radius: var(--border-radius);
border: var(--pad) solid black;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--pad) * 2);
}

.screen-container::before{
content: "";
position: absolute;
z-index: 2;
background: white;
width: 36.6%;
bottom: calc(var(--pad) * 0.75);
height: calc(var(--pad) * 0.5);
border-radius: calc(var(--pad) * 0.25);
filter: drop-shadow(0 0.1em 00.25em rgba(0, 0, 0, 0.1));
}

.bg{
position: absolute;
inset: 0;
background: black;
border-radius: calc(var(--border-radius)) - var(--pad);
overflow: hidden;
}

.bg>*{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
transition: opacity 1s var(--ease-out) 0.5s;
}

.bg .section{
--g-h: var(--c-h);
--g-s: var(--c-s);
--g-l: var(--c-l);
flex-grow: 1;
position: relative;
overflow: hidden;
border-radius: calc(var(--border-radius)- var(--pad));
border-bottom-left-radius: 20em;
border-bottom-right-radius: 20em;
}

.bg .section:before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent),
radial-gradient(120% 120% at 50% 145%, hsl(calc(var(--g-h) - 45), 100%, 50%) 50%,
transparent), radial-gradient(150% 100% at 50% 80%, transparent 35%,
hsl(calc(var(--g-h) + 50), 100%, 99%));
background-color: hsl(var(--g-h), var(--g-s), var(--g-l));
transform: scale3d(1.1, 1.25, 1);
transform-origin: bottom;
transition: transform 1s var(--ease-out) 0.5s;
}

.bg .section:after{
content: "";
position: absolute;
inset: 0;
border: var(--border-width) solid rgba(255, 255, 255, 0.8);
border-radius: inherit;
filter: blur(0.05em);
-webkit-mask-image: radial-gradient(100% 100% at 50% 70%, black 30%,
transparent 50%);
mask-image: radial-gradient(100% 100% at 50% 70%, black 30%, transparent 50%);;
}

.bg .section .glow{


position: absolute;
inset: 0;
border-radius: inherit;
mix-blend-mode: overlay;
z-index: 1;
background: radial-gradient(80% 150% at 50% 100%, hsl(var(--g-h), 100%,var(--g-
h)), transparent 70%);
}

.bg .section:last-of-type{
--g-h: calc(var(--c-h) - var(--g-hue-adjust, 0));
--g-s: calc(var(--c-s) - 25%);
--g-l: calc(var(--c-l) + 20%);
transform: scale3d(1, -1, 1) translateZ(1px);
}

.bg .section:last-of-type::before{
background: radial-gradient(85% 125% at 50% 140%, black 66.6%, transparent),
radial-gradient(120% 120% at 50% 145%, hsl(calc(var(--g-h) - var(--g-hue-adjust-2,
var(--g-hue-adjust, 0))), 100%, 50%) 50%, transparent), radial-gradient(150% 100%
at 50% 95%, transparent 15%, hsl(calc(var(--g-h) + 5), 100%, var(--g-lightness,
100%)));
background-color: hsl(var(--g-h), var(--g-s), var(--g-l));
}

You might also like