Design

Manual da marca: sua importância e o que ele deve conter

Veremos neste artigo, a importância do manual da marca para a manutenção da identidade visual de um negócio. Também conhecido como manual de identidade visual ou brand guideline, ele, por muitas vezes é pouco valorizado ou até mesmo desconhecido por parte das empresas.

Mas o que é o manual da marca?

Nada mais é do que um guia de boas práticas para a utilização do logotipo e/ou comunicação construída para a empresa pelo designer ou agência responsável pelo projeto. E não só isso. Ele também tem como função informar características como cores utilizadas e seus respectivos códigos (hexagonal, RGB, CMYK, Pantone), além das informações de tipografia(s) escolhida(s) para a identidade da marca. Mas por quê? É o que veremos a seguir!

A importância do manual da marca

Sabemos que existe um longo caminho até que se gere o reconhecimento de uma marca, seja ele por uma cor predominante ou uma combinação delas, seja pela tipografia utilizada ou pelos elementos que compõem sua comunicação. Resumindo, é necessário que haja um padrão.

Imagine que a Pepsi passe a utilizar o vermelho como cor predominante em seus produtos. Num primeiro momento, eles provavelmente seriam confundidos com sua maior concorrente, a Coca-Cola.

O manual auxilia no desenvolvimento de materiais e peças publicitárias de acordo com a identidade da marca. É importante lembrar que nem sempre serão os mesmos profissionais e agências que trabalharão no projeto. Com isso, o manual de identidade visual garante que mesmo nessas situações os conceitos e padrões se mantenham na comunicação da empresa.

Adobe Photoshop CC 2015 - Básico
Curso de Adobe Photoshop CC 2015 - Básico
CONHEÇA O CURSO

O que deve conter num manual da marca

Veremos agora, alguns itens indispensáveis para a construção de um manual da marca eficiente. Vale ressaltar que o manual não é uma apresentação, mas sim um guia. Por isso, ele precisa ser entendível não apenas por designers, mas também por profissionais de outras áreas.

1. Capa

Por questões estéticas, é interessante que o manual possua uma capa. Não precisa ser muito elaborada, com tanto que comunique a que empresa ele pertence.

2. Sumário

Se o manual for muito extenso, é interessante que possua um sumário para facilitar a utilização.

3. Apresentação da empresa

Nesse item é comum descrever um pouco sobre a empresa, assim como missões, valores e até mesmo informações de contato e sobre os donos e/ou responsáveis por ela.

4. Conceito da marca / Assinatura da marca

Nessa etapa vale falar um pouco sobre a concepção da marca e as ideias e elementos que conduziram o processo criativo. Pode-se também apresentar as diferentes (caso exista) assinaturas da marca (horizontal e vertical).

5. Cores institucionais

Talvez essa seja uma das informações mais importantes do manual. Diferenças de tonalidades são muito comuns em materiais de divulgação, principalmente nos impressos. Elas podem ocorrer também de acordo com o dispositivo onde são exibidas, por isso, a paleta de cores precisa ser bastante detalhada. Veja no exemplo abaixo:

6. Aplicações

Depois de apresentar as cores, é chegada a hora de aplicar a marca em diferentes cores para exemplificar o uso correto das mesmas.

7. Versões monocromáticas

Em determinadas ocasiões, a marca precisa ser apresentada em versões monocromáticas, por isso é imprenscindível que haja essa informação no manual.

8. Família tipográfica

Aqui, apresenta-se a família tipográfica utilizada na marca assim como as fontes secundárias, normalmente utilizadas em impressos, site, sinalizações.

9. Área de proteção

A área de proteção nada mais do que o espaço que deve existir entre o logo e os demais elementos dentro de uma comunicação, seja ela embalagem, anúncio ou qualquer outro material que apresente a marca. Isso garante a facilidade na leitura e a distinção dela dentre os outros elementos.
É comum utilizar uma letra ou um elemento da marca como parâmetro da área a ser delimitada. Veja um exemplo abaixo:

10. Proibições

Nesse tópico, serão exibidos exemplos de utilizações inadequadas do logotipo que deverão ser evitadas.

Adobe Photoshop CC 2015 - Básico
Curso de Adobe Photoshop CC 2015 - Básico
CONHEÇA O CURSO

Outras informações poderão ser adicionadas conforme o projeto, referentes por exemplo a itens de papelaria, cartão de visitas, plotagem de veículos, uniformes e assinatura de e-mail. Quanto mais completo um manual de identidade visual, menores serão os riscos para a marca.

Gostou do conteúdo? Tem alguma sugestão? Deixe o seu comentário abaixo! 🙂

Até a próxima!

CSS Grid – Um Guia Interativo (Parte 2 – Itens)

Olá Web Developers!

No post anterior vimos as propriedades que usamos no container ao trabalhar com CSS Grid. Agora veremos as propriedades que utilizamos nos itens do container.

Itens

Lembre-se que temos propriedades CSS para trabalhar com o elemento que possui nossos itens (container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).

Neste post veremos as propriedades que ficam nos elementos da grid.
Teremos basicamente um container com alguns itens dentro.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Para vermos a diferença das propriedades aplicadas em um item específico, vamos adicionar a este item a classe .selected.

<div class="container" >
    <div class="item" ></div>
    <div class="item selected" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

grid-area

Esta propriedade nós já vimos no post anterior. Ao declarar nomes para as áreas da nossa grid, utilizamos o grid-area para indicar a área onde um item irá se posicionar.

grid-column-start, grid-column-end, grid-row-start e grid-row-end

Indicar nomes para cada área da nossa grid e depois posicionar os itens usando o nome é bem simples. Porém, pode ser que você precise de algo mais flexível do que isso.
Com as propriedades grid-column-start, grid-column-end, grid-row-start e grid-row-end nós podemos indicar em que linha e coluna um item deve iniciar e acabar. Podemos usar tanto número quanto nomes.

grid-column e grid-row

Essas duas propriedades são atalhos para as 4 propriedades anteriores.
Em grid-column nós indicamos o início / fim da coluna, e em grid-row nós indicamos o início e fim da linha. Os valores são separados por /.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

Tudo em uma propriedade: grid-area

Podemos também indicar essas 4 posições dentro de apenas uma única propriedade. Para isso também usamos o grid-area. A ordem é inicio-linha / inicio-coluna / fim-linha / fim-coluna

justify-self

Alinha o item da grid horizontalmente dentro de sua própria célula (área).

  • stretch (padrão): estica o item horizontalmente para ele preencher sua célula
  • start: alinha o item no início de sua célula
  • end: alinha o item no fim de suas células
  • center: alinha o item no centro de suas células

align-self

Alinha o item da grid verticalmente dentro de sua própria célula (área).

  • stretch (padrão): estica o item verticalmente para ele preencher sua célula
  • start: alinha o item na parte de cima de sua célula
  • end: alinha o item na parte de baixo de sua célula
  • center: alinha o item no centro de sua célula

place-self

Atalho para align-self e justify-self em uma única declaração.

CSS Grid – Um Guia Interativo (Parte 1 – Containers)

Olá Web Developers!

Há um bom tempo que os navegadores já suportam bem o CSS Grid. Porém, ainda há pessoas com algumas dúvidas sobre o seu funcionamento. Por isso desenvolvi um guia interativo para te ajudar a entender como ele funciona.

Já fizemos aqui um guia completo sobre FlexBox. Para conferir:

Guia Interativo FlexBox – Parte 1 (Containers)
Guia Interativo FlexBox – Parte 2 (Itens)

Caso você esteja em dúvida sobre usar Flexbox ou CSS Grid, também já fizemos um post sobre isso: Flexbox ou CSS Grid?

HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

O Que É CSS Grid?

O CSS Grid é um sistema de estruturação de layout que o CSS nos fornece. Diferente do Flexbox, que apenas nos permite trabalhar em uma única dimensão, o CSS Grid nos permite configurar layouts em duas dimensões (linhas e colunas). A junção de linhas e colunas formam uma grade, o que dá o nome a esse sistema (Grid).

O CSS Grid é bem poderoso e completo, permitindo que certas coisas sejam feitas de mais de uma maneira, o que pode confundir muitos iniciantes. Portanto, aqui irei mostrar as principais partes da forma mais simples para que você já termine de ler este post sabendo trabalhar com o CSS Grid.

Primeiro de tudo temos que saber que teremos propriedades CSS para trabalhar com o elemento que possui nossos itens (grid container ou elemento pai) e propriedades para os nossos itens da grid (elementos filhos).

Grid Container

Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o grid container.
Teremos basicamente um container com alguns itens dentro. Dependendo do exemplo a quantidade de itens poderá ser alterada.

<div class="container" >
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>

Display

Primeiro precisamos definir que o nosso container é do tipo “grid”; Fazemos isso com a propriedade “display”.

.container{
    display: grid;
}

Isso irá criar uma grid do tipo block, significando que o .container irá ocupar a linha inteira.
Caso você queira containers inline, utilize display: inline-grid;

grid-template-columns e grid-template-rows

Como estamos trabalhando com uma grade, precisamos indicar quantas linhas e quantas colunas nossa grade terá.
Para colunas usamos o grid-template-columns e para linhas usamos o grid-template-rows.

Se queremos 3 colunas, não indicamos com o número três. O que fazemos na verdade é indicar qual o tamanho de cada coluna que queremos. A medida pode ser em qualquer unidade (px, em, %, cm, etc). Cada valor deve ser separado por um espaço.

Exatamente da mesma maneira nós declaramos as linhas utilizando a propriedade grid-template-rows.

grid-template-areas

Até agora só declaramos o tamanho das nossas colunas e linhas. Você deve ter notado que nossos itens vão se organizando na grid de acordo com a ordem em que estão no HTML.

Porém, o CSS Grid nos permite ir além disso: podemos dar nomes para cada área da nossa grade e depois indicar onde cada elemento deve ir. Dessa maneira fica bem simples de entender a estrutura da nossa grid. Fazemos isso com a propriedade grid-template-areas.

Vamos alterar um pouquinho o nosso HTML. Iremos colocar as classes header, sidenav, content e footer nos itens da grid para podermos indicar a posição de cada um deles depois.

<div class="container" >
    <div class="item header" ></div>
    <div class="item sidenav" ></div>
    <div class="item content" ></div>
    <div class="item footer" ></div>
</div> 

Para cada item, vamos declarar a propriedade grid-area, que serve para indicar o nome da área em que cada elemento deverá ocupar na grid. Para facilitar eu dei o mesmo nome das classes, mas você pode dar o nome que quiser.

.header{
  grid-area: header;
}
.sidenav{
  grid-area: sidenav;
}
.content{
  grid-area: content;
}
.footer{
  grid-area: footer;
}

Agora vamos ao que interessa: indicar o nome das áreas da nossa grid.
Para dar nomes às áreas de uma mesma linha, escrevemos dentro de aspas "". Ao abrir novas aspas estaremos indicando que estamos indo para a linha seguinte.

No exemplo abaixo nós escrevemos o nome das áreas em uma única linha. Mas para ficar mais simples de entender nós poderíamos ter escrito em linhas separadas. Fica visualmente mais legível:

.container{
    grid-template-areas: "header header" 
                         "sidenav content" 
                         "footer footer";
}

Repetimos header e footer duas vezes porque declaramos duas colunas e queremos que eles ocupem as duas.

Experimente mudar os nomes das áreas de lugar e veja que nossos elementos irão mudar de posição também. Algumas sugestões:

  • “sidenav header” “sidenav content” “sidenav footer”
  • “header header” “content sidenav” “footer footer”
  • “header header” “content sidenav” “footer sidenav”

Se quiser criar uma área sem nome, coloque .. Experimente: “header header” “content sidenav” “. footer”

grid-column-gap, grid-row-gap e grid-gap

Nossos itens estão todos colados. Podemos indicar qual o espaço entre linhas e colunas.
Para isso usamos as propriedades grid-column-gap e grid-column-row.

O grid-gap é um atalho para declarar as duas propriedades em um só lugar.
Se você passar um único valor, os dois serão aplicados para o espaço para linhas e colunas. Se passar dois valores, o primeiro será para linhas e o segundo para colunas.

.container{
    grid-gap: 20px;
    grid-gap: 20px 50px;
}

* O prefixo grid- destas propriedades está sendo removido e já é suportado nos navegadores modernos. Portanto, também pode-se utilizar as propriedades column-gap, row-gap e gap.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
CONHEÇA O CURSO

justify-items

Alinha todos os itens da grid horizontalmente dentro de sua própria célula (área).

  • stretch (padrão): estica os itens horizontalmente para eles preencherem sua célula
  • start: alinha os itens no início de suas células
  • end: alinha os itens no final de suas células
  • center: alinha os itens no centro de suas células

align-items

Alinha todos os itens da grid verticalmente dentro de sua própria célula (área).

  • stretch (padrão): estica os itens verticalmente para eles preencherem sua célula
  • start: alinha os itens na parte de cima de suas células
  • end: alinha os itens na parte de baixo de suas células
  • center: alinha os itens no centro de suas células

place-items

Atalho para align-items e justify-items em uma única declaração.

justify-content

O justify-item alinha cada item dentro de sua própria área. Já o justify-content alinha horizontalmente as áreas em relação ao container.

  • stretch: redimensiona os itens da grid para preencherem a largura do container. Apenas funciona se você não tiver declarado uma largura para as colunas.
  • start: alinha as áreas no início da grid
  • end: alinha as áreas no final da grid
  • center: alinha as áreas no centro da grid
  • space-around: distribui as áreas com o espaço a sua volta
  • space-between: distribui as áreas com o espaço entre elas
  • space-evenly: distribui o espaço igualmente entre as áreas

align-content

O align-item alinha cada cada item dentro de sua própria área. Já o align-content alinha verticalmente as áreas em relação ao container.

  • stretch: redimensiona os itens da grid para preencherem a altura do container. Apenas funciona se você não tiver declarado uma altura para as linhas.
  • start: alinha as áreas no topo da grid
  • end: alinha as áreas na base da grid
  • center: alinha as áreas no centro da grid
  • space-around: distribui as áreas com o espaço a sua volta
  • space-between: distribui as áreas com o espaço entre elas
  • space-evenly: distribui o espaço igualmente entre as áreas

place-content

Atalho para align-content e justify-content em uma única declaração.

grid-auto-columns e grid-auto-rows

Pode ser que você precise criar novas linhas ou colunas, as quais ainda não estão declaradas. Ao serem criadas, qual o tamanho delas?
Estas propriedades nos permitem indicar qual será o tamanho de novas linhas e colunas criadas.

Um exemplo bem simples é caso você não tenha declarado o tamanho das linhas ou colunas. Ao adicionar novos elementos, eles ficarão com o tamanho indicado nestas propriedades.

Nós aprendemos a posicionar os itens da grid passando o nome das áreas.
Porém, há outra maneira (um pouco mais complicada) de se fazer isso. Após indicar o tamanho das áreas e colunas, podemos indicar em que linha/coluna o item começa e em que linha/coluna ele termina. Ficaria assim:

.item{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3
}
/*ou com os atalhos:*/
.item{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
/*ou com esse atalho*/
.item{
    grid-area: 1 / 2 / 2 / 3;
}

Se você declarar, por exemplo, para um item se posicionar em uma linha ou coluna que não foi declarada, ele ficará com as dimensões declaradas em grid-auto-columns e grid-auto-rows também.

grid-auto-flow

Se você possui itens que não possuem uma área declarada para ficar, esta propriedade indica se estes itens devem ir para uma nova linha ou coluna.

grid

Atalho para definir em uma única declaração as seguintes propriedades: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns e grid-auto-flow

Funções e Valores Especiais

O CSS Grid também veio com palavras-chave que guardam valores especiais e também novas funções para dar ainda mais poder à criação de nossos layouts.

Valores Especiais

Ao declarar as dimensões das linhas e colunas, podemos indicar algumas palavras especiais ao invés de valores numéricos:

  • min-content: o elemento ficará com o tamanho mínimo de seu conteúdo
  • max-content: o elemento ficará com o tamanho máximo de seu conteúdo
  • auto: utiliza o espaço disponível

No exemplo a seguir, o primeiro item ficará com o tamanho mínimo de seu conteúdo, ou seja, seu texto. O segundo item ficará com o tamanho máximo necessário para caber seu conteúdo (texto).
Já o terceiro elemento ficará com o espaço que sobrou.

A unidade fr

Além de indicar a dimensão de linhas e colunas com as tradicionais unidades como px, % e em, agora também contamos com o fr.
Esta unidade indica fração.

No código abaixo cada uma das colunas ficará com 1/3 do espaço disponível (1fr + 1fr + 1fr = 3).

.container{
  /***********/
  grid-template-columns: 1fr 1fr 1fr;
  /***********/
}

No código abaixo a primeira coluna ficará com 50px, a segunda com 2/5 do espaço disponível e a terceira, com 3/5 (2fr + 3fr = 5).

.container{
  /***********/
  grid-template-columns: 50px 2fr 3fr;
  /***********/
}

Experimente brincar com os valores das colunas no Playground abaixo:

A função minmax()

Imagine que você tenha uma linha ou coluna que pode variar de tamanho, mas que ela não pode passar de um valor mínimo ou máximo. Esta função nos permite indicar ambas as dimensões limites.

No código abaixo a primeira e terceira coluna terão 1fr de largura. A segunda coluna terá seu tamanho alterado de acordo com a largura de seu container. O tamanho mínimo será 100px e o máximo será 50% da largura do container (isso mesmo, podemos misturar unidades diferentes!).

.container{
  /***********/
  grid-template-columns: 1fr minmax(100px, 50%) 1fr;
  /***********/
}

Isso ajuda muito a ter mais controle do tamanho dos elementos e também nos poupa de escrever vários media queries.

A função fit-content()

Esta função recebe um único parâmetro, o tamanho máximo que um elemento pode chegar. É como se você usasse o min-content, mas com um controle de tamanho máximo que o elemento pode ter.

Uma diferença principal com o minmax() é que o minmax() sempre buscará ocupar o maior espaço possível, enquanto o fit-content() não ocupará mais espaço do que o necessário.

A função repeat()

Quando precisarmos criar mais de uma linha ou coluna com a mesma dimensão, utilize a função repeat() para não ter que ficar escrevendo várias vezes. Primeiro indicamos o número de repetições e depois, o valor a ser repetido.

No código abaixo nossa primeira coluna terá 50px de largura. Depois teremos 3 colunas com 20px e uma última com 1fr.

.container{
  /***********/
  grid-template-columns: 50px repeat(3, 20px) 1fr;
  /***********/
}

Experimente mudar a quantidade de repetições e o valor da dimensão dos itens repetidos no Playground abaixo.

auto-fill e auto-fit

Junto ao repeat() podemos usar as palavras especiais auto-fill e auto-fit. Isso ajuda muito na hora de criar layouts responsivos de forma bem simples.

Nos exemplos abaixo, note que eu não indiquei quantas colunas eu quero. Na função repeat() eu usei os valores auto-fill e auto-fit.

O auto-fill tenta preencher o espaço disponível com quantos itens der, não importando se os itens estão vazios. Já o auto-fit também tenta colocar quantas colunas der, expandindo os itens para caber no espaço disponível.

Veja que, como estamos usando a função minmax(), também temos controle do tamanho mínimo e máximo dos itens.

O que são Imagens Vetoriais?

Olá Web Developers!

Já ouviu falar de Imagens Vetoriais? Vamos ver a diferença e as vantagens em relação às imagens “comuns”.

Desenvolvedor Front-end Júnior
Formação: Desenvolvedor Front-end Júnior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Teremos uma introdução ao HTML e CSS e conheceremos a linguagem JavaScript.
CONHEÇA A FORMAÇÃO

Imagens Rasterizadas (bitmap)

Primeiro, vamos entender o que são as imagens bitmap. É o formato mais comum de imagem, o qual é como um mapa que indica a posição de cada pixel que compõe a imagem.

Os formatos mais usados na web são JPEG, PNG e GIF.
Bitmap é ótimo para imagens que precisam de muitos detalhes, como fotografias.

No exemplo acima temos o logo da TreinaWeb com 16×16, ou seja, há 256 quadradinhos (pixels) formando a imagem. Porém, as fotos que tiramos hoje em dia possuem milhões de pixels.

Imagens Vetoriais

Imagens vetoriais possuem esse nome porque os formatos são gerados a partir de vetores matemáticos.

Ou seja, ao invés de termos o mapeamento de cada um dos pixels da imagem, teremos uma fórmula que indica uma forma. Isso significa que imagens vetoriais não possuem pixels.

Vetorial vs Bitmap

Se imagens bitmap forem redimensionadas, em determinado ponto os pixels ficarão visiveis.

Como imagens vetoriais não possuem pixels, pois suas formas são indicadas por fórmulas matemáticas, podemos redimensionar o quanto quisermos sem perda de qualidade.

Veja abaixo uma comparação. Altere o tamanho e note que os pixels começam a ficar visíveis na imagem bitmap, enquanto na imagem vetorial não há nenhuma diferença.

Isso pode ser uma vantagem quando precisamos redimensionar muito uma imagem sem perda de qualidade. Logos normalmente são feitos em imagem vetorial, pois assim podemos utilizar o logo em vários lugares, desde a cabeça de um alfinete até em um outdoor sem perder qualidade.

Também é muito usado em animações, já que certos desenhos podem precisar de zoom para simular o movimento de câmera.

Imagens bitmap muito grandes possuem muitos pixels, o que significa que o arquivo será mais pesado. Já imagens vetoriais, o tamanho da imagem não necessariamente influenciará no tamanho do arquivo, pois um círculo, independente de seu tamanho, é representado pela mesma fórmula matemática.

Exatamente pelo mesmo motivo, se tivermos uma imagem pequena com muitas formas, a imagem bitmap será mais leve. Isso porque a imagem vetorial precisará das fórmulas matemáticas para definir cada forma, independentemente do tamanho da imagem, enquanto a imagem bitmap só precisa indicar a posição de cada pixel. Se a imagem for pequena, a imagem em bitmap terá menos pixels, tornando o arquivo mais leve.

Uma vantagem do bitmap, como dito antes, é possibilitar um maior nível de detalhamento. Não teria como fazer fotografias vetoriais. Só o cabelo de uma pessoa possui muitos detalhes por se tratar de vários fios, cada detalhe de luz e sombra, etc.

A imagem abaixo é outro exemplo. Poderíamos refazer essa ilustração com uma imagem vetorial, mas não conseguiríamos reproduzir os detalhes das nuvens, da grama, das montanhas, etc.

Kirby - Green Greens

Então, não há o tipo melhor. Cada formato será melhor dependendo da sua necessidade.

Efeito Parallax apenas com CSS

Olá, Web Developers!

Hoje veremos como criar um efeito Parallax de maneira bem simples e sem usar JavaScript conforme o usuário for rolando a página.

O que é Parallax?

Parallax é o nome dado ao efeito de diferentes objetos parecerem estar em diferentes posições ou direções quando observados em diferentes posições.

Isso é muito comum em nosso cotidiano, e amplamente usado em jogos 2D para dar uma ideia de profundidade.

Parallax Game Scrolling

Veja na imagem acima que o fundo se move mais lentamente em relação aos objetos que estão mais “próximos” do jogador, dando a ilusão de profundidade.

Esse efeito também é usado no desenvolvimento web para dar ideia de profundidade. É comum vermos bibliotecas JavaScript que fazem este trabalho, mas nós veremos como é simples de se fazer com apenas CSS sem muito esforço.

Para já ver o resultado, clique aqui.

A Estrutura

A nossa estrutura será bem simples:

<main class="wrapper">
  <section class="section">
    <p class="text" >TreinaWeb</p>
  </section>
  <section class="section">
    <p class="text" >Parallax</p>
  </section>
  <section class="section">
    <p class="text" >CSS</p>
  </section>
</main>

Primeiro precisamos de um elemento que será o container de tudo, e vamos dar a ele a classe wrapper.

Os sites que normalmente fazem uso desse efeito possuem uma seção embaixo da outra. Então vamos criar três <section> com a classe section.

Dentro de cada seção você coloca o conteúdo que quiser. Aqui iremos colocar um simples parágrafo com um texto, e daremos a classe text. Esse elemento é só o conteúdo, então você pode colocar qualquer coisa e estilizar como quiser.

A Estilização

Como vimos, a ideia do Parallax é ter camadas diferentes que se movimentam em diferentes velocidades.

Para esse efeito, faremos uso da propriedade transform e perspective.

/* Esse código é só para tirar as margens */
body,html{margin:0;padding:0;}

.wrapper {
  /* O elemento precisa ter uma altura definida para o efeito
  funcionar.
     100vh significa 100% da altura da view.
  */
  height: 100vh;

  /* O tamanho das imagens irá criar uma barra de rolagem 
  horizontal. Iremos desativar isso */
  overflow-x: hidden;

  /* A propriedade perspective indica a "distância" entre o 
  usuário e o plano Z.
  Quanto maior o valor, mais perto o elemento estará do usuário.
  Se for um valor negativo,
  mais distante esse elemento estará.
  */
  perspective: 2px;

  /* O transform-style indica se os elementos filhos devem ser 
  transformados em um plano 2D ou 3D.
  O valor preserve-3d indica que os elementos devem seguir o 
  espaço 3D indicado.
  */
  transform-style: preserve-3d;
}

.section {
  /* Indicamos "relative" para depois podermos
  posicionar os elementos filhos com "absolute" */
  position: relative;

  /* Indicamos uma altura para a nossa seção. O valor não 
  importa muito.
  Para garantir um bom efeito, coloquei também uma altura 
  mínima de 700px;
  */
  height: 100vh;
  min-height: 700px;

  /* Para manter a transformação em espaço 3D, indicamos o mesmo 
  valor do elemento pai (preserve-3d).
  Para não precisar repetir o valor "preserve-3d", você pode usar 
  o valor "inherit", que fará
  com que ele pegue o valor do elemento pai.
  */
  transform-style: inherit; 
}

.section::before {
  /* Aqui nós iremos configurar a imagem que irá aparecer no fundo
  da seção.
  Como vimos, o Parallax precisa de elementos diferentes, então 
  não daria certo se colocássemos o fundo diretamente na 
  <section>. Então criaremos um pseudo-elemento para isso.
  */

  /* Isso servirá para que o pseudo-elemento possua as mesmas
  dimensões do elemento <section> */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* O z-index negativo irá garantir que a imagem não fique por 
  cima de outros elementos */ 
  z-index: -1;

  /* Aqui estamos fazendo com que a imagem de fundo cubra todo o
  elemento */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  /* Aqui está a brincadeira. Lembra que o nosso "wrapper" está
  mais próximo do usuário?
  Aqui nós faremos com que o nosso pseudo-elemento, que está com
  a imagem de fundo, fique mais longe do usuário. Para isso, 
  basta passar um valor negativo para "translateZ()".

  Como a imagem irá para longe do usuário, ela parecerá menor. 
  Então usamos o "scale()" para aumentar o tamanho da imagem.

  Como o elemento estará mais longe do usuário, ele irá se mover
  mais lentamente do que os elementos mais próximos conforme 
  a gente role a página.
  */
  transform: translateZ(-1px) scale(1.5);
}

.text{
  /* Essa classe, como dito antes, é só para o nosso conteúdo.
  Sinta-se livre para criar o que quiser.
  */
  position: absolute;
  top: 25%;
  width: 100%;
  padding: 20px 0;
  background-color: rgba(255, 255, 255,0.5);

  color: white;
  text-shadow: 0 0 5px #000;
  font-size: 20px;
  text-align: center;
}

/* Em nosso pseudo-elemento, configuramos a imagem de fundo,
mas não indicamos qual será a imagem.
  Isso nos permite poder criar outras classes para indicar 
  uma imagem diferente para cada <section>.
*/
.bg1::before {
  background-image: url('https://i.imgur.com/6yuYHKv.jpg');
}

.bg2::before {
  background-image: url('https://i.imgur.com/W0Wot0k.jpg');
}

.bg3::before {
  background-image: url('https://i.imgur.com/DAerHqR.jpg');
}

Agora basta colocar as classes .bg1, .bg2 e .bg3 em nossas sections:

<main class="wrapper">
  <section class="section bg1">
    <p class="text" >TreinaWeb</p>
  </section>
  <section class="section bg2">
    <p class="text" >Parallax</p>
  </section>
  <section class="section bg3">
    <p class="text" >CSS</p>
  </section>
</main>

Para ver todo o código em ação, acesse: clique aqui.

O problema do iPhone X e a Web

Olá, Web Developers!

Estamos cada vez mais próximos do lançamento oficial do iPhone X, e já apareceu um problema que pode ocorrer no layout de muitos sites.

Selenium - Testes Automatizados com TestNG
Curso de Selenium - Testes Automatizados com TestNG
CONHEÇA O CURSO

Há algum tempo, empresas como Samsung, vêm investindo na ideia de fazer com que seus smartphones possuam uma tela mais ampla e, para isso, veio a ideia de remover o botão home físico da parte da frente.

A Apple seguiu a ideia. Porém, ela decidiu ir além, deixando a tela ainda mais expandida, cobrindo quase toda a parte frontal, exceto pelo espaço ocupado pela câmera, como podemos ver na imagem abaixo:


(Jogo sendo executado em um iPhone X)

Isso pode resultar em situações um pouco estranhas ao navegar pela web. Quando o iPhone está na vertical, não há problemas, mas, quando se está com ele na horizontal, para poder acomodar bem as páginas web e evitar que o espaço da câmera cubra algum conteúdo (como o jogo mostrado acima), é criada uma “área de segurança”.

Em muitos sites isso pode resultar em bordas brancas indesejadas, como o exemplo abaixo:

Há pessoas que já reclamaram, dizendo: “Steve Jobs nunca deixaria isso acontecer”. Sendo verdade ou não, é uma realidade.

Temos duas formas de arrumar isso. Veremos abaixo.

Com background-color

Caso a sua página tenha uma única cor como fundo, a solução é a mais simples de todas. Há pessoas que criam um container para a aplicação e inserem a cor de fundo nele. Para resolver o problema, simplesmente coloque a cor de fundo na propriedade background-color da tag <body>.

A sua página vai continuar com as bordas laterais, mas agora ela terá uma cor igual ao do fundo da página, que a tornará imperceptível para o usuário.

Porém, se sua página possui vários fundos, isso não irá resolver. Na home do site do TreinaWeb temos cores diferentes, então, colocar uma só cor no fundo não é uma opção.

Com viewport-fit

Caso você tenha vários fundos, ou uma imagem/vídeo como fundo, ou se ainda quiser ter mais controle do layout, background-color não irá te ajudar.

Neste caso, podemos aproveitar o viewport-fit:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">  

Isso fará com que sua página ocupe toda a área da tela do dispositivo:

Isso fará com que parte da sua página passe por baixo da área da câmera, mas agora você tem mais controle e pode definir margens para o seu conteúdo ser exibido corretamente.

As constantes safe-area-inset-*

O Safari do iOS 11 também inclui algumas constantes que podem ser usadas quando usamos o viewport-fit=cover.

  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-bottom
  • safe-area-inset-left

Essas constantes podem ser usadas nas propriedades CSS margin, padding e top, left, right e bottom quando a posição do elemento for position: absolute.

.my-container{
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);  
}

Por que devo dar atenção a isso?

Muitos desenvolvedores pensam nesses ajustes como as antigas “gambiarras” que tínhamos que fazer para que um layout moderno funcionasse em versões específicas do Internet Explorer, usando variáveis e funcionalidades específicas de um único navegador.

Porém, também devemos pensar que haverá usuários com esses dispositivos e eles não culparão o aparelho. Eles irão pensar: “há algo errado com esta página”.

Alguns desenvolvedores estão até aproveitando para brincar com o espaço ocupado pela câmera:

PhoneGap - Apache Cordova Mobile Framework
Curso de PhoneGap - Apache Cordova Mobile Framework
CONHEÇA O CURSO

Você sabe como combinar cores?

Olá, Web Developers!

Vamos falar de um assunto que assusta muitos programadores: combinação de cores. Alguns até “fogem” quando o assunto é criatividade, quando falamos da criação de um layout ou simplesmente quando se tem a necessidade de pensar em combinar cores.

Eu já vi casos em que o próprio programador teve que planejar o esquema de cores. Naturalmente o pessoal de front-end costuma ter uma noção melhor em relação aos de back-end nessa matéria, por terem mais contato com designers e arquitetos de informação.

Muitos acham que isso vem de um dom, uma habilidade especial quase que mutante nas pessoas que trabalham com isso. Mas acredite: qualquer coisa pode ser aprendida, e listarei aqui as técnicas utilizadas para se combinar cores. Depois disso você verá que é muito fácil.

Android - Utilizando Material Design nas aplicações
Curso de Android - Utilizando Material Design nas aplicações
CONHEÇA O CURSO

Roda de cores

Roda de cores

Esta é a roda de cores ou círculo cromático, e vocês agora serão amigos! Ela é quem vai te ajudar a saber se uma cor combina com outra ou não.

Agora, tudo o que precisamos para selecionar cores é de certas formas geométricas. Sim, nós veremos como a matemática está relacionada com a harmonia na combinação das cores.

Há várias formas de se combinar cores, e tudo vai depender do que você precisa. Então vamos lá!

Monocromáticas

Roda de Cores

Essa é a mais fácil, pois a gente apenas seleciona uma única cor e alteramos seus tons. Mesmo sendo a regra mais fácil, é uma das mais difíceis de se trabalhar. Como é uma única cor, se não utilizada corretamente pode acabar cansando facilmente.

Por isso é mais recomendada para telas passageiras.

Roda de Cores

Análogas

Roda de Cores

São selecionadas três cores, uma ao lado da outra. Possui pouco contraste, já que são cores muito próximas. Podemos selecionar quatro cores, e então chamaremos de análogas compostas.

As cores análogas são frequentemente encontradas na natureza, o que nos passa uma sensação de harmonia quando encontramos sites com cores baseadas nessa regra.

Roda de Cores

Complementares

Roda de Cores

Cores complementares são aquelas que estão de lados opostos. Por causa disso, causam um grande contraste, já que teremos uma cor quente e uma fria.

Roda de Cores

Tríades ou trio harmônico

Roda de Cores

São cores que formam um triângulo equilátero. Você também pode utilizar outros tipos de triângulos e até mesmo retângulos, mas aí já deixa de se chamar tríade.

As cores dessa regra possuem uma harmonia bem contrastante e é sempre recomendado dar destaque a apenas uma das cores selecionadas, mantendo as demais apenas como cores secundárias.

Roda de Cores

Concluindo

Vimos então que há técnicas para se combinar cores. Não pense que é um dom que apenas algumas pessoas possuem.

Os exemplos mostrados apenas ilustram a combinação das cores. Na maioria das vezes as cores selecionadas serão usadas apenas como referência, como você pode notar nas fotos de exemplos. Apenas selecionamos as cores, mas as utilizadas possuem variações na saturação, matiz e sombra.

Há muitas outras formas de se combinar cores. As listadas acima são as mais comuns. E, claro, é importante também saber a teoria das cores para não sair criando paletas de cores que não fazem sentido para determinado cenário, por exemplo: uma festa infantil só com tons de cinza ou uma casa de repouso com vermelhos bem vivos.

Caso queira criar combinações, recomendo o Adobe Color.

Ele roda no navegador e não precisa de login. Lá você poderá escolher a regra de cores entre Análogo, Monocromático, Tríade, Complementar, Composto, Sombras e Personalizado.

Também há a possibilidade de você salvar a sua paleta de cores e navegar pelas criadas pelos outros usuários. Outra funcionalidade legal é a criação de uma paleta a partir de uma imagem.

E aí, o que achou? Já sabia combinar cores? Se não sabia, achou fácil? Compartilhe com a gente aí nos comentários!

Godot - Aprenda a criar jogos estilo
Curso de Godot - Aprenda a criar jogos estilo "Flappy Bird", para Android e iOS
CONHEÇA O CURSO