Arte de texto

1463 Andev.web

Abrir no Editor Publique Seu Código

Recomendado

25 September 2025

Trecho de animação de carregamento CSS

12 October 2025

Modelo de interface do usuário do Facebook - Exemplo em HTML

11 August 2025

Coleção de Animação em Círculo CSS

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Squada+One&display=swap");
:root {
  --lcolor: #10fa9f;
  --dcolor: #0cc97f;
}
body {
  background-color: #ff6b8a;
  display: grid;
  place-items: center;
  height: 100vh;
}
.art {
  display: grid;
  width: 450px;
  height: 250px;
  background-color: #10fa9f;
  font-family: 'Squada One';
  overflow: hidden;
  position: relative;
  color: #ff6b8a;
  border-radius: 2px;
  -webkit-text-stroke: 4px #fff;
  box-shadow: -2px 1px 0 2px var(--dcolor), -3px 2px 0 2px var(--dcolor), -4px 3px 0 2px var(--dcolor), -5px 4px 0 2px var(--dcolor), -6px 5px 0 2px var(--dcolor), -7px 6px 0 2px var(--dcolor), -8px 7px 0 2px var(--dcolor), -9px 8px 0 2px var(--dcolor), -10px 9px 0 2px var(--dcolor), -11px 10px 0 2px var(--dcolor);
}
.art .one {
  position: absolute;
  justify-self: start;
  align-self: start;
  left: -25px;
  height: 124px;
  line-height: 0.425;
  font-size: 235px;
  text-shadow: 0 0 2px rgba(0,0,0,0.75);
}
.art .two {
  position: absolute;
  justify-self: end;
  align-self: end;
  height: 124px;
  line-height: 0.95;
  font-size: 215px;
  right: -10px;
  bottom: 15px;
  text-shadow: 0 0 2px rgba(0,0,0,0.75);
}
.art .one,
.art .two {
  filter: drop-shadow(2px -2px 0 rgba(0,0,0,0.105));
}

Recomendado

Trecho de animação de carregamento CSS

Modelo de interface do usuário do Facebook - Exemplo em HTML

Coleção de Animação em Círculo CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS