Design

Como fazer animação infinita de fundo com CSS?

Olá Web Developer. Hoje veremos como criar uma animação infinita de fundo com CSS puro. Por ser infinita teremos que saber como cuidar para que o usuário não perceba quando a animação for reiniciada.

Animações CSS assim são ótimas, pois você tem controle programaticamente e são bem mais leves do que imagens ou vídeos. Obviamente que você pode colocar imagens nesta técnica, mas neste exemplo veremos como fazer sem nem precisar de imagens.

Esta técnica foi usada para as estrelas que aparecem de fundo ao finalizar um curso da TreinaWeb.

Tela do painel da TreinaWeb ao concluir um curso

Prévia do resultado:

Criando o Fundo do Céu

Para criar o céu vamos simplesmente criar uma <div>. Ela será um contêiner para que a gente coloque dentro os elementos que serão animados.

<div class="container" >

</div>

Em seguida vamos estilizar este elemento. Com o intuito de termos um exemplo mais simples, vou definir uma largura e altura para ele. Dessa forma nossa animação será menor, então não vamos precisar desenhar tantas estrelas para ter um bom efeito. Mas é claro que você pode fazer do tamanho que quiser.

Também vou adicionar um gradiente como fundo para simular a cor do céu. Teste com outras cores e outras formas de gradiente. Um gerador de gradientes muito bacana é o https://cssgradient.io/.

.container{
  width: 350px;
  height: 150px;
  background: linear-gradient(0, #120c56, #000000);
}

A primeira estrela no céu

Logo após a criação do céu vem a parte onde iniciaremos nossas estrelas. Você verá como é simples criá-las sem utilizar nenhuma imagem e sem lotar nosso HTML com tags. Basicamente iremos adicionar uma única <div>, que também vamos adicionar a classe stars.

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

Pode ser difícil de acreditar no começo, mas este é basicamente todo o HTML que precisamos. Então vamos estilizar o novo elemento para a criação das estrelas.

.stars{
    width: 3px;
    height: 3px;
    border-radius: 50%;
}

O que fizemos aqui é muito simples: deixamos a nossa <div> com 3px de largura e altura, e utilizamos o border-radius para que ela fique arredondada, resultando em uma bolinha que será nossa estrela. Mas dessa forma nós não vamos enxergar nada no momento, porque ela não tem cor, é invisível.

É exatamente agora que entra o segredinho para criar várias estrelas com uma única <div>! A propriedade box-shadow nos permite criar várias sombras do elemento em qualquer posição e em qualquer cor. Então podemos utilizar essa propriedade para criar “clones” do nosso elemento na cor que quisermos.

.stars{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    box-shadow: 50px 30px white,
    100px 80px white,
    80px 120px white,
    300px 20px white,
    250px 130px white,
    200px 50px white,
    150px 100px white,
    320px 100px white;
}

Cada sombra deve ser separada por vírgula. O primeiro valor é a posição horizontal, a segunda é a vertical e a terceira é a cor. Já que o nosso céu possui a dimensão de 350×150, atente-se para não criar as sombras fora do céu, ou elas não vão aparecer.

O tamanho das sombras sempre será do mesmo tamanho do elemento. Como criamos um elemento de 3px X 3px, este será o tamanho de todas as sombras.

É provável que você ache esta etapa bem cansativa e repetitiva. O melhor para criar as sombras é utilizar algum pré-processador de CSS como o Sass para automatizar isso. Por consequência bastará criar uma função para gerar as sombras, onde você pode passar as configurações de tamanho, cor, quantidade, posições e mandar ele gerar as posições aleatoriamente.

CSS - Sass
Curso de CSS - Sass
CONHEÇA O CURSO

Animando as Estrelas

Vamos iniciar a animação das nossas estrelas.

@keyframes anim-stars {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-150px);
    }
}

Basicamente criamos uma animação que fará o valor de transform ir de translateY(0px) para translateY(-150px). Isso significa que o elemento que animarmos com isso irá subir 150px. Este é exatamente o valor da altura do nosso contêiner, e você já vai entender o motivo disso.

Para que a gente tenha a animação funcionando, vamos adicioná-la ao nosso elemento das estrelas.

.stars{
    ...
    animation: anim-stars 10s linear infinite;
}

Estamos chamando a nossa animação, ajustando-a para durar 10 segundos com uma velocidade constante (linear) e que vai repetir infinitamente (infinite).

O único problema com essa animação é que rapidamente percebemos onde acabam as estrelas e quando a animação é reiniciada. A fim de arrumar isso teremos o passo final.

Deixando a animação infinita

Para dar a ideia de animação infinita não podemos deixar as pessoas perceberem quando a animação é reiniciada. Para que a gente consiga esse resultado vamos precisar de uma cópia exata de nossas estrelas e posicioná-las mais abaixo das estrelas originais.

No momento em que as estrelas originais acabarem, a nossa cópia já vai entrar em cena, parecendo uma continuação. Caso ainda esteja um pouco confuso, vamos ver como vai ficar e você logo vai entender.

Com o intuito de ter uma cópia das nossas estrelas sem precisar criar outra <div>, vamos utilizar o pseudo-elemento ::after. Para que ele apareça mas sem conteúdo, vamos utilizar a propriedade content com o valor " ". Para deixá-lo de maneira idêntica à nossa <div>, vamos copiar todas as propriedades dela. Apenas vamos ignorar a propriedade animation. Isso porque o pseudo-elemento já será animado junto com a <div>.

.stars::after{
  content: " ";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  box-shadow: 50px 30px white,
    100px 80px white,
    80px 120px white,
    300px 20px white,
    250px 130px white,
    200px 50px white,
    150px 100px white,
    320px 100px white;
}

Dessa maneira nós teremos um pseudo-elemento com estrelas (sombras) nas exatas posições das estrelas que criamos anteriormente. Para termos essas estrelas mais abaixo vamos mudar sua posição. O primeiro passo para isso é colocar um position: relative na nossa <div>.

.stars{
    position: relative;
    width: 3px;
    height: 3px;
    ...
}

E agora no nosso pseudo-elemento vamos colocar um position: absolute para podermos movê-lo em relação à posição da <div>. Vamos colocar um top: 150px para que ele vá 150px para baixo. Este valor é por causa da altura do nosso céu.

.stars::after{
  content: " ";
  position: absolute;
  top: 150px;
  width: 3px;
  ...
}

Desse modo nós já teremos o resultado esperado. Lembre-se que a animação inteira possui 10 segundos. Você pode ficar o tempo que quiser e verá que a animação continua rodando sem parar e sem deixar claro quando ela foi reiniciada.

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

Entendendo a Animação Infinita de Fundo

Para entender melhor como esse efeito funciona eu pintei as estrelas do pseudo-elemento de outra cor.

Veja que logo que as estrelas brancas (que são da nossa <div>) sobem, as estrelas do nosso pseudo-elemento já sobem juntas. Isso faz com que a gente não perceba onde termina e onde começa a animação.

O verdadeiro fim da animação é quando toda a nossa <div> sai de cena. Neste momento o nosso pseudo-elemento irá tomar exatamente a posição inicial da nossa <div>. Como a animação acaba nesse exato momento, ela é reiniciada. Dessa forma, a <div> volta para sua posição inicial, que era onde o pseudo-elemento estava.

Já que o pseudo-elemento e a <div> são idênticos, não há como percebermos que houve essa troca entre eles, o que disfarça a reinicialização da animação.

Você também pode ter notado agora que as estrelas estão aparecendo fora do céu. Isso foi apenas para mostrar como a animação funciona. Para evitar isso basta adicionar overflow: hidden na classe .container e as estrelas que estiverem fora não serão exibidas.

Melhorando a animação com Parallax

Parallax é um efeito utilizado para passar a ideia de profundidade. Já ensinei a fazer o efeito parallax aqui no blog utilizando apenas CSS.

Para fazer isso no nosso céu basta colocarmos uma nova <div> para termos uma nova camada de estrelas.

<div class="container" >
    <div class="stars" ></div>
    <div class="stars2" ></div>
</div>

Por fim iremos criar as estrelas no CSS da mesma forma. Para dar uma ideia de que são estrelas mais ao fundo, agora farei estrelas menores. Podemos reutilizar a animação, mas agora também farei uma pequena modificação: vou passar o tempo de 10 segundos para 20 segundos. Com as duas animações em tempos e tamanhos diferentes teremos o efeito de profundidade.

.stars2{
  position: relative;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  box-shadow: 15px 15px white,
    125px 35px white,
    50px 80px white,
    10px 120px white,
    275px 90px white,
    230px 10px white,
    120px 130px white,
    300px 130px white,
    220px 115px white;
  animation: anim-stars 20s linear infinite;
}

.stars2::after{
  content: " ";
  position: absolute;
  top: 150px;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  box-shadow: 15px 15px white,
    125px 35px white,
    50px 80px white,
    10px 120px white,
    275px 90px white,
    230px 10px white,
    120px 130px white,
    300px 130px white,
    220px 115px white;
}

Desenvolvedor Front-end Sênior
Formação: Desenvolvedor Front-end Sê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 aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

O que é Design Thinking?

Hoje em dia é essencial que as empresas pensem em inovações para seus produtos e serviços, a fim de levar melhores experiências para os usuários. Essas inovações são capazes de gerar vantagens competitivas, algo essencial para a sustentabilidade das empresas. Com isso, uma abordagem que muitas empresas vem adotando é o Design Thinking, que as ajudam com caminhos que levam a soluções inovadoras para os negócios.

Mas, o que vem a ser exatamente o Design Thinking?

Design Thinking é uma metodologia criativa que surgiu dentro do design, sendo uma forma de pensar que ajuda a resolver problemas de todos os tipos. O Design Thinking ajuda na imersão e no entendimento de parâmetros e padrões essenciais para criar projetos de melhor qualidade, sendo uma combinação de mindset com plano de ação.

Apesar de ter surgido dentro do design, o Design Thinking pode – e deve – ser aplicado para muitas outras coisas, como por exemplo, para pensar em soluções para clientes, para desenvolver novas ferramentas, tecnologias e até marcas, o propósito é produzir inovações. Alguns exemplos bem conhecidos de empresas que fazem uso do Design Thinking são a Apple e Nike.

Apesar do nome, o Design Thinking vai muito além da estética, ele sempre está em busca de soluções práticas e criativas para resolver problemas. Devemos olhar o ser humano com olhar de negócio, verificando o que é possível fazer visando o ponto de vista da tecnologia.

De forma sucinta, podemos dizer que o Design Thinking é uma junção do pensamento criativo e corporativo, para identificar as melhores opções de um produto ou serviço de forma que ele traga benefícios e vantagens em todas as suas características, tornando as experiências mais eficazes, combinando desejos e necessidades do público.

Etapas do Design Thinking

O conceito de Design Thinking tem algumas premissas básicas, que tem como base a empatia, colaboração e experimentação.

  • Empatia
    É necessário entender o público, para quem você está criando essa solução. Entender quais são seus comportamentos, gostos e ainda, se possível, interaja com eles usando entrevistas, formulários, etc.

  • Definição
    Para poder dar soluções a um problema, é necessário ter o máximo de informações sobre ele. Foque na visão sobre como lidar com as pessoas e em como você deseja fazer a diferença de quem vai utilizar a solução. Aqui você pode pensar em ideias inovadoras, coletar opiniões, a fim de explorar novas áreas.

  • Ideação
    Aqui podemos criar o brainstorming, onde podemos ter diversas ideias, pensar em múltiplas soluções, a fim de testar e achar novos caminhos até por fim, realizar o protótipo.

  • Protótipo
    O protótipo é a melhor forma de visualizarmos as ideias de um modo mais físico, pois as pessoas acabam podendo interagir com ele, inspirando novas ideias, melhorias, ver os erros e acertos. A ideia do protótipo é você ir evoluindo, o máximo possível até chegar em uma solução final. Caso um protótipo não tenha dado muito certo, você pode testar mais ideias.

  • Teste
    É importante realizar testes para ver como o usuário lida com o produto/serviço a fim de obter feedbacks. Fazendo o teste com usuários você tem um resultado mais preciso, verificando as interações que esse usuário tem e se a funcionalidade do seu protótipo está condizente com o esperado. Não menos importante, deve-se observar absolutamente tudo enquanto o teste é realizado.

Se você se interessou pela abordagem do Design Thinking e gostaria de se aprofundar, temos um curso que aprofunda ainda mais em como desenvolver uma ideia, como testá-las e até um workshop de cocriação:

Design  Thinking
Curso de Design Thinking
CONHEÇA O CURSO

Te esperamos lá 🙂

Web Designer x Web Developer: quais as diferenças?

Muitos iniciantes da área de tecnologia ficam em dúvida de qual carreira seguir, no que devem focar… afinal são diversas opções. Dentre essas opções estão as carreiras de Web Designer e Web Developer. Por serem áreas que se complementam, muitas pessoas acabam confundindo elas e principalmente sobre o que cada profissional realmente faz. Essas são dúvidas principalmente de quem quer ingressar na área de desenvolvimento web e é o que vamos abordar neste artigo.

Web Designer

Web designer é o responsável pelo design – o visual – da aplicação. Esse profissional deve dominar conceitos de design, usabilidade (UX e UI), identidade visual e design de interfaces, além de ferramentas de edição visual, como o Photoshop, Illustrator e Sketch App, por exemplo, pois são através dessas ferramentas que ele irá desenvolver a parte visual da aplicação.

Mas, para ser um Web Designer eu preciso saber programar? Não necessariamente. O foco do web designer é focar totalmente no design, como o próprio nome diz é um design só que mais focado para web. Ele também deve saber HTML e CSS, mas essas não são consideradas linguagens de programação. Alguns profissionais de Web Designer acabam aprendendo JavaScript, mas não é uma obrigatoriedade, pois ele não precisará mexer com o código da aplicação de fato.

O Web Designer deve fazer o planejamento, a criação de toda a aparência da aplicação e a manutenção de interfaces digitais, tudo isso considerando aspectos importantes do design. É essencial que os designers criem algo atraente, para gerar uma boa experiência do usuário.

Depois do Web Designer fazer seu trabalho teremos um layout, porém um layout é algo estático, não tem funcionalidade nenhuma, nenhum usuário conseguirá ter alguma interação com a aplicação. Sendo assim, para que ele se torne algo utilizável, com ações pelo usuário, precisamos utilizar tecnologias onde através de sua implementação com códigos, podemos torná-lo acessível para os usuários. O profissional de Web Designer entrega o projeto cheio de recursos visuais aos desenvolvedores para codificação.

Web developer

O Web Developer é quem realmente coloca a mão no código. Ele cuida da codificação onde tornará possível que a interface gráfica (que vimos acima) seja acessada e utilizada. Geralmente são profissionais com a parte lógica mais aguçada e esses sim devem possuir habilidades em programação.

Um ponto importante de ressaltar aqui é que o Web Developer pode ser dividido em dois tipos: front-end e back-end. De maneira sucinta, os desenvolvedores front-end se concentram na parte que o usuário vê, como as interações por exemplo, fazendo com que a experiência do usuário naquela aplicação seja positiva. Já o desenvolvedor back-end está mais para a “parte de trás” do site, aquilo que não vemos, como a configuração de servidores e banco de dados. O papel do back-end também é importantíssimo para o funcionamento da aplicação. Na verdade, o Web Designer e o Web Developer (desenvolvedores front-end e back-end) se complementam a fim de entregar um bom resultado aos usuários finais.

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

No final, o que acaba fazendo muita confusão é um profissional acabar fazendo ambos os papéis. Pode acontecer do próprio web developer ter que pensar no design e planejar a aplicação. Como também pode acontecer de um web designer acabar aprendendo a programar também, fazendo com que ele mesmo siga os próximos passos ao invés de passar para um programador. Neste caso, seria um acúmulo de funções, pois vimos quais tarefas pertenceriam a cada profissional.

Agora que você já sabe a diferença entre Web Designer e Web Developer, mas quer conhecer melhor o que um front-end e um back-end faz, temos um artigo específico disso em nosso blog.

Até a próxima! =)

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.

Webpack - Empacotando aplicações
Curso de Webpack - Empacotando aplicações
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:

React Native - Firebase Messaging
Curso de React Native - Firebase Messaging
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.

React Native - Firebase Messaging
Curso de React Native - Firebase Messaging
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!

Swift - Criação de aplicações móveis para IOS Básico
Curso de Swift - Criação de aplicações móveis para IOS Básico
CONHEÇA O CURSO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200