CSS Art encontra o espaço: um projeto de arte com tema espacial
Publicado em 2024-11-08
Navegar:927
Este é um envio para Frontend Challenge v24.09.04, CSS Art: Space
Inspiração
Hoje, estamos destacando um projeto de arte CSS com tema espacial. A inspiração veio da vastidão do universo, focando nos mistérios dos planetas e galáxias que cativam a nossa imaginação. Queríamos recriar a beleza do espaço sideral.
Demonstração
Confira nossa criação abaixo!
Demonstração ao vivo: Sistema Solar
Explore o código no GitHub: Ver código
Jornada
Queríamos criar uma cena espacial envolvente, completa com planetas, estrelas e uma galáxia. E tentamos torná-lo um pouco educativo adicionando breves descrições sobre os planetas. Um dos principais desafios foi integrar imagens perfeitamente ao design CSS. Tivemos que gerenciar cuidadosamente os tamanhos e posições das imagens
O que vem a seguir?
Planejamos expandir esta arte CSS adicionando mais corpos celestes como asteróides ou estações espaciais e torná-la mais informativa e também explorar maneiras de tornar a cena espacial interativa, talvez permitindo que os usuários cliquem nos planetas para obter mais informações.
Créditos à equipe
Este projeto foi um esforço colaborativo e gostaria de dar crédito à minha colega de equipe por suas contribuições:
Sakshi Singh
Declaração de lançamento
Este artigo foi reproduzido em: https://dev.to/vanshika03/css-art-meets-space-a-space-themed-art-project-41if?1 Se houver alguma violação, entre em contato com [email protected] para excluí-lo
Tutorial mais recente
Mais>
-
VariedadeMétodos são fns que podem ser chamados em objetos Arrays são objetos, portanto também possuem métodos em JS. slice(begin): extrai parte do arr...Programação Publicado em 15/11/2024 -
Como combinar dois arrays associativos em PHP preservando IDs exclusivos e manipulando nomes duplicados?Combinando matrizes associativas em PHPEm PHP, combinar duas matrizes associativas em uma única matriz é uma tarefa comum. Considere a seguinte solici...Programação Publicado em 15/11/2024
-
Como corrigir “Configurado incorretamente: Erro ao carregar o módulo MySQLdb” no Django no macOS?MySQL configurado incorretamente: o problema com caminhos relativosAo executar python manage.py runserver no Django, você pode encontrar o seguinte er...Programação Publicado em 15/11/2024
-
Além das instruções `if`: onde mais um tipo com uma conversão `bool` explícita pode ser usado sem conversão?Conversão contextual para bool permitida sem conversãoSua classe define uma conversão explícita para bool, permitindo que você use sua instância '...Programação Publicado em 15/11/2024
-
Por que os resultados da consulta MySQL são retornados como strings em PHP e como posso recuperá-los em seus tipos de dados nativos?Recuperando resultados de consulta MySQL em tipos de dados nativosEsta questão gira em torno da questão de obter resultados de consulta MySQL em seus ...Programação Publicado em 15/11/2024
-
Como verificar com eficiência números primos em JavaScript?Como determinar números primos em JavaScriptEm JavaScript, identificar números primos é uma tarefa comum de programação. Um número primo é um número i...Programação Publicado em 15/11/2024
-
O que aconteceu com o deslocamento de colunas no Bootstrap 4 Beta?Bootstrap 4 Beta: A remoção e restauração do deslocamento de colunaBootstrap 4, em sua versão Beta 1, introduziu mudanças significativas na forma como...Programação Publicado em 15/11/2024
-
Como analisar uma string de horário com um fuso horário específico no Go?Analisando o tempo com um fuso horário específicoVocê pode usar time.ParseTime() para obter uma estrutura de tempo de uma string. Ele usa uma string d...Programação Publicado em 15/11/2024
-
Como lidar com argumentos de linha de comando no Windows ao executar scripts Python?Execução de script Python no Windows: entendendo o tratamento de argumentosNo Windows, executar scripts Python sem especificar "python" no c...Programação Publicado em 15/11/2024
-
Por que os itens do Flex Container são alinhados ao centro em vez de à esquerda ao usar `justify-content: space-around`?Flex Container Items Alignment LeftEm um menu móvel, uma lista de ícones de mídia social é organizada usando flexbox. Para garantir espaçamento igual,...Programação Publicado em 15/11/2024
-
Como usar canvas.toDataURL() corretamente para capturar a saída do Canvas como uma imagem?Capturando a saída do Canvas como uma imagem: resolvendo desafios com canvas.toDataURL()Ao desenvolver aplicativos HTML5, capture o conteúdo de um can...Programação Publicado em 15/11/2024
-
Usando WebSockets no Go para comunicação em tempo realCriar aplicativos que exigem atualizações em tempo real, como aplicativos de bate-papo, notificações ao vivo ou ferramentas colaborativas, requer um m...Programação Publicado em 15/11/2024
-
Posso usar CSS para estilizar mensagens do console JavaScript no Chrome e Firefox?Estilizando o console JavaScript no Chrome e FirefoxNo mundo atual do desenvolvimento web, o console JavaScript se tornou uma ferramenta indispensável...Programação Publicado em 15/11/2024
-
Como posso encontrar usuários com aniversários de hoje usando MySQL?Como identificar usuários com aniversários de hoje usando MySQLDeterminar se hoje é o aniversário de um usuário usando MySQL envolve encontrar todas a...Programação Publicado em 15/11/2024
-
Como você escapa de caracteres especiais de expressões regulares em JavaScript?Como escapar de caracteres especiais de expressões regulares em JavaScriptO escape de caracteres especiais de expressões regulares é crucial para obte...Programação Publicado em 15/11/2024
Estude chinês
- 1 Como se diz “andar” em chinês? 走路 Pronúncia chinesa, 走路 aprendizagem chinesa
- 2 Como se diz “pegar um avião” em chinês? 坐飞机 Pronúncia chinesa, 坐飞机 aprendizagem chinesa
- 3 Como se diz “pegar um trem” em chinês? 坐火车 Pronúncia chinesa, 坐火车 aprendizagem chinesa
- 4 Como se diz “pegar um ônibus” em chinês? 坐车 Pronúncia chinesa, 坐车 aprendizagem chinesa
- 5 Como se diz dirigir em chinês? 开车 Pronúncia chinesa, 开车 aprendizagem chinesa
- 6 Como se diz nadar em chinês? 游泳 Pronúncia chinesa, 游泳 aprendizagem chinesa
- 7 Como se diz andar de bicicleta em chinês? 骑自行车 Pronúncia chinesa, 骑自行车 aprendizagem chinesa
- 8 Como você diz olá em chinês? 你好Pronúncia chinesa, 你好Aprendizagem chinesa
- 9 Como você agradece em chinês? 谢谢Pronúncia chinesa, 谢谢Aprendizagem chinesa
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
Decodificação de imagem base64
pinyin chinês
Codificação Unicode
Compressão de criptografia de ofuscação JS
Ferramenta de criptografia hexadecimal de URL
Ferramenta de conversão de codificação UTF-8
Ferramentas online de codificação e decodificação Ascii
Ferramenta de criptografia MD5
Ferramenta on-line de criptografia e descriptografia de texto Hash/Hash
Criptografia SHA on-line