CSS

Criando um Portfólio com o Pingendo

Diferente de um currículo, o portfólio é o meio mais completo de expor sua experiência profissional.

Desta forma, você poderá utilizá-lo para compartilhar suas experiências de maneira mais organizada na web.

Neste artigo criaremos uma página web para que você possa utilizar como portfólio pessoal utilizando o Pingendo.

Ferramenta utilizada

Para criação desta página, utilizaremos o Pingendo pelo fato de ser uma ferramenta de fácil uso e extremamente simples.

Com o Pingendo é possível criar páginas web responsivas no estilo “arrasta e solta”. Por este motivo, esta ferramenta é ideal para criação de páginas mesmo que você não possua tanto conhecimento sobre programação.

O primeiro passo é entrar em seu site no link: https://pingendo.com/ e realizar o download da ferramenta.

Ao clicar no “Download”, selecione o seu sistema operacional e a ferramenta começará a ser baixada.

Após baixar a ferramenta, basta instalá-la em seu computador “NEXT-NEXT-FINISH”, e pronto! Inicializaremos a criação do nosso portfólio.

Neste artigo faremos algo bem básico. Uma pequena página para que você tenha apenas uma noção do que a ferramenta proporciona.

Realizando a criação do nosso Portfólio

Após instalar o Pingendo, abriremos a ferramenta para iniciar.

Logo na página inicial já nos deparamos com alguns templates prontos, e podemos utilizar aquele que mais nos agrada, realizando apenas as alterações necessárias.

Lembrando que não estaremos manipulando códigos (HTML/CSS) na criação deste portfólio, já que a ferramenta permite a criação de páginas no estilo “arrasta e solta”. 🙂

Selecionaremos o template desejado, a pasta de destino e clicaremos em CREATE.

Logo após, selecionamos o arquivo “index.html” para editá-lo.

Pronto! A partir daí, podemos começar a editar todo layout conforme nossa necessidade.

A ferramenta é totalmente simples (como dito acima), e ao clicar nos botões ou sobre as caixas de texto, podemos editá-las, alterá-las, excluí-las ou inserir imagens. Fica a cargo da sua criatividade.

Abaixo, mostraremos algumas formas de editar o template utilizado.

Lembrando que não estamos modificando a estrutura do template utilizado, apenas realizando algumas alterações para se encaixar na página que desejamos criar.

Para alterar o texto, basta clicar sobre componente desejado e inserir o novo texto. Na barra lateral direita, é possível aumentar a fonte, centralizar o texto, alterar a cor, entre outras opções.

É possível também excluir todo o componente ou toda seção a qual este componente pertence, como mostra na imagem abaixo:

Outra opção é poder alterar as imagens, como mostra na imagem abaixo. Clicando na imagem padrão do template, basta procurar na lateral direita a URL da nova imagem e inseri-la.

Abaixo, veremos o Portfólio criado com a ferramenta.

Concluindo:

Neste artigo vimos o quão fácil é criar uma página web com o Pingendo, mesmo que você não tenha tanto conhecimento em programação.

Vale ressaltar que, apesar de ser uma ferramenta de fácil utilização, é importante aprender as tecnologias que envolvem a criação de páginas web (HTML/CSS/JavaScript) pois, desta forma, você poderá criar páginas personalizadas ou até mesmo manipular o código dos templates utilizados pelo Pingendo.

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.

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 /.

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?

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.

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.

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

Olá Web Developers!

No post anterior vimos as propriedades que usamos no container ao trabalhar com Flexbox. 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 (elementos filhos).

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

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>

order

Por padrão, os itens de um Flex Container são exibidos na ordem presente no HTML.

Com a propriedade order nós podemos alterar a ordem dos elementos. O valor deve ser um número inteiro, negativo ou positivo.

flex-grow

Indica o quanto um item pode crescer caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter duas vezes mais espaço do que os outros.

flex-basis

Define o tamanho padrão de um elemento antes do espaço disponível ser distribuído. O valor pode ser em px, %, em, etc.

Se o valor for auto, ele irá olhar para o valor de width e height do item.

Se o valor for content, ele irá olhar para o tamanho do conteúdo do item.

flex-shrink

Indica o quanto um item pode encolher caso seja necessário. Deve ser um número inteiro positivo.

Isso significa que se todos os itens tiverem o valor 1, o espaço disponível será distribuído igualmente a todos eles.

Caso um dos itens tenha o valor 2, este item poderá ter metade do espaço do que os outros.

flex

Esta propriedade é apenas um atalho para flex-grow, flex-shrink e flex-basis, nos permitindo declarar os valores em uma única propriedade.

.item.selected{
    flex: 2 4 50px;
}

align-self

Você deve se lembrar da propriedade align-items que vimos no post sobre as propriedades do container.

A propriedade align-self nos permite sobrescrever o valor desta propriedade para um único item. Assim podemos, por exemplo, colocar um único item no final de uma linha enquanto todos os outros estão no começo.

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/

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.

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.

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/

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 tamplete e seu download, feito através do link: https://www.bootstrapdash.com/product/star-admin-free/

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!

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.

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/

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;
}
}

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.

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;
}

JUNTE-SE A MAIS DE 150.000 PROGRAMADORES