Nota: apenas traduzi o texto abaixo e postei aqui. As referências estão no fim deste artigo.

Olá a todos 👋, hoje quero compartilhar com vocês uma (de muitas) coisas que fiz que fizeram o CSS funcionar para mim.

Quando comecei a aprender CSS, queria colocar o que tinha aprendido em prática. Mas sou péssimo em projetar coisas, então, embora quisesse fazer alguns layouts e designs com CSS, estava sem ideias. Olhando para trás agora, talvez eu devesse ter escolhido um site e feito um clone do design e layout 🤷, mas acho que, como iniciante, foi um pouco intimidador.

Então, como consegui fazer isso?

Um dia, vi um vídeo no YouTube em que os desenvolvedores estavam desafiando uns aos outros para algo chamado CSS Battle. CSS Battle é um site que tem várias "Artes" que são projetadas puramente usando CSS, eles fornecem a color palette para você e tudo o que você precisa fazer é recriar o design com o mínimo possível de caracteres.

Pensei, parece muito divertido, gosto de um bom quebra-cabeça/desafio, então fiz a tentativa. Eu não estava muito preocupado em obter a pontuação mais alta ou usar o menor número de caracteres, eu só queria escrever algum CSS.

Lembro que passei o dia inteiro naquele site, tentando recriar designs diferentes (CSS Art?). Acho que aprendi muitas coisas novas sobre positioning, pseudo-elements, transformation e outras CSS properties que nunca tinha visto antes. Mas acho que o que me manteve naquele site foi eu ter tentando obter 100% de correspondência aos designs (isso nunca aconteceu 😥).

Eu recomendaria a qualquer pessoa que esteja lutando para encontrar um método para fazer o CSS funcionar, que experimente o CSS Battle. Ainda tenho as "técnicas" que aprendi quando resolvi o CSS Battle nos meus projetos hoje.

Se você chegou até aqui, obrigado por ler, aqui vai um grande coração para você, criado usando uma div e pseudo-elements.

HTML:

<div></div>

CSS:

body {
    display: grid;
    place-items: center;
    height: 100vh;
    background: #333;
}

div {
    width: 200px;
    height: 300px;
    position:relative;
}

div::before, div::after {
    content: "";
    height: 100%;
    width: 90%;
    background: #DA0037;
    position: absolute;
    border-radius: 200px 200px 0 0;
}
div::before{
    left: -50px;
    transform: rotate(-45deg);
}
div::after {
    left: 35px;
    transform: rotate(45deg);
}

Abaixo segue o resultado:

Você já tentou o CSS Battle antes? O que você acha dele?

Se quiser entrar em contato comigo, sinta-se à vontade para me contatar no Twitter.

Fonte

Artigo escrito por Tanwa Sripan.