CSS

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.

HTML5 e CSS3 - Desenvolvimento web Avançado
Curso de HTML5 e CSS3 - Desenvolvimento web Avançado
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 - Dominando Componentes
Curso de React - Dominando Componentes
CONHEÇA O CURSO

Vantagens e desvantagens de labels flutuantes em formulários

Olá, Web Developers!

Há um bom tempo que temos visto formulários com labels flutuantes em vários lugares. A ideia era de trazer algo diferente e melhorar a experiência do usuário. Será que melhorou mesmo?

UX/UI - Introdução
Curso de UX/UI - Introdução
CONHEÇA O CURSO

Nesse artigo eu vou listar as vantagens e as desvantagens que considero pertinentes.

Vantagens

Algumas das vantagens de utilizá-los:

Os formulários ficam menores:

Nós enxergamos os elementos no navegador por blocos.
Na imagem abaixo, enxergamos quatro blocos: dois labels e dois inputs.

Já na imagem abaixo, percebemos apenas dois blocos. Isso passa a impressão de um formulário menor.

Já foram realizados testes com esses estilos de formulários e, no segundo estilo, os usuários realmente pensaram estar preenchendo um formulário com metade do número de campos.

Sem problemas com alinhamento:

Essa não é uma vantagem tão grande. Qualquer CSS bem feito resolve.

Mas, realmente, não precisamos ficar nos preocupando com o alinhamento dos elementos e labels, o que já dá uma pequena facilitada.

Separação entre campos:

Quando temos campos como os da imagem abaixo, precisamos dar um espaço em branco ou separar com uma linha para que o usuário saiba qual campo determinado label pertence.

Nesta imagem sabemos que senha pertence ao campo de baixo porque temos apenas dois campos. Agora, já imaginou um formulário maior? É preciso deixar um espaço bom para podermos perceber melhor a separação e agrupamento de elementos.

Já na imagem abaixo, não precisamos nos preocupar com separação e agrupamento. Mesmo que a gente diminua os espaços entre os inputs, saberemos qual input cada label pertence.

Leitura mais rápida:

Como o label estará dentro dos inputs, e também poderemos diminuir os espaços em branco, como visto no item anterior, a leitura será mais rápida. Isso porque os olhos do usuário precisam passar pelas linhas em branco e pensar na ligação entre elementos quando eles estão separados.

Desvantagens

Agora eu listarei algumas desvantagens.

Nada de labels compridos!

Você tem que pensar bem no que escrever no label para que ele seja bem curto e direto. Do contrário, seu texto pode acabar sendo cortado em dispositivos com telas menores.

No exemplo acima, ao invés de Há quanto tempo trabalha com desenvolvimento?, poderíamos escrever algo como Tempo de experiência, mas nem sempre vamos conseguir deixar claro o que queremos.

Campos preenchidos podem dificultar a leitura:

Quando preenchemos um campo, o label diminui de tamanho, dando espaço ao valor preenchido.

Dependendo do novo tamanho da fonte do label, pode dificultar a leitura, caso o usuário queira revisar os campos do formulário. Lembre-se que podemos ter usuário com problemas de visão usando dispositivos com telas pequenas.

Desenvolvedor PHP Júnior
Formação: Desenvolvedor PHP Júnior
Nesta formação você aprenderá todos os fundamentos necessário para iniciar do modo correto com a linguagem PHP, uma das mais utilizadas no mercado. Além dos conceitos de base, você também conhecerá as características e a sintaxe da linguagem de forma prática.
CONHEÇA A FORMAÇÃO

Labels dentro do input podem ser confundidos com campos preenchidos:

Sim, isso é um problema que também pode acontecer com placeholders. O usuário pode simplesmente passar o olho e pensar que aquele campo já está preenchido.

Mesmo que a gente os deixe com uma cor diferente, é sempre bom considerar essa possibilidade, ademais, diferentes usuários, diferentes formas de visualizar e entender o contexto.

Sem consistência de localização:

Não temos uma consistência de localização dos labels quando precisamos de campos que não sejam de texto, como combo boxes, radio buttons e checkboxes.

Concluindo

E você? Usa em seus formulários? É a favor ou contra?
Compartilhe com a gente aí nos comentários! 🙂

Aprenda a formatar as mensagens do console do navegador

Olá, Web Developers!

Muitos aqui sabem que os navegadores possuem console e que podemos executar o comando console.log() para imprimir mensagens e objetos, o que nos ajuda muito na hora de fazer debug.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Porém, quando entramos em sites como, por exemplo, o Facebook e abrimos o console, podemos ver a seguinte mensagem:

Facebook Console

Muitas pessoas não sabem, mas as mensagens do console podem ser estilizadas em alguns navegadores. Para o exemplo a seguir, abra o console em seu computador e clique na aba Result:

Você terá o seguinte resultado:

Console JavaScript - Formatação de Cores

Para poder estilizar as mensagens do console, basta colocar %c junto ao texto que você está passando para o comando console.log() (ou qualquer outra função que imprima algo no console, como console.warn()). Em seguida, basta passar a estilização como um segundo parâmetro. Ela é feita via CSS mesmo:

console.log('%c Meu Texto','color: white; background-color: red;');

Mas, já que estamos falando de CSS, que tal também imprimir uma imagem?

No console, execute o seguinte comando:

console.log('%c', 'padding: 40px 45px;line-height:100px;background:url("http://i65.tinypic.com/dnixjm.png") no-repeat;background-size: cover;');

Você terá o seguinte resultado:
Console com Imagem

Ok, mas o console é mais para debug. Por que eu usaria isso?

Um cenário é quando a sua equipe usa muito o console para monitorar algo durante o desenvolvimento e deixa várias mensagens sendo impressas. Poder formatá-las, colocar imagens, etc, pode ajudar a deixá-lo mais organizado, facilitando a leitura dos conteúdos impressos. Mas há de se ter cautela, pois muitas mensagens sendo impressas com o console aberto podem afetar a performance da sua página e isso vai te atrapalhar no processo de desenvolvimento.

Um ótimo caso é fazer algo parecido com o Facebook. Se há possibilidade dos seus usuários abrirem o console para tentar algo, você pode chamar a atenção deles avisando que eles mesmos podem estar correndo algum tipo de risco.

O terceiro motivo é quando a intenção é exatamente fazer com que o usuário abra o console para usá-lo. Quando você entra no site da biblioteca RxJS e abre o console, você é recebido com uma simples mensagem dizendo que você pode experimentar os códigos da biblioteca diretamente por ele. Nesse caso, você poderia receber o usuário com o logo do seu projeto e uma mensagem com uma formatação simples (se o navegador dele suportar).

RxJS Console

E aí, o que achou? Já usou essa funcionalidade? Compartilhe com a gente aí nos comentários!

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

ITCSS – Organizando melhor o CSS

Olá, Web Developers!

Quem já não teve problemas com a organização do CSS?
Ou tentou estilizar um elemento e não funcionou porque já havia uma regra CSS com uma força maior e, no final, teve que criar um seletor mais específico para poder sobrescrever?

Tenho certeza que alguns aqui chegam ao momento em que não tem outra saída a não ser utilizar o !important.

Bom, o ITCSS foi pensado para essas coisas. Ele já existe há algum tempo, mas ainda é pouco conhecido. Eu o utilizo em meus projetos desde 2014 e sempre me ajudou muito com a organização do CSS.

Ele não é uma biblioteca, framework e nem metodologia como BEM, DRY, OOCSS, etc, que nos indica como montar nossas classes e como nomeá-las. Ele é apenas uma estrutura que, se seguirmos, teremos nossos códigos mais organizados. Podemos inclusive utilizar junto com BEM, DRY, SMACSS, OOCSS, etc.

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

Como Funciona?

O ITCSS, na verdade, é proprietário em sua maioria. Então, apenas uma certa quantidade de regras foram reveladas pelo seu criador. Mas o que foi revelado já é muito útil para nossos projetos.

O CSS trabalha com a ideia de que, quanto mais específico for o seletor, maior a sua força. O seletor com mais força sobrescreve o seletor mais fraco.

O ITCSS segue isso baseado na ideia do Triângulo Invertido. Quanto mais acima do triângulo você estiver, mais fraco será o seletor. Os seletores presentes em uma camada sempre sobrescrevem os seletores da camada de cima.

Cada camada serve para colocarmos um tipo específico de código.

1). Settings

É onde declaramos as configurações do nosso projeto, como variáveis de medidas, cores, etc.

$my-color: #0057FB;
$footer-height: 120px;

2). Tools

Onde colocamos funções, mixins, placeholders, etc. Se não estiver utilizando pré-processadores como Sass ou Less, essa camada não precisa existir.

@mixin  my-box(){
   width: 200px;
   height: 100px;
}

3). Generic

Camada para colocarmos seletores com a menor especificidade. Por isso é normalmente usado para quando queremos usar o seletor *.

*{
   box-sizing: border-box;
}

4). Elements

Também chamada de base. Essa camada serve para estilizarmos a parte mais básica dos elementos. Nada de IDs nem classes aqui, apenas seletores de elementos.

Normalmente utilizada para se fazer o CSS Reset.

div{
   padding: 10px;
}

5). Objects

Usamos apenas classes aqui. É onde começamos a declarar a estrutura dos nossos elementos.

.my-button{
   width: 200px;
   padding: 10px;
}

6). Components

Aqui também só utilizamos classes. É onde começamos a estilizar os nossos elementos de forma mais específica.

.my-red-button{
   background-color: red;
   color: white;
   border: 2px solid black;
}

7). Trumps

É a camada com maior especificidade. Aqui criamos pequenas classes com !important para sobrescrever certas regras.

.hidden{
   display: none !important;
}

Organização dos arquivos

Eu costumo utilizar o Sass. Independentemente se você utiliza ou não um pré-processador, é bom que no final todos os arquivos sejam minificados e unidos num único arquivo.

Para garantir a organização e a ordem de carregamento, eu costumo utilizar a seguinte estrutura:

|__  1_settings
|   |__  _example_file.scss
|   |__  _1_settings.scss
|__  2_tools
|   |__  _example_file.scss
|   |__  _2_tools.scss
|__  3_generic
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _3_generic.scss
|__  4_base
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _4_base.scss
|__  5_objects
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _5_objects.scss
|__  6_components
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _6_components.scss
|__  7_trumps
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _example_file.scss
|   |__  _7_trumps.scss
|__  styles.scss

As pastas ficam numeradas apenas para manter a ordem quando formos ver no nosso editor ou IDE.

Dentro de cada pasta contém um arquivo principal, com o mesmo nome da pasta. Ele serve para carregar os demais arquivos.

Na raiz há o arquivo styles.scss, que carrega cada um dos arquivos principais das pastas na ordem que as camadas devem seguir. Esse arquivo nunca será tocado.

@import "1_settings/1_settings";
@import "2_tools/2_tools";
@import "3_generic/3_generic";
@import "4_base/4_base";
@import "5_objects/5_objects";
@import "6_components/6_components";
@import "7_trumps/7_trumps";

Caso queira testar, aqui tem um projeto em branco com a estrutura do ITCSS já montada, com Gulp e WebPack configurados:

https://github.com/hanashiro/simple-project-seed

Ao escrever o CSS somos livres para seguir a metodologia que quisermos: OOCSS, SMACSS, BEM, ACSS, etc.

Para saber mais, temos o curso de HTML5 e CSS3 Avançado, onde falamos mais sobre cada uma das metodologias de organização de CSS.

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

E você, já conhecia o ITCSS? Utiliza alguma metodologia em seus projetos?

Compartilhe com a gente aí nos comentários!

Começando com o novo CSS Grid Layout

Olá, Web Developers!

Chrome e Firefox finalmente lançaram uma atualização onde há suporte total à especificação de CSS Grid Layout. Antes esse suporte era apenas parcial.

“Ué, mas já fazemos isso com ferramentas como 960gs, unsemantic e bootstrap há muito tempo.”

Sim, mas para isso é necessário colocar uma biblioteca inteira no nosso projeto apenas para utilizarmos uma meia dúzia de classes.

Essa especificação indica propriedades que nos ajudam a criar grids diretamente no nosso CSS, e mais algumas facilidades que às vezes é chatinho de se fazer.

“Mas não criaram o FlexBox para facilitar exatamente a criação de layouts?”

A ideia principal do FlexBox é ajudar a trabalhar com uma coluna. Então podemos utilizá-lo para organizar itens dentro de uma coluna mas, para trabalhar com várias colunas, as Grids podem ser mais úteis.

Isso porque com as Grids podemos indicar quantas colunas ficarão disponíveis para cada tamanho de tela, fazendo com que fique mais fácil indicarmos quando um elemento deve ir para baixo ou para outro lugar se estivermos em uma tela menor. Também podemos indicar o número de linhas.

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

Começando com Grids

Primeiro vamos começar com um HTML bem simples, que utilizaremos para todos os nossos exemplos.

Temos basicamente dois tipos de elementos: o container e os itens.

<div class="container">
  <div class="item item-1">a</div>
  <div class="item item-2">b</div>
  <div class="item item-3">c</div>
  <div class="item item-4">e</div>
  <div class="item item-5">f</div>
  <div class="item item-6">g</div>
  <div class="item item-7">h</div>
</div>

E agora um CSS bem simples:

.container{
  display: grid;
  background-color: rgba(0,0,0,0.5);
  height: 300px;
  grid-template-columns: 40px 80% auto;
  grid-template-rows: 30px 20% auto;
}

.item{
  border: 1px solid black;
  background-color: white;
}

O que fizemos aqui? Na classe .item eu apenas coloquei uma borda e uma cor de fundo para podermos enxergar melhor cada item.

Na classe .container é que fizemos a brincadeira. Coloquei uma cor apenas para podermos ver onde está os limites do container.

Para começar a utilizar o Grid Layout, o nosso container têm que ter o display com o valor grid. Isso irá criar grids do tipo block.

Também há o inline-grid para criar grids do tipo inline e o subgrid, que serve para quando o container de uma grid também é um item de outro container de grid.

Em seguida conhecemos dois novos amigos: grid-template-columns e grid-template-rows.

Em grid-template-columns nós passamos as medidas que queremos para cada coluna. Se quiser acrescentar uma coluna nova é só adicionar um novo valor ali. No exemplo passamos uma coluna com uma medida em px e outra em %. A última colocamos auto. Este valor faz com que o elemento preencha todo o espaço restante.

Em grid-template-rows temos exatamente a mesma coisa, mas para linhas. Como no CSS precisamos que o container possua uma altura definida para que alturas dinâmicas funcionem, passei um valor fixo de 300px. Assim os valores em % e auto irão funcionar.

(Para o exemplo abaixo funcionar, certifique-se de estar utilizando a última versão do Chrome ou Firefox.)

Só com isso já poderíamos parar por aqui. Já tá bonito!
Mas vamos ver um pouco mais.

Podemos também nomear cada coluna ou linha:

.container{
  /***********/
  grid-template-columns: [primeira] 40px [col_2] 80%  [ultima] auto;
  /***********/
}

Para isso, basta colocar o nome desejado entre [] antes da medida da coluna/linha.

Caso queira repetir um valor um determinado número de vezes, podemos utilizar a função repeat():

.container{
  /***********/
  grid-template-columns: repeat(3, 20px) auto;
  /***** equivalente a ******/
  grid-template-columns: 20px 20px 20px auto;
}

“Mas e esse ‘auto’ aí? Tem como ter mais controle sobre o espaço disponível?”

Tem sim.

Temos uma unidade de medida chamada fr. Ela indica uma fração do espaço disponível em uma grid.

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

Os valores que não são dinâmicos são calculados primeiro. Então no exemplo acima, primeiro é calculado o “50px”. Depois é calculado o espaço disponível e então ele é distribuído para as frações que indicamos.

No nosso caso, colocamos 1fr e depois 2fr, o que totaliza 3fr. A primeira coluna ficará com 1/3 e a última ficará com 2/3 do espaço disponível.

E não precisamos indicar uma medida fixa para o fr funcionar.

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

No código acima, cada uma das colunas ficará com 1/3 do espaço disponível.

Bom, essa foi apenas um introdução ao Grid Layout. Ainda há muito mais o que se aprender.

E você? Já utilizava o Grid Layout antes de ser lançado? Se não conhecia, gostou ou achou mais difícil?

Compartilhe com a gente aí nos comentários!

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

CSS Filters – Tratamento de imagens em sua página

Quem desenvolve páginas para a Web há um bom tempo deve se lembrar da época em que o CSS era bem limitado. O que os designers criavam, normalmente no PhotoShop, tinha de ser recortado e cuidadosamente organizado em tabelas para que fosse possível ter os efeitos de imagem e layout nas páginas.

Com a evolução do CSS3 passou a ser possível criar muitos dos efeitos dos softwares de edição de imagem diretamente pelo CSS.

Uma propriedade ainda pouco utilizada, mas já bem suportada pelos browsers modernos, é a filter. Com ela podemos aplicar filtros em nossos elementos ou imagens como se estivéssemos fazendo tratamentos por um software de edição de imagens.

Podemos fazer os seguintes tratamentos em nossos elementos:

  • blur(px) – nível de ofuscamento
  • brightness(%) – ajusta o brilho
  • contrast(%) – ajusta o contraste
  • drop-shadow(h, v, blur, color) – aplica sombras
  • grayscale(%) – transforma as cores do elemento para uma escala cinza
  • hue-rotate(deg) – altera as cores do elemento
  • invert(%) – inverte as cores do elemento
  • opacity(%) – controla a opacidade do elemento
  • saturate(%) – altera a saturação do elemento
  • sepia(%) – transforma as cores do elemento para um tom sépia

Aqui temos um exemplo prático sobre o uso de cada uma dessas funções da propriedade filter.

Caso você tenha que dar suporte a navegadores mais antigos, será obrigado a utilizar imagens já tratadas. Do contrário, poderá aproveitar essas funcionalidades.

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA O CURSO

Vantagens

Mas, quais as vantagens de termos isso no CSS se o designer pode nos enviar tudo pronto?

Algumas pessoas dizem que uma das vantagens é continuar com a imagem original intacta, permitindo editá-la novamente caso sejam necessários ajustes. No entanto, muitos designers trabalham com os filtros separadamente da imagem, exatamente para não perder a original, então isso não é um grande motivo.

Como pudemos ver no exemplo acima, é possível aplicar os filtros em qualquer elemento, não apenas em imagens. Caso você precise aplicar em um elemento dinâmico, um texto, uma animação, vídeo, etc, é bem mais prático fazer estes tratamentos pelo CSS.

Em alguns designs que querem mostrar algo mais vivo, com ideia de movimento, etc, é comum o uso de transições. A propriedade filter também nos permite criar transições e animações, o que não daria com o uso de material já pronto vindo de um software de edição de imagem ou vídeo.

Outra possibilidade é a integração com o JavaScript. Conforme você vai interagindo com a página, algum elemento pode mudar de cor, ou se você quiser deixar algum trecho menos destacado para dar atenção a outro elemento, que tal deixá-lo em uma escala cinza? Ou criar um efeito de vidro fosco?

Voltando para o tratamento de imagens: imagine um site que tenha uma imagem padrão, seja de banner ou de fundo, e cada categoria do site tem uma cor, e a imagem deve seguir essa cor. Com os filtros do CSS, ao invés de ter uma imagem para cada cor, podemos carregar apenas uma imagem e mudar sua cor pela função hue-rotate.

Quem utiliza sprites ao invés de FontIcons muitas vezes acaba tendo que repetir alguns ícones apenas para ter sua cor diferente. Com os filtros do CSS podemos mudar a cor desses sprites.

Também há uma biblioteca baseada nos filtros do CSS, CSSGram, que recria os filtros do Instagram apenas com CSS.

Essas foram algumas ideias simples do que os filtros do CSS podem nos oferecer e que seriam difíceis ou impossíveis apenas com um material pronto vindo de softwares de edição de imagens.

E você, tem alguma ideia em que os filtros seriam úteis? Já precisou deles em um projeto? Compartilhe com a gente aí nos comentários!

React - Trabalhando com Arquitetura Flux
Curso de React - Trabalhando com Arquitetura Flux
CONHEÇA O CURSO

CSS: Float vs Inline Block – Qual usar em meus layouts?

Olá, Web Developers!

Você sabe quando utilizar float e display: inline-block? Aqui a gente vai ver as características de cada um para te ajudar a escolher qual o melhor a ser usado em determinada ocasião no seu projeto.

Ambos têm uma base parecida: permitir que elementos fiquem na mesma linha. Os seus demais comportamentos são totalmente diferentes e muitos desenvolvedores acabam não sabendo quando devem usar um ou outro.

Float

As pessoas normalmente utilizam o float para desenvolver colunas em seus layouts ou permitir que elementos de bloco ocupem a mesma linha, mas esta propriedade foi criada originalmente para permitir que um texto envolva um elemento.

No exemplo acima, nosso texto está envolvendo a nossa div. Normalmente os elementos ocupam uma linha, e aqui temos três linhas ao lado dele.

Um dos problemas do float é que o elemento pai não vai saber a sua altura, já que o elemento está flutuando.

  • No Exemplo 1 podemos ver que a div container, com borda verde, apenas interpreta a altura do nosso texto. A altura do nosso elemento flutuante, a div azul, é ignorada.

  • No Exemplo 2 nós utilizamos outra div com a propriedade clear para poder limpar os efeitos do float, fazendo com que o fluxo dos elementos volte ao normal e o container possa interpretar a altura normalmente.

<div class="container">
  <div class="floating" ></div>
  Exemplo 2
  <p class="clear" ></p>
</div>

Muitas pessoas acham isso feio: ter que colocar um elemento vazio apenas para fazer a altura de um elemento ser interpretada. Isso também tira o sentido da semântica do código.

Muitos frameworks, como o bootstrap, e bibliotecas de grid, como o unsemantic, funcionam assim para poder dar suporte a navegadores mais antigos.

  • No Exemplo 3 nós utilizamos outro hack: a propriedade overflow: auto no container. Isso faz com qua a gente não precise mais de um elemento apenas para encerrar o comportamento do float, mas só funciona bem se tivermos total controle das margens do container. Do contrário, você verá barras de rolagem.
.container-overflow{
  overflow: auto;
}
  • No Exemplo 4 temos algo mais complexo, porém mais confiável, muito utilizado em lugares como o HTML5 Boilerplate. Então, problemas com barra de rolagem resolvidos!
.clearfix:before, .clearfix:after { content: "020"; display: block; height: 0; overflow: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

Criamos uma classe .clearfix que cria um pseudo-elemento com o :before e :after. Ele utiliza a ideia do overflow e clear:both, e não veremos nada estranho porque também escondemos os pseudo-elementos com height: 0.

Mas se a ideia das tecnologias é sempre melhorar, por que continuar com essa complexidade toda?

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

Inline Block

Quando utilizamos display: inline-block, também estamos fazendo com que um elemento permaneça na mesma linha.

Note a diferença com o primeiro exemplo do float: nossa div está na mesma linha do texto, mas não são criadas novas linhas em volta dela. Tudo bem, o objetivo aqui é manter elementos na mesma linha. Aqui não teremos problemas com a altura do cointainer ou barra de rolagem. (◠◡◠)

Outra vantagem é que como agora ele é um elemento com comportamento de linha, poderemos utilizar as propriedades text-align e vertical-align para modificar sua posição. Masss … Teremos um probleminha quando precisarmos que os elementos estejam encostados (⌣_⌣”)

No exemplo acima criamos um layout que tem três colunas de larguras iguais que precisam preencher uma linha inteira. Note que entre a Div 1 e a Div 2 há um espaço. Se inspecionarmos os elementos veremos que não há margens separando as divs. Por quê esse espaço existe? Por causa dele, a nossa Div 3 foi jogada para a linha de baixo!

Acontece que o inline-block faz o elemento ter comportamentos de um elemento de linha. Os elementos de linha são basicamente textos!

<div class="container" >
  <div class="column">Div 1</div>
  <div class="column">Div 2</div>
  <div class="column">Div 3</div>
</div>

Quando escrevemos um texto, queremos que haja espaços entre as palavras, certo? Então o navegador interpreta os espaços que damos entre as palavras. Para organizar melhor o nosso HTML, nós colocamos uma div em cada linha. Essa quebra de linha no código é interpretado como espaço e acaba interferindo na renderização de elementos inline ou inline-block.

Caso você tenha o costume de minificar o seu código, os espaços serão removidos e você não terá esse problema.

Exemplo do resultado que queremos:

Aqui algumas maneiras de resolver isso com HTML:

<!-- Deixar tudo na mesma linha -->
<!-- Péssimo, pois deixa o código muito bagunçado -->
<div class="container" >
  <div class="column">Div 1</div><div class="column">Div 2</div><div class="column">Div 3</div>
</div>

<!-- Deixar a tag de fechamento junto à tag de abertura do elemento seguinte -->
<!-- Melhora um pouquinho, mas continua estranho -->
<div class="container" >
  <div class="column">Div 1
  </div><div class="column">Div 2
  </div><div class="column">Div 3</div>
</div>

<!-- Criar um comentário entre a quebra de linha -->
<!-- Muita gente prefere esse -->
<div class="container" >
  <div class="column">Div 1</div><!--
  --><div class="column">Div 2</div><!--
  --><div class="column">Div 3</div>
</div>

Aqui algumas maneiras de resolver isso com CSS:

/* Declarar uma margem negativa */
.column{
   margin-right: -4px;
}

/* Declarar font-size do container como 0 fará
*  o espaço ser 0 também, mas teremos que declarar
*  novamente o tamanho da fonte da nossa coluna.
*  Esse hack pode ter problemas em algumas versões
*  do Android e pode nos atrapalhar se nossos elementos
*  estiverem usando unidades como "em"
*/
.container{
   font-size: 0;
}
.column{
   font-size: 16px;
}

Concluindo

Float: Prefira usar quando quiser que um texto ou outros elementos contornem um determinado elemento. Essa é a real função dele.

Inline Block: Vimos aqui que o único problema do inline-block ocorre quando precisamos que os elementos fiquem encostados. Caso esse não seja o seu caso, o inline-block resolverá seus problemas sem a necessidade de algum hack.

Caso você não precise dar suporte total a navegadores mais antigos, então é mais recomendado que você monte seus layouts com as propriedades do flex-box.

Alguma ideia, dúvida ou sugestão? Compartilhe com a gente aí nos comentários!

Angular - CLI
Curso de Angular - CLI
CONHEÇA O CURSO

Criando contadores apenas com CSS

Olá Web Developers!

Vocês sabiam que é possível criar contadores apenas com CSS? Com isso alguns desenvolvedores conseguem até criar jogos sem nenhuma linha de JavaScript!

Os contadores fazem parte do CSS 2, então já possuem suporte por boa parte dos navegadores. Mesmo assim, são poucas as pessoas que conhecem ou fazem uso deles.

Para quem nunca viu pode parecer meio estranho, mas vamos ver de modo simples como usá-los!

Bootstrap 4 - Componentes CSS
Curso de Bootstrap 4 - Componentes CSS
CONHEÇA O CURSO

Inicializando o contador

Primeiro vamos imaginar que os contadores são simplesmente variáveis, exatamente como as das linguagens de programação. Então, vamos começar com a declaração:

.minha-classe{
   counter-reset: meucontador;
}
  • meucontador é o nome do nosso contador, nossa “variável”.
  • counter-reset reinicia o nosso contador.

É como se estivéssemos escrevendo:

var meucontador = 0;

Imprimindo o contador

Agora vamos apresentar o nosso contador em algum lugar. Para isso, nós usamos a propriedade content, que deve ser usada junto a um pseudo-elemento, ::before ou ::after.

<div class="imprime-contador">Minha Div</div>
.imprime-contador::after{
   content: counter(meucontador);
}

O resultado será:

Veja que colocamos a classe imprime-contador em uma div. Foi exibido o conteúdo da div, e o ::after acrescentou depois dela o que passamos em content, o valor do nosso contador.

incrementando o contador

Agora temos que incrementar o nosso contador.

.imprime-contador{
   counter-increment: meucontador
}

Diferente do counter-reset, que reinicia o nosso contador, o counter-increment incrementa o valor.

Sempre que houver uma classe onde haja o incremento do nosso contador, ele será incrementado. Seria como se executássemos o seguinte código:

// imagine "elementsList" como sendo uma lista com todos
// os elementos HTML do nosso código
elementsList.forEach((element)=>{
   if( element.classList.contains("imprime-contador") ){
      meucontador++;
   }
})

Então se colocarmos três divs:

<div class="imprime-contador">Minha Div</div>
<div class="imprime-contador">Minha Div</div>
<div class="imprime-contador">Minha Div</div>

O Resultado será:

Incrementando de acordo com a seleção do usuário

Podemos também aproveitar o seletor :checked, que indica checkboxes marcados, para utilizar como condição para o incremento dos contadores. Por exemplo:

<style>
body {
  padding: 2em;  
}

.counter-reset{
   counter-reset: checkboxcounter;
}

.meucheckbox{
   width: 20px;
   height: 20px;
   margin-right: 10px;
   appearance: checkbox;
   -moz-appearance: checkbox;
   -webkit-appearance: checkbox;
}

.counter-print::after{
   content: "Total: " counter(checkboxcounter);
}

.meucheckbox:checked{
   counter-increment: checkboxcounter;
}
</style>

Clique nos Checkboxes para ver o contador incrementar:

<div style="margin-top: 30px;">  
  <span class="counter-reset"></span>  
  <input type="checkbox" class="meucheckbox" id="checkbox1" /><label for="checkbox1" >CheckBox 1</label>  
  <input type="checkbox" class="meucheckbox" id="checkbox2" /><label for="checkbox2" >CheckBox 2</label>  
  <input type="checkbox" class="meucheckbox" id="checkbox3" /><label for="checkbox3" >CheckBox 3</label>  
  <span class="counter-print"></span>  
<div>  

Se você quiser testar:

Aqui fizemos o seguinte:

  • Criamos uma classe no CSS apenas para reiniciar nosso contador, o .counter-reset;
  • Criamos uma classe no CSS apenas para imprimir o total do nosso contador, o .counter-print;
  • Fizemos um tipo de “condição” para o incremento, que são os checkboxes da classe .meucheckbox que estiverem marcados;

Vejam então que conseguimos fazer um contador que tem seu valor atualizado na página sem o uso de onclicks que chamam funções que calculam valores e atualizam o HTML, ou o uso de binds como os do Angular ou React. Apenas algumas linhas de CSS foram necessárias para criar este comportamento.

Alguma ideia, dúvida ou sugestão sobre como usar o CSS Counter? Compartilhe com a gente aí nos comentários!

Por hoje é só. Até o próxima o/

Joomla - Criação de Temas
Curso de Joomla - Criação de Temas
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