Arte em CSS feita com uma única Div

 (a.singlediv.com)
2 pontos por GN⁺ 2024-05-03 | 1 comentários | Compartilhar no WhatsApp
  • A Single Div é um experimento de desenho em CSS que mostra quais expressões visuais são possíveis usando apenas uma div
  • O projeto aparece como uma obra de Lynn Fisher, com o período indicado como 2014-2019
  • A página também inclui itens como GitHub, #divtober e Buy me a coffee
  • Com base apenas no texto fornecido, não é possível confirmar detalhes como código de implementação, lista de obras ou processo de criação
  • A principal restrição é concentrar a expressão em CSS em um único elemento HTML, em vez de usar vários elementos HTML

Natureza do projeto

  • A Single Div é um experimento de desenho em CSS para explorar “o que é possível com uma única div”
  • A página também exibe a descrição a CSS drawing project by Lynn Fisher
  • O período de trabalho é indicado como 2014-2019

Itens vistos na página

  • Há um item GitHub
  • Há um item #divtober
  • Há um item Buy me a coffee
  • Com base apenas no texto fornecido, não é possível confirmar o destino específico dos links nem descrições adicionais de cada item

Leituras relacionadas

1 comentários

 
GN⁺ 2024-05-03
Opiniões no Hacker News
  • Isso me lembrou uma demo que apareceu um tempo atrás. A página mostrava conteúdo, mas, pelo que me lembro, ao usar ver código-fonte, ela tinha 0 byte
    Provavelmente usava um recurso que permite referenciar CSS por meio de cabeçalhos HTTP, então não havia CSS dentro do HTML; o CSS anexava conteúdo aos elementos essenciais que o navegador adiciona automaticamente à página
  • Também houve bastante discussão relacionada em 2016 e 2014, e há 16 dias apareceu um projeto parecido, Only s
    [0]: https://news.ycombinator.com/item?id=8229072
    [1]: https://news.ycombinator.com/item?id=12091173
    [2]: https://news.ycombinator.com/item?id=40049258
    • O site a single div às vezes é interessante e uma boa fonte de inspiração, por isso compartilhei. Acho que revisitar projetos antigos pela perspectiva do desenvolvimento web moderno e discuti-los geralmente ajuda a comunidade
  • Pessoas que fazem arte em CSS sempre me impressionam. Hoje em dia, na área de gráficos 3D, tudo parece fervilhar em torno de three.js, mas CSS art certamente tem seu lugar, e muita gente parece esquecer disso ou não se aprofundar por achar difícil demais
    three.js é excelente para criar cenas grandes, mas uma pequena cena com um único personagem em um site pessoal também pode ser feita com CSS. Muitas vezes tentei reproduzir CodePens incríveis e acabei gastando o fim de semana inteiro sem chegar à perfeição
    A internet pode até estar pronta, mas é difícil dizer que a maioria dos dispositivos conectados à internet oferece bom suporte a WebGL. Depende do público-alvo, claro, mas é melhor criar sites acessíveis para todos, não apenas para o próprio cercadinho
    • Há novidade na arte em CSS, mas ela exige mergulhar em detalhes muito minuciosos do CSS, então os desenvolvedores geralmente não parecem preferi-la. Por outro lado, three.js vem sendo empurrado para o mainstream por uma comunidade de nicho de artistas/coders 3D, e isso por si só pode ser algo bom
      Ainda assim, three.js não é uma solução perfeita para tudo; é preciso avaliar prós e contras para não criar sites desnecessariamente inchados
    • Já criei uma ferramenta que gera botões com efeito de partículas usando essa técnica de CSS [0]
      Sempre achei que seria divertido criar uma ferramenta em que você editasse pequenas “imagens” com formas básicas e ela exportasse automaticamente o código CSS; fico curioso se alguém conhece algo assim
      [0] https://bewelge.github.io/CSS-Button-Particles/ No celular a UI parece horrível, mas o efeito do botão em si deve funcionar bem
    • Também dá para ver uma fogueira feita só com CSS (:
      https://megaemce.github.io/Bonfire
  • Não entendo o que single div quer dizer aqui. Olhei o código-fonte e desisti de contar os divs, então não parece significar literalmente “esta página tem apenas um div”; então o que significa?
    • Cada pequeno rabisco é feito com um div. Mais precisamente, há um div contêiner que não conta, um div principal que conta, e ::before e ::after, que não contam, usados para inserir o conteúdo
      Como exercício criativo é interessante, mas considero que abusar de ::before e ::after é sempre uma má prática. A obsessão por HTML “limpo” é tola; HTML claro é mais fácil de manter
    • Cada “desenho” da lista é renderizado por regras CSS definidas em um único div
      Em geral há muitos truques usando bastante box-shadow
  • Cliquei no link da designer Lynn Fisher no topo e entrei em https://lynnandtonic.com/, e acabei descobrindo algo por acaso
    Eu estava redimensionando uma janela do Chrome com as ferramentas de desenvolvedor abertas e vi a pessoa no logotipo subir e descer a estrada conforme a direção do redimensionamento. Muito legal
    • Eu não sabia disso. Fiquei com vontade de tentar reproduzir algo mais simples no fim de semana. Parece dar para fazer algo como uma bola rolando por uma estrada ou uma nave espacial voando sobre a Terra
    • Parece funcionar só no Chrome e apenas ao redimensionar na horizontal
    • Também há uma referência a Daria no fundo
  • Alguém lembra dos Simpsons feitos em CSS? Aquilo também era ótimo
    https://pattle.github.io/simpsons-in-css/
    • Esses também eram divertidos. Se adicionassem a posição do mouse como gatilho de evento para o movimento dos olhos, poderia virar uma versão dos Simpsons bem convincentemente assustadora
  • Estou vendo no celular; isso quer dizer que cada gráfico foi feito com um único div? Impressionante
    O senso de design gráfico também é bom
    • Sim, todos são um único div. Tecnicamente é um div com os pseudoelementos ::before e ::after adicionados, mas ainda assim é tudo CSS
  • Que bom ver isso aparecer de novo. Tenho uma lembrança vaga, mas fazia tempo que eu não via, e continua extremamente impressionante
    • Eu queria rever esse site, mas não lembrava o nome; só consegui encontrar depois de fuçar mais fundo na minha pasta de “dump links”
  • É legal, mas gostaria que a autora tivesse formatado o HTML de um jeito mais legível. No inspetor tudo bem, mas esse tipo de coisa faz a gente instintivamente clicar em ver código-fonte, e como os espaços foram removidos, é praticamente ilegível
    • O HTML só tem um div para cada “obra”; a parte interessante é apenas o CSS. Para ver a mágica por trás de cada obra, é muito melhor simplesmente clicar com o botão direito e usar inspecionar elemento
  • Eu gostava muito desse site
    • Às vezes dá vontade de simplesmente sentar e tentar recriar esses pequenos fragmentos, um por um