CSS divs que não se arrumam

Henry007 · 3 de dezembro de 2023

eu quero alinhar duas divs uma para ficar centralizada (txt-animado) e uma para ficar em cima (heart), mas não estou conseguindo alinhar elas dessa forma segue o codigo delas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style3.css">
    <title>Document</title>
    
</head>
<body>
    <div class="txt-animado">
        Você é a única <span></span>
    </div>
    <div class="heart"></div>
    </body>
</html>


body {
    background-image:var(--color-bg);
    margin: 0   ;
}

.txt-animado{
    display: flex;
    flex-direction:row;
    background-image:var(--color-bg);
    min-height: 100vh;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

:root{
    --color-bg: linear-gradient(to top,#010329,#000005);
    --color-glass:linear-gradient(to left,#142544,#1a9092);
    --color-water:linear-gradient(to left,#142544,#1b6d6e);
}

.heart{
    top: 50%;
}

.txt-animado{
    font-size: 45px;
    font-weight: 500;

}

.txt-animado span{
    position: relative;
}

.txt-animado span::before{
    content: "";
    color: red;
    animation: palavras 20s infinite;
}

.txt-animado span::after{
    content: "";
    position: absolute;
    height: calc(100% + 5px);
    border-left: 2px solid red;
    right: -10px;
    animation: cursor 1000ms infinite, digitar  20s steps(20) infinite ;
    width: calc(100% + 12px);
    background-color: #000114;
}

@keyframes digitar {
    10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95%{
        width: 0;
    }
    5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85%{
        width: calc(100% + 12px);
    }
    
}

@keyframes cursor{
    0%{
        border-left: 2px solid #000114;
    }
}

@keyframes palavras{
    0%,20%{
        content: "teste";
    }
    21%,40%{
        content: "teste1";
    }
    41%,60%{
        content: "teste3";
    }
    61%,80%{
        content: "teste4";
    }
    81%,100%{
        content: "teste5";
    }
}

.heart{
    height: 90px;
    width: 90px;
    margin-top: 10px;
    background: #f20044;
    position: sticky ;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px #f20044;
    animation: pulse 0.6s linear infinite;
}

@keyframes pulse {
    0%{
        transform: rotate(-45deg) scale(1.07);
    }
    80%{
          transform: rotate(-45deg) scale(1.0);
    }
    100%{
        transform: rotate(-45deg) scale(0.8);
    }
}
.heart::before{
    content: "";
    position: absolute;
    height: 90px;
    width: 90px;
    background: #f20044;
    top: -50%;
    border-radius: 50px;
    box-shadow: -10px -10px 90px #f20044;
}

.heart::after{
    content: "";
    position: absolute;
    height: 90px;
    width: 90px;
    background: #f20044;
    right: -50%;
    border-radius: 50px;
    box-shadow: 10px 10px 90px #f20044;
}

washalbano · 4 de dezembro de 2023

Olá!
Se puder, envie um screenshot de como está e outro, de como deve ficar.

DiF · 4 de dezembro de 2023

@Henry007 Olá, Não sei é isso que você queria, alinhar os dois elementos no meio, um abaixo do outro:

  <div class="items">
    <div class="txt-animado">
        Você é a única <span></span>
    </div>
    <div class="heart selected"></div>
  </div>

body {
    background-image:var(--color-bg);
    margin: 0   ;
}

.items{
  display: flex;
   flex-direction: column;
  align-items: flex-start;
}

.items .selected {
  align-self: center;
}

.txt-animado{
    display: flex;
    flex-direction:row;
    background-image:var(--color-bg);
    min-height: 100vh;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

:root{
    --color-bg: linear-gradient(to top,#010329,#000005);
    --color-glass:linear-gradient(to left,#142544,#1a9092);
    --color-water:linear-gradient(to left,#142544,#1b6d6e);
}

.heart{
   
    top: 50%;
}

.txt-animado{
    font-size: 45px;
    font-weight: 500;

}

.txt-animado span{
    position: relative;
}

.txt-animado span::before{
    content: "";
    color: red;
    animation: palavras 20s infinite;
}

.txt-animado span::after{
    content: "";
    position: absolute;
    height: calc(100% + 5px);
    border-left: 2px solid red;
    right: -10px;
    animation: cursor 1000ms infinite, digitar  20s steps(20) infinite ;
    width: calc(100% + 12px);
    background-color: #000114;
}

@keyframes digitar {
    10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95%{
        width: 0;
    }
    5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85%{
        width: calc(100% + 12px);
    }
    
}

@keyframes cursor{
    0%{
        border-left: 2px solid #000114;
    }
}

@keyframes palavras{
    0%,20%{
        content: "teste";
    }
    21%,40%{
        content: "teste1";
    }
    41%,60%{
        content: "teste3";
    }
    61%,80%{
        content: "teste4";
    }
    81%,100%{
        content: "teste5";
    }
}

.heart{
    height: 90px;
    width: 90px;
    margin-top: 10px;
    background: #f20044;
    position: sticky ;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px #f20044;
    animation: pulse 0.6s linear infinite;
}

@keyframes pulse {
    0%{
        transform: rotate(-45deg) scale(1.07);
    }
    80%{
          transform: rotate(-45deg) scale(1.0);
    }
    100%{
        transform: rotate(-45deg) scale(0.8);
    }
}
.heart::before{
    content: "";
    position: absolute;
    height: 90px;
    width: 90px;
    background: #f20044;
    top: -50%;
    border-radius: 50px;
    box-shadow: -10px -10px 90px #f20044;
}

.heart::after{
    content: "";
    position: absolute;
    height: 90px;
    width: 90px;
    background: #f20044;
    right: -50%;
    border-radius: 50px;
    box-shadow: 10px 10px 90px #f20044;
}

Exemplo online: https://jsfiddle.net/dife/nruzebv3/

Henry007 · 5 de dezembro de 2023

22 horas atrás, washalbano disse:

Olá!
Se puder, envie um screenshot de como está e outro, de como deve ficar.

tirei uma screenshot de como esta, o jeito que eu quero é que o coração fique em cima do texto mas não muito distante vou colocar um exemplo utilizando o paint.

Henry007 · 5 de dezembro de 2023

Em 03/12/2023 às 23:56, DiF disse:

@Henry007 Olá, Não sei é isso que você queria, alinhar os dois elementos no meio, um abaixo do outro:

  <div class="items">
    <div class="txt-animado">
        Você é a única <span></span>
    </div>
    <div class="heart selected"></div>
  </div>

body {
    background-image:var(--color-bg);
    margin: 0   ;
}

.items{
  display: flex;
   flex-direction: column;
  align-items: flex-start;
}

.items .selected {
  align-self: center;
}

.txt-animado{
    display: flex;
    flex-direction:row;
    background-image:var(--color-bg);
    min-height: 100vh;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

:root{
    --color-bg: linear-gradient(to top,#010329,#000005);
    --color-glass:linear-gradient(to left,#142544,#1a9092);
    --color-water:linear-gradient(to left,#142544,#1b6d6e);
}

.heart{
   
    top: 50%;
}

.txt-animado{
    font-size: 45px;
    font-weight: 500;

}

.txt-animado span{
    position: relative;
}

.txt-animado span::before{
    content: "";
    color: red;
    animation: palavras 20s infinite;
}

.txt-animado span::after{
    content: "";
    position: absolute;
    height: calc(100% + 5px);
    border-left: 2px solid red;
    right: -10px;
    animation: cursor 1000ms infinite, digitar  20s steps(20) infinite ;
    width: calc(100% + 12px);
    background-color: #000114;
}

@keyframes digitar {
    10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95%{
        width: 0;
    }
    5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85%{
        width: calc(100% + 12px);
    }
    
}

@keyframes cursor{
    0%{
        border-left: 2px solid #000114;
    }
}

@keyframes palavras{
    0%,20%{
        content: "teste";
    }
    21%,40%{
        content: "teste1";
    }
    41%,60%{
        content: "teste3";
    }
    61%,80%{
        content: "teste4";
    }
    81%,100%{
        content: "teste5";
    }
}

.heart{
    height: 90px;
    width: 90px;
    margin-top: 10px;
    background: #f20044;
    position: sticky ;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px #f20044;
    animation: pulse 0.6s linear infinite;
}

@keyframes pulse {
    0%{
        transform: rotate(-45deg) scale(1.07);
    }
    80%{
          transform: rotate(-45deg) scale(1.0);
    }
    100%{
        transform: rotate(-45deg) scale(0.8);
    }
}
.heart::before{
    content: "";
    position: absolute;
    height: 90px;
    width: 90px;
    background: #f20044;
    top: -50%;
    border-radius: 50px;
    box-shadow: -10px -10px 90px #f20044;
}

.heart::after{
    content: "";
    position: absolute;
    height: 90px;
    width: 90px;
    background: #f20044;
    right: -50%;
    border-radius: 50px;
    box-shadow: 10px 10px 90px #f20044;
}

Exemplo online: https://jsfiddle.net/dife/nruzebv3/

continuou desalinhado o coração ficou no canto inferior esquerdo, vou deixar o print da tela

DiF · 5 de dezembro de 2023

@Henry007 Estranho.. aqui no meu teste ficou centralizado. Basicamente eu defini um elemento pai prara dois elementos, onde dentro dele foi colocado os elementos centralizados com flex em forma de coluna

Independente de redimencionar a janela, grande, ou pequena, aqui sempre se centraliza.