CSS

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

Olá Web Developers!

Há um bom tempo que os navegadores já suportam bem o Flexbox. 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 o Flexbox funciona.

Se estiver com dúvidas entre usar Flexbox ou CSS Grid, confira o nosso post de comparação: https://www.treinaweb.com.br/blog/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 é Flexbox?

O Flexbox (Flexible Box) nos permite organizar, alinhar e distribuir itens dentro de um container. Com ele fica mais simples definir o tamanho e o alinhamento vertical e horizontal de itens.

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

Container

Neste primeiro post veremos as propriedades que ficam no elemento pai dos nossos itens, o container.
Teremos basicamente um container com três itens dentro.

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

display

Primeiro precisamos definir que o nosso container é do tipo “flex”; Fazemos isso com a propriedade “display”.
No exemplo abaixo, utilize o checkbox para ligar/desligar o Flexbox.

flex-direction

Indica a direção dos itens, definindo o que vamos chamar de eixo principal (main-axis).

  • row (padrão): da esquerda para direita
  • row-reverse: inverso de row
  • column: de cima para baixo
  • column-reverse: inverso de column

flex-wrap

O comportamento padrão dos itens de um elemento flex é ficar em uma única linha. Se a largura total de todos os itens for maior do que o espaço disponível, os itens continuarão na mesma linha.

Esta propriedade permite que os itens sejam jogados em outra linha caso não haja mais espaço na linha.

  • nowrap (padrão): todos os itens ficam em uma única linha
  • wrap: os itens que não cabem na linha são jogados para baixo
  • wrap-reverse: os itens que não cabem na linha são jogados para cima

flex-flow

Esta propriedade é apenas um atalho para flex-direction e flex-wrap, nos permitindo declarar o valor de ambos em uma única propriedade.

.container{
    display: flex;
    flex-flow: row wrap;
}

justify-content

Define o alinhamento dos itens ao longo do eixo principal.

  • flex-start (padrão): os itens ficam junto no começo da linha
  • flex-end: os itens ficam juntos no final da linha
  • center: os itens ficam centralizados na linha
  • space-between: os itens são distribuídos igualmente no espaço disponível. O primeiro item fica no começo da linha e o último fica no final.
  • space-around: os itens são distribuídos igualmente no espaço disponível ao redor deles.
  • space-evenly: os itens são distribuídos igualmente no espaço disponível.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-items

Define o alinhamento dos itens perpendicularmente em relação ao eixo principal.
Pense nele como um justify-content, mas que alinhará os itens no outro eixo.

  • stretch (padrão): estica os elementos para preencherem o container.
  • flex-start: os itens ficam junto no começo do eixo perpendicular
  • flex-end: os itens ficam juntos no final do eixo perpendicular
  • center: os itens ficam centralizados no eixo perpendicular
  • baseline: parecido com o center, mas usando a base da linha como referência. No exemplo abaixo, note como os textos dos itens ficam alinhados.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

align-content

Alinha as linhas do container.
Por alinhar as linhas, esta propriedade só tem efeito quando há mais de uma linha.

  • stretch (padrão): estica as linhas para preencherem o espaço restante.
  • flex-start: as linhas ficam juntas no começo do container
  • flex-end: as linhas ficam juntas no final do container
  • center: as linhas ficam centralizadas no container
  • space-between: as linhas são distribuídas igualmente. A primeira linha fica no começo do container e a última fica no final.
  • space-around: as linhas são distribuídas igualmente no espaço disponível ao redor delas.

flex-direction: column

Lembre-se que esta propriedade alinha os itens em relação ao eixo principal. Isso significa que se você mudar o valor de flex-direction, a direção do posicionamento será outra.

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

Playground

Para testar, brinque um pouco com cada uma das propriedades para ver as possibilidades:

Templates gratuitos para aplicações administrativas

Com a necessidade da criação de aplicações em um menor tempo possível, é cada vez mais viável a utilização de templates prontos para reduzir o tempo de desenvolvimento. Por isso, diversos templates, principalmente para áreas administrativas, foram sendo criados e compartilhados na internet, dos quais veremos alguns neste artigo.

Django - Templates
Curso de Django - Templates
CONHEÇA O CURSO

AdminLTE

O AdminLTE é um template administrativo css gratuito todo construído sobre o Bootstrap 3. Em sua recente atualização, algumas novidades foram adicionadas, tais como: Reescrita completa do JavaScript, suporte NPM e Bower, além de sua documentação. Open source, o AdminLTE é uma excelente opção aos desenvolvedores que buscam componentes responsivos e reutilizáveis.

A partir do link (https://adminlte.io/themes/AdminLTE/index2.html) é possível ter um Live Preview do template e testar todas as suas funcionalidades antes de realizar seu download.

O download da ferramenta pode ser feito através do link: https://adminlte.io/

CoreUI

O CoreUI é um template gratuito baseado no Bootstrap 4 para criação de interfaces administrativas funcionais e sofisticadas. Trabalha com uma grande variedade de frameworks, tais como: Angular, Laravel e React, o que permite que este template seja utilizado nos mais diversos projetos.

A partir do link (https://coreui.io/demo/#main.html) é possível ter um Live Preview do template e analisar sua vasta biblioteca de componentes, que trás consigo as vantagens em adicionar diversos botões, formulários e muitos outros componentes para facilitar o desenvolvimento.

Seu download pode ser feito através do link: https://coreui.io/

Laravel - Framework PHP (Parte 1/3)
Curso de Laravel - Framework PHP (Parte 1/3)
CONHEÇA O CURSO

Light Bootstrap

Seguindo a mesma linha dos dois templates citados anteriormente, o Light Bootstrap é um template administrativo gratuito baseado no Bootstrap 4, desenhado para ser bonito e simples, além de facilitar a criação de aplicações administrativas. Provê uma grande coleção de elementos que possibilita a criação de apps das mais variadas formas.

Sua barra lateral pode ser alterada entre 6 cores diferentes (preto, azul, verde, laranja, vermelho e roxo), tornando sua experiência muito mais confortável.

É possível acessar sua Live Preview através do link (https://demos.creative-tim.com/light-bootstrap-dashboard/).

Seu download pode ser realizado acessando o link: https://github.com/creativetimofficial/light-bootstrap-dashboard

Material Dashboard

O Material Dashboard, apesar de ser construído utilizando o Bootstrap 4, possui uma interface inspirada nos padrões de design do Google, o Material Design.

Seu visual é limpo e elegante, tornando-se uma ótima alternativa. Além disso, o Material Dashboard possui 60 componentes dos mais variados tipos e três páginas de exemplo para você iniciar seus projetos.

Sua Live Preview pode ser acessada no link (https://demos.creative-tim.com/material-dashboard/examples/dashboard.html?_ga=2.925873.104232430.1547748278-1145022817.1547748278) onde é possível ter uma breve visualização do template, antes de realizar seu download.

Após analisar suas funcionalidades, o download pode ser feito através do link: https://www.creative-tim.com/product/material-dashboard

Star Admin

Com uma aparência fantástica, o Star Admin é, com certeza, uma ótima opção a considerar quando queremos desenvolver um sistema administrativo. Também construído utilizando o Bootstrap 4, este template possui um visual único e arrojado, tornando sua aparência um ponto fortíssimo.

Além disso, o Star Admin possui uma grande coleção de widgets e componentes para os mais variados usos.

A partir do link (http://www.bootstrapdash.com/demo/star-admin-free/jquery/index.html) é possível acessar a Live Preview deste template e seu download, feito através do link: https://www.bootstrapdash.com/product/star-admin-free/

Java - Criação de aplicações web com Spring Boot
Curso de Java - Criação de aplicações web com Spring Boot
CONHEÇA O CURSO

Conclusão

Neste artigo vimos alguns templates para utilizarmos no desenvolvimento de aplicações administrativas e o quanto eles agilizam a criação de novos projetos.

Trabalhando com Sprites no CSS

Olá , Web Developers!

Hoje veremos como trabalhar com sprites no CSS. Se você não sabe o que é, no vídeo abaixo eu explico o que são Sprites e quais suas vantagens:

O Sprite

Nós vamos utilizar a seguinte imagem como nosso Sprite, que possui vários logos de programas feitos com Electron.

Preparando a base

Primeiro precisamos criar uma classe que será a base do nosso sprite. Essa classe será repetida em todo lugar que quisermos usar o sprite. Vamos dar o nome de tw-sprite.

Para que ela possa ficar na mesma linha que outros elementos e também podermos alterar suas dimensões, vamos deixar com display: inline-block.
Vamos indicar a nossa imagem como background-image e também indicar que não queremos que ela se repita.

.tw-sprite{
  display: inline-block;
  background-image: url("url da imagem");
  background-repeat: no-repeat;
}

Podemos chamar essa classe em qualquer lugar que quisermos chamar nossa imagem, como na seguinte div por exemplo:

<div class="tw-sprite"></div>

Indicando a imagem – Dimensões

Agora já temos uma base para começar a usar a nossa imagem. Mas agora precisamos indicar qual das imagens queremos usar. Para isso nós precisamos criar uma segunda classe que, em conjunto com a primeira classe que criamos, irá indicar exatamente imagem que queremos exibir.

Vamos supor que queremos o logo do GitHub. Vamos criar uma classe que vai se chamar tw-sprite-github. Então nossa div vai ficar assim:

<div class="tw-sprite tw-sprite-github"></div>

Na segunda classe nós iremos primeiro indicar a largura e altura da imagem com as propriedades width e height. Você pode ver o resultado brincando com o exemplo interativo a seguir:

Indicando a imagem – Posição

Além do tamanho, também precisamos mover a posição da imagem para podermos indicar a imagem que queremos.

Para isso utilizamos a propriedade background-position, que nos permite mover a imagem que estamos usando no background-image. Você pode ver o resultado brincando com o exemplo interativo a seguir:

Como queremos a imagem do GitHub, nossa classe ficará com os seguintes valores:

.tw-sprite-github{
    width: 70px;
    height: 70px;
    background-position: -340px -150px;
}

Conclusão

Claro que este é apenas um exemplo para mostrar como funciona a criação de Sprites com CSS.

Por ser muito trabalhoso e manual (principalmente se precisar ficar adicionando novas imagens), há várias ferramentas em que inserimos as imagens que queremos. A ferramenta já junta todas as imagens em um único arquivo e gera as classes CSS de acordo com nossas instruções.

Há ferramentas online e outras que você pode instalar diretamente do npm.

Abaixo uma lista de ferramentas para criação de Sprites CSS:

Até a próxima!

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

Criando páginas para repositórios com o GitHub Pages

O GitHub é uma das maiores ferramentas para armazenamento e gestão dos nossos projetos. Ele possui um recurso bem interessante que facilita a divulgação e apresentação dos projetos lá hospedados. Este recurso é o GitHub Pages, que permite que criemos uma página web para nossos repositórios totalmente gratuita. Legal né? Então fica ligado que neste artigo veremos como criar uma página de apresentação para um repositório.

Git e GitHub - Controle de versão
Curso de Git e GitHub - Controle de versão
CONHEÇA O CURSO

Criando o repositório:

A primeira coisa a se fazer é criar um repositório no GitHub para que consigamos gerar a página web para ele. Para isso, vamos até a rota https://github.com/new e configuramos todas as suas preferências:

Nesta página vamos informar o nome do repositório, sua descrição e o tipo de visibilidade (público ou privado). Feito isso, clicamos no botão verde “Create repository”.

Ativando o GitHub Pages:

Após isso, o repositório será criado e seremos redirecionados para sua tela inicial. Lá, clicamos no botão “Settings” no menu superior da tela. A partir disso, seremos redirecionados para a tela de configurações do repositório que, dentre diversas configurações, existe uma seção chamada “GitHub Pages”, conforme podemos ver abaixo:

Nesta seção há duas opções. Podemos criar uma página a partir de um código presente no próprio repositório ou por meio de um modelo disponibilizado pelo próprio GitHub. Caso você queira desenvolver sua própria página, selecione a branch que você quer salvar seu arquivo index.html e clique no botão save (primeira parte da seção).

Selecionando o tema

Para este artigo, vamos selecionar um modelo disponibilizado pelo próprio GitHub. Sendo assim, clicamos no botão “Choose a theme”. Feito isso, uma nova página será aberta onde podemos ver a lista de todos os temas disponíveis para uso:

Agora é só selecionar o que você prefere e clicar no botão verde “Select Theme”. Feito isso, uma janela para que possamos customizar a página do nosso repositório será aberta. Vale lembrar que as informações são escritas em Markdown, por isso precisamos seguir este formato.

Após editar o conteúdo da nossa página, vamos até o final da mesma e clicamos em “Commit Changes”. Isso irá gerar um novo commit com as mudanças feitas.

Finalmente, após todos estes passos, já podemos acessar a página do repositório através da rota:

https://treinaweb.github.io/repositorio_teste_github_pages/

Concluindo:

Com isso, notamos o quão fácil é criar uma página de apresentação para nossos repositórios de forma totalmente gratuita. Podemos, também, utilizar projetos um pouco mais complexos utilizando HTML, CSS e JavaScript, mas isso fica para um próximo artigo, ok? 🙂

Um abraço e até lá!

Barra de progresso que muda de tamanho e cor com apenas uma variável do CSS

Olá, Web Developers!

Hoje veremos como aproveitar variáveis do CSS para criar uma barra de progresso bem simples e controlar sua largura e cor usando apenas uma variável.

Se você nunca trabalhou com variáveis do CSS, temos aqui um vídeo onde explico de forma bem simples e rápida como utilizar: https://www.treinaweb.com.br/blog/videos/variaveis-com-css-puro/

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

Começando com a barra de progresso

Uma barra de progresso pode ser uma simples div. Vamos iniciar nossa div com o seguinte código:

<div class="progress-bar" ></div>
.progress-bar{
  height: 50px;
  padding: 5px;
  background-color: #ccc;
}

Exibindo o progresso

É muito comum utilizar outra div como progresso, mas também podemos utilizar pseudo-elementos para inserir um conteúdo na div principal. Dessa maneira nosso HTML não precisará ter duas divs para termos nossa barra de progresso, deixando nosso código ainda mais simples.

.progress-bar{
  height: 50px;
  padding: 5px;
  background-color: #ccc;
  /* pseudo-elementos precisam de um
    conteúdo para terem altura.
    Como não teremos conteúdo no nosso
    pseudo-elemento, utilizar
    "display: flex" o força a
    ter a altura do elemento pai.
    */
  display: flex;
}

.progress-bar::before{
  content: "";
  /* Por enquanto colocamos
    uma largura e uma cor
    com valores fixos
    */
  width: 50%;
  background-color: red;
}

Alterando o tamanho do progresso com variáveis

O progresso sempre vai de 0% até 100%. Isso é bem simples: vamos criar uma variável no CSS com o valor inicial de 0 e utilizá-la na largura do nosso pseudo-elemento.

.progress-bar{
  /* vamos declarar nossa
    variável com o nome de
    "progress". Ela terá seu
    valor entre 0 e 100.
    */
  --progress: 50;
  height: 50px;
  padding: 5px;
  background-color: #ccc;
  display: flex;
}

.progress-bar::before{
  content: "";
  /* aqui estamos chamando
    nossa variável. Como a
    largura do pseudo-elemento
    estará entre 0% e 100%, temos
    que converter o valor da nossa
    variável em porcentagem. Para
    isso, basta multiplicar por 1%.
    */
  width: calc(var(--progress) * 1%);
  background-color: red;
}

Agora ao alterarmos nossa variável teremos o tamanho do nosso progresso alterado também.

Como alterar as cores?

Vamos ver como alterar cores baseadas em um valor. É muito comum utilizarmos nomes das cores, o padrão RGB, onde indicamos um valor de 0 a 255 de vermelho (Red), verde (Green) e azul (Blue) ou o Hexadecimal, onde também indicamos a quantidade de vermelho, verde e azul, mas de 00 até FF (255 em hexadecimal).

Porém, outro modo de se declarar cores, que é menos comum de ser ver sendo utilizado na web, é o HSL. Para isso precisamos conhecer o círculo cromático.

O círculo cromático é esse círculo colorido. Lembre-se que o círculo possui 360º. O vermelho está bem em cima, onde consideramos ser o início do círculo. Então podemos indicar cada cor a partir de um ângulo:

  • Vermelho: 0º ou 360º
  • Amarelo: 60º
  • Verde: 120º
  • Ciano: 180º
  • Azul: 240º
  • Magenta: 300º

No HSL nós indicamos as cores a partir de três valores:

  • H(hue – matiz): uma das propriedades que nos permite diferenciar uma cor da outra. Passamos um número entre 0 e 360 de acordo com o círculo cromático acima.
  • S(saturation – saturação): indica se a cor é mais brilhante ou fosca. Passamos um valor entre 0% e 100%.
  • L(light – luz): indica a quantidade de luz na cor. Passamos um valor entre 0% (deixa a cor preta) e 100% (deixa a cor branca).

Então com base nisso podemos deixar o valor de saturação e luz fixos e mudar apenas o valor da matiz.

Como barras de progresso costumam ir do vermelho ao verde, vamos alterar esse valor de 0 até 120.

Alterando a cor com variáveis

Nossa variável de progresso vai de 0 a 100 e temos que fazer nossa cor ir de 0 até 120. Então basta usarmos regra de três para criar nossa fórmula.

Se quando nossa variável chegar a 100 teremos que ter nossa matiz em 120, então quando nossa variável estiver em 50 vamos querer que nossa matiz seja X:

100 = 120
50  = x

Teremos a seguinte fórmula:

x = 120 * 50 / 100

Simplificando, basta multiplicar 1.2 pelo valor da nossa variável. Então vamos usar a função “hsl()” do CSS com saturação e luz com valores fixos e a matiz sendo calculada por essa nossa fórmula.

.progress-bar::before{
  content: "";
  width: calc(var(--progress) * 1%);
  background-color: hsl( calc(var(--progress) * 1.2) , 80%, 50%);
}

Agora ao alterarmos nossa variável CSS o progresso e a cor serão alterados juntos.

Se quiser deixar a barra mais suave, podemos utilizar a propriedade transition:

.progress-bar::before{
  content: "";
  width: calc(var(--progress) * 1%);
  background-color: hsl( calc(var(--progress) * 1.2) , 80%, 50%);
  transition: all 0.2s ease;
}
}

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

Truques de como selecionar o n-ésimo item com CSS usando a pseudo-classe :nth-child

Olá, Web Developers!

Quando estamos trabalhando com CSS, pode haver momentos em que a gente irá precisar selecionar um ou mais elementos em um grupo de elementos.

Pode ser que você queira selecionar todos os elementos pares, um elemento a cada três ou todos após o quarto elemento.

Para isso podemos usar a pseudo-classe :nth-child.

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

Como base utilizaremos o seguinte HTML e CSS:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
ul{
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

li{
  width: 50px;
  height: 50px;
  background-color: gray;
  border-radius: 100%;
}

E teremos o seguinte resultado:

Agora utilizaremos o nth-child para selecionar os <li>.

Selecionar apenas o nº elemento

Para selecionar um elemento em um grupo, basta passarmos para o nth-child a posição desse elemento.

Exemplo: selecionar 5º elemento.

li:nth-child(5) {
    background-color: red;
}

Selecionar todos após o nº elemento

Para selecionar todos após um determinado elemento, basta passar n + e o número do elemento a partir do qual você quer selecionar.

Exemplo: selecionar todos a partir do 5º elemento (inclusive).

li:nth-child(n + 5) {
    background-color: red;
}

Selecionar os primeiros n elementos

Para selecionar os primeiros n elementos, basta fazer igual ao exemplo anterior, mas deixamos o n negativo.

Exemplo: selecionar os primeiros 5 elementos.

li:nth-child(-n + 5) {
    background-color: red;
}

Selecionar um a cada n elementos a partir do primeiro

Para selecionar um a cada n elementos, basta multiplicar este número a n.

Exemplo: selecionar um elemento a cada 3.

li:nth-child(3n + 1) {
    background-color: red;
}

A explicação dessa seleção é imaginar que o n assume vários valores, e como estamos multiplicando por 3 e somando com 1, teremos:

**(3n) + 1**
(3 x 0) + 1 = 1 (seleciona o 1º elemento)
(3 x 1) + 1 = 4 (seleciona o 4º elemento)
(3 x 2) + 1 = 7 (seleciona o 7º elemento)
(3 x 3) + 1 = 10 (seleciona o 10º elemento)

Para selecionar a cada 2 elementos começando do primeiro, você pode indicar que quer selecionar os números ímpares. Então os seguintes códigos terão o mesmo resultado:

li:nth-child(2n + 1) {
    background-color: red;
}

li:nth-child(odd) {
    background-color: red;
}

Selecionar um a cada n elementos (ignorando o primeiro)

Mesmo que o anterior, mas não selecionaremos o primeiro elemento.

Exemplo: selecionar um elemento a cada 3.

li:nth-child(3n) {
    background-color: red;
}

Para selecionar a cada 2 elementos sem contar o primeiro, você pode indicar que quer selecionar os números pares. Então os seguintes códigos terão o mesmo resultado:

li:nth-child(2n) {
    background-color: red;
}

li:nth-child(even) {
    background-color: red;
}

Selecionar um a cada n elementos a partir do nº elemento

Mesmo que o anterior, mas indicamos quantos elementos queremos pular.

Exemplo: selecionar um elemento a cada 3 a partir do 3º elemento.

li:nth-child(3n + 3) {
    background-color: red;
}

Contando a partir do último elemento

Além do nth-child também temos o nth-last-child, que podemos usar do mesmo modo como fizemos anteriormente. A diferença é que ele começa no último elemento.

Para selecionar os últimos n elementos, basta fazer igual ao exemplo de selecionar os n primeiros elementos, mas usando o nth-last-child agora.

Exemplo: selecionar os últimos 5 elementos.

li:nth-last-child(-n + 5) {
    background-color: red;
}

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

Slideshow apenas com CSS

Olá, Web Developers!

Hoje vou mostrar como criar um slideshow bem simples apenas com CSS.

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

A estrutura dos Slides

Primeiro vamos montar nossos slides. Como teremos vários, vou usar a tag ul. Então, cada li será um slide. Dentro do li poderemos ter o conteúdo que quisermos.

<ul class="slides-list" >
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=8" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=0" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=6" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=1" />
    </li>
</ul>

Estilização básica dos slides

Agora nós iremos fazer uma estilização bem simples na lista de nossos slides.

.slides-list{
  /*remove os estilos da lista*/
  list-style-type: none;
  margin: 10px 0;
  padding: 0;

  /* 
    deixa todos os itens da lista
    na horizontal e todos com a
    mesma largura
  */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

Exibindo um slide de cada vez

Agora temos um slide do lado do outro. Mas temos que fazer com que apareça apenas um de cada vez. Bom, isso é muito simples: basta que cada slide (li) preencha 100% da largura disponível, certo?

Com o CSS Grid nós já fizemos com que todos os li possuam o mesmo tamanho e ocupem todo o espaço disponível. Então temos que fazer com que o ul seja maior para que cada li ocupe 100% da largura do espaço disponível.

Se temos quatro slides (li), e cada um precisa ocupar 100% do espaço disponível, nosso ul precisa ter um tamanho de 400%.

Poderíamos fazer da seguinte maneira:

.slides-list{
    ...
    width: 400%;
    ...
}

Mas isso vai deixar o nosso código fixo. Vamos aproveitar que hoje em dia o CSS aceita variáveis!

.slides-list{
    --total-items: 4;
    ...
    width: calc(var(--total-items) * 100%);
    ...
}

Usamos uma variável do CSS para armazenar o total de itens em nosso Slideshow, e passamos essa variável para a função calc(). Assim podemos mudar facilmente o total de itens dos nossos slides.

Agora conseguimos ter apenas um único slide na tela de cada vez. Mas por termos um elemento muito longo, apareceu uma barra de rolagem na tela. Não é isso que queremos em um Slideshow.

Vamos então colocar a nossa lista ul dentro de um contêiner, e vamos indicar por CSS que esse contêiner não terá barra de rolagem. Desse jeito o que estiver além das dimensões do contêiner ficará escondido.

<div class="slide-show" >
  <ul class="slides-list" >
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=8" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=0" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=6" />
    </li>
    <li class="slide" >
      <img src="https://picsum.photos/300/300?image=1" />
    </li>
  </ul>
</div>
.slide-show{
  overflow: hidden;
}

Escolhendo qual slide será exibido

Agora que conseguimos deixar apenas um slide na tela, ficamos apenas com o primeiro slide preso na tela. Como podemos então indicar que queremos exibir o segundo, terceiro, etc?

Isso também é simples. Podemos pegar o ul e movê-lo com a propriedade left.

.slides-list{
  ...
  position: relative;
  left: 0%;
  ...
}

Sabemos que cada li possui um tamanho de 100%, certo? Então para exibir o primeiro slide, o left tem que ter valor 0.

Para exibir o segundo slide, temos que mover 100% para a esquerda, ou seja, left precisará ter o valor -100%.

Para exibir o terceiro slide, temos que mover 200% para a esquerda, ou seja, left precisará ter o valor -200%.

Vamos aproveitar novamente as variáveis do CSS e a função calc() para tratar isso.

.slides-list{
  --selected-item: 0;
  ...
  position: relative;
  left: calc(var(--selected-item) * -100%);
  ...
}

Para mudar o slide que será exibido basta alterar o valor da variável --selected-item.

Alterando o slide exibido

Vimos então como escolher o slide a ser alterado, bastando alterar a variável CSS --selected-item. Para alterar o valor dessa variável, poderíamos facilmente usar JavaScript. Mas como prometido, esse Slideshow irá usar apenas CSS.

Podemos alterar o valor da variável, indicando qual slide queremos visualizar, usando Radio Buttons.

Como temos 4 slides, vamos criar 4 Radio Buttons antes do nosso Slideshow. Vamos também deixar o primeiro marcado como checked.

Lembre-se de dar o mesmo name para todos, para que apenas um fique marcado.

<input type="radio" class="slide-controller" name="slide" checked />
<input type="radio" class="slide-controller" name="slide" />
<input type="radio" class="slide-controller" name="slide" />
<input type="radio" class="slide-controller" name="slide" />

E agora podemos nos aproveitar do pseudo-seletor :checked do CSS para indicar que o valor da variável --selected-item irá mudar de acordo com o Radio Button marcado.

.slide-controller:nth-child(1):checked ~ .slide-show .slides-list{--selected-item: 0;}
.slide-controller:nth-child(2):checked ~ .slide-show .slides-list{--selected-item: 1;}
.slide-controller:nth-child(3):checked ~ .slide-show .slides-list{--selected-item: 2;}
.slide-controller:nth-child(4):checked ~ .slide-show .slides-list{--selected-item: 3;}

Finalizando

Agora conseguimos escolher qual slide ficará na tela sem o uso de JavaScript. Mas tudo está muito estático. Podemos indicar uma transição para ter um efeito mais animado quando mudarmos de slide.

Para isso usaremos a propriedade transition.

.slides-list{
  ...
  transition: left 0.4s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  ...
}

E só para centralizar todos os itens, vou colocar um text-align: center em body. Mas isso é só para finalizar o exemplo de maneira simples e rápida.

Também tem como melhorarmos a estilização, principalmente desses Radio Buttons, mas isso fica para outra ocasião. 😉

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

FlexBox ou CSS Grid?

Olá, Web Developers!

Houve um tempo em que posicionar elementos pelo CSS poderia ser trabalhoso, dependendo do que fosse preciso criar.

Então veio o Flexbox, facilitando o posicionamento de elementos. Logo em seguida os navegadores começaram a dar suporte ao CSS Grid, e então muitos ficaram com a dúvida: FlexBox ou CSS Grid?.

Um erro comum é pensar que o CSS Grid veio para ocupar o lugar do FlexBox, já que os navegadores começaram a dar suporte mais recentemente. Mas esse é um grande erro.

  • Flexbox faz coisas que o CSS Grid não pode fazer;

  • CSS Grid faz coisas que o Flexbox não pode;

  • Ambos podem trabalhar em conjunto;

  • Há coisas que podemos fazer com ambos, mas que um faz de maneira melhor e mais simples;

Quando usar FlexBox?

Claro que podemos usar o flexbox para trabalhar com elementos em duas dimensões, mas flexbox é mais bem utilizado quando estamos trabalhando com elementos em apenas uma dimensão, seja linha ou coluna.

Um bom exemplo é quando criamos um menu, seja ele vertical ou horizontal.

Eu diria que ele é bom para alinhar elementos, não importa a direção.
Além disso, não precisamos nos importar com a quantidade de itens, já que o Flexbox não requer que isso seja declarado.

Quando usar o Grid?

Claro que podemos usar o Grid para trabalhar com elementos em uma única dimensão, mas ele é ótimo quando estamos trabalhando com elementos em duas dimensões, principalmente para definir a estrutura de uma página, o que seria muito mais difícil com FlexBox.

Você pode indicar onde um elemento começa e onde ele acaba na sua grid, o que te dá muita flexibilidade. Ou também pode-se dar nomes para as áreas da sua grid, e então indicar a um elemento que ele pertence àquela área, o que deixa o código muito mais legível e simples de manter, como mostrado no exemplo acima.

Então, se você tiver já um determinado número de linhas e colunas, provavelmente Grid será melhor do que o FlexBox para você neste momento.

Além disso, é provável que escreva bem menos media queries, já que podemos aproveitar funcionalidades como auto layout, minmax(), repeat() e auto-fill.

Quando usar os dois juntos?

E claro que podemos aproveitar o melhor dos dois mundos!

No exemplo acima foi feito o seguinte:

  • O layout da página foi definido com CSS Grid;

  • O cabeçalho possui um menu, o qual teve seus itens organizados com FlexBox;

  • Cada item do menu possui uma pequena estrutura para posicionar seus elementos (ícone e textos), que pode ser vista pelas bordas brancas. Isso foi feito com CSS Grid.

Conclusão

Então, dependendo da necessidade, um pode ser uma opção mais viável, mas não é errado usar o outro.

Nada te impede de comer com duas facas ou com dois garfos, mas usar os dois juntos e saber o melhor momento de usar cada um facilita a nossa vida, não é mesmo?

Conforme você for obtendo mais intimidade com FlexBox e CSS Grid, a escolha pelo melhor para a sua necessidade ficará cada vez mais intuitiva.

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

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 - Armazenamento e Sincronia com Firebase Firestore
Curso de React Native - Armazenamento e Sincronia com Firebase Firestore
CONHEÇA O CURSO