box-shadows / css / css drawing / html / pixel art / scss

Pixel Art sem imagens

Além do desenvolvimento casual da Web e do estilo, o CSS pode lhe proporcionar muita diversão – até para se acalmar após um dia difícil ou simplesmente para tentar algo novo.
CSS Pixel Art é uma dessas coisas.

Vou lhe dizer como é possível criar gráficos de 8 bits / pixel de elemento único com CSS puro.
Nota: Eu uso SCSS para variáveis ​​de cor. Você pode ler mais sobre o pré-processador SCSS e SASS aqui .

Noções básicas de CSS Pixel Art

Esses exemplos pertencem a Link de The Legend of Zelda que fiz. O tutorial lhe dará uma visão interna de como lidar com Pixel Art em CSS. Você encontrará um link para a versão final no final deste tutorial.

O HTML

Em primeiro lugar, configuraremos nosso HTML.

<div class="link"></div>

É isso, só precisamos de um div. Todo o resto é feito com CSS.

O poder do CSS

Vamos começar com alguns SCSS Vars para armazenar cores.

$cap-green        :   rgb(81,108,53);
$border-green   :   rgb(40,56,27);
$hair-light          :   rgb(255,238,69);
$hair-dark          :   rgb(189,166,54);
$skin                  :   rgb(187,176,130);
$skin-darker      :   darken(rgb(187,176,130),5%);

Alguma palavra sobre SCSS

Se você não conhece o SCSS, deixe-me explicar um pouco. Os valores de cores agora são armazenados em variáveis ​​e podem ser usados ​​em qualquer lugar do documento CSS. Se eu decidir alterar uma cor posteriormente, simplesmente altero o valor da variável e ela será alterada em todos os lugares do documento.

Você também precisará salvar seu documento como um arquivo * .scss e processá-lo via linha de comando, navegando até o seu arquivo e digitando SASS (ou SCSS, é basicamente o mesmo) agora observará seus arquivos e os processará sempre que você salvar isto.sass --watch my_scss_sheet_name.scss:style.css
style.css

The link-class

.link {
   width:25px;
   height:25px;
   background:$cap-green;
}

A configuração básica está feita, mas deixe-me explicar um pouco como esses 3 atributos afetam nossa Pixel Art.

O atributo widthe heightdefine o quão grande será cada pixel do nosso desenho. O backgroundatributo define a cor do nosso primeiro pixel, que também é o ponto de partida de onde desenharemos todos os outros pixels. Você pode marcá-lo com uma cor que não aparece em seu desenho durante a edição de seu trabalho. Isso pode ajudá-lo a manter uma visão geral.

A (s) sombra (s) mágica (s)

Cada pixel do nosso Pixel Artwork é uma sombra de caixa. É muito fácil criar Pixel Arts com sombras de caixa quando você trabalha com isso há algum tempo. Vou falar sobre o básico agora.

box-shadow: 25px 0 0 $cap-green;

O exemplo acima criaria uma sombra de caixa que é 25px movida para a direita de nossa classe inicial link. Abaixo você vê um exemplo.
primeiros pixels

A sintaxe da sombra da caixa é muito fácil.

box-shadow: 1 2 3 #000;
/* 
1 value = offset to the right
2 value = offset to the bottom
3 value = blur 
#000 = any color value (can be rgb, hex or anything else)
*/

Tudo bem, temos um elemento e uma sombra, mas isso é uma arte de pixel de baixa qualidade, não é? Sim, e vêm várias sombras de caixa!

Você pode aplicar quantas sombras de caixa desejar para desenhar quantos pixels forem necessários. simpyl vírgula separa-os.

box-shadow: 25px 0 0 #000,
0 25px 0 orange,
50px 0 0 blue;

Com este conhecimento básico sobre CSS Pixel Art, você pode criar seus próprios Pixels Artworks agora. Você pode ver o Link finalizado de The Legend of Zelda aqui .

Eu posso recomendar que você use CodePen para testes (ele também suporta SCSS, SASS, LESS para CSS e HAML, SLIM, Markdown para HTML).

Fique à vontade para postar seus trabalhos baseados neste pequeno Tutorial nos comentários ou diga oi no Twitter .

Related Posts