CSS

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

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

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

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

Tela do painel da TreinaWeb ao concluir um curso

Prévia do resultado:

Criando o Fundo do Céu

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

<div class="container" >

</div>

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

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

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

A primeira estrela no céu

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

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

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

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

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

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

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

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

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

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

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

Animando as Estrelas

Vamos iniciar a animação das nossas estrelas.

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

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

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

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

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

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

Deixando a animação infinita

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

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

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

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

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

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

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

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

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

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

Entendendo a Animação Infinita de Fundo

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

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

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

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

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

Melhorando a animação com Parallax

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

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

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

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

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

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

Desenvolvedor Front-end Sênior
Formação: Desenvolvedor Front-end Sênior
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

O que é Electron?

Sabemos que o JavaScript é uma das principais linguagens de desenvolvimento do mundo, porém, muitos acreditam que só é possível desenvolver aplicação web e mobile com esta tecnologia. Pensando nisso, a equipe do Github lançou o Electron, uma tecnologia que permite a criação de aplicações desktop utilizando tecnologias web (HTML, CSS e JS).

O que é o Electron

O Electron é um framework de código aberto para desenvolvimento de aplicações desktop utilizando tecnologias web (HTML, CSS e JS). Originalmente criado por Cheng Zhao, é atualmente mantido pela equipe de desenvolvimento do Github e por toda a comunidade.

Atualmente na versão 4.0, e mantido sob a licença MIT, o Electron permite a criação de aplicações multiplataforma (Windows, macOS e Linux) utilizando uma mesma tecnologia e com interfaces nativas. Por utilizar JavaScript, possui diversos adeptos pelo mundo, já que esta linguagem é amplamente utilizada.

Electron - Criação de aplicações desktop
Curso de Electron - Criação de aplicações desktop
CONHEÇA O CURSO

Principais vantagens

Dentre diversas vantagens do uso do Electron, podemos citar como principais as seguintes:

  • Multiplataforma: O app desenvolvido com Electron poderá ser executado em Windows, macOS ou Linux;
  • Open source: O Electron é desenvolvido pela equipe do Github e mantido pela comunidade, tendo seu código-fonte totalmente aberto;
  • Instaladores: Com o Electron, podemos criar instaladores personalizados para as aplicações;
  • Tecnologias web: Com o Electron, criamos aplicações utilizando HTML, CSS e JS, tecnologias bem difundidas e utilizadas por vários desenvolvedores;
  • Interfaces nativas: Com o Electron, podemos criar interfaces que se adaptem ao sistema operacional que está executando o software.

Principais aplicações

O Electron é muito utilizado no mercado. Diversas são as empresas que utilizam esta tecnologia para desenvolver suas aplicações Desktop.

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

Dentre estas diversas empresas, podemos citar as seguintes:

  • Slack: Um dos principais serviços de chat do mundo. Feito especialmente para comunicação entre times de diversos segmentos;
  • Visual Studio Code: Um dos principais editores de textos utilizado para criação de aplicações web. Criado pela Microsoft, o VSCode é tão completo que é constantemente confundido com uma IDE;
  • Hyper: Interface de terminal para substituir o prompt de comandos ou o terminal do macOS e Linux;
  • Insomnia: Aplicativo para testes de APIs RESTful;
  • Atom.io: Editor de textos utilizado para criação de aplicações web desenvolvido pelo Github. É, atualmente, um dos projetos com maior número de contribuidores da comunidade;
  • Discord: Um dos principais chats do mundo. Muito utilizado por jogadores de jogos eletrônicos para se comunicar durante as partidas.
HTML5 e CSS3 - Desenvolvimento web Básico
Curso de HTML5 e CSS3 - Desenvolvimento web Básico
CONHEÇA O CURSO

Podemos concluir que…

Com o Electron, é possível desenvolver qualquer tipo de aplicação desktop, desde um chat para comunicação até um substituto para o prompt de comandos o Windows, utilizando tecnologias web (HTML, CSS e JS), tornando uma ótima opção para desenvolvedores que já possuem conhecimento em tecnologias web e desejam desenvolver aplicações desktop.

CSS – Definindo o cálculo de dimensões com box-sizing

Olá web developer! Ao estilizar elementos no CSS, muitas vezes precisamos definir dimensões. Porém, o modo como as dimensões dos elementos são calculadas podem causar alguns problemas.

Onde quero chegar com isso? Bom, algumas pessoas desconhecem que temos duas maneiras de calcular o tamanho dos elementos. Você conhece?

Tamanho baseado no conteúdo

Imagine uma div com um texto dentro. Vamos definir sua largura como 100px e altura também sendo 100px. Isso deveria resultar em um quadrado, já que largura e altura estão iguais, certo? Mas e se eu colocar uma margem interna (padding) de 50px à esquerda? Qual será o tamanho?

.box{
    width: 100px;
    height: 100px;
    padding-left: 50px;
}

Veja que o resultado foi um retângulo com uma largura de 150px. A forma padrão de se calcular o tamanho de um elemento é a soma de sua largura ou altura (width ou height), margem interna (padding) e grossura da borda (border).

Isso pode causar problemas em algumas ocasiões. Imagine que agora a gente queira criar um elemento que preencha 100% da largura de seu pai, mas que também tenha uma margem interna para que o texto não fique encostado em suas bordas. Para isso, vou criar um container para essa nossa caixa:

.container{
  width: 100px;
  height: 100px;
  border: 5px solid rgba(0,0,0,0.5);
}

E vou mudar a nossa caixa agora para que a largura seja 100% ao invés de deixar 100px fixos. Assim, nossa caixa poderá preencher dinamicamente dependendo do tamanho do elemento pai.

.box{
    width: 100%;
    height: 100px;
    padding-left: 50px;
}

Teremos o seguinte resultado:

Veja que a nossa caixa ultrapassou o tamanho do seu elemento pai, pois o padding-left de 50px foi somado à largura, resultado em uma largura total de 150px. Isso pode ser a causa de problemas quando vamos definir dimensões de um elemento dentro de outro e o layout acaba quebrando quando pensamos que deveria estar tudo certo.

Tamanho baseado nas bordas

Para evitar o problema mostrado anteriormente, podemos usar a propriedade box-sizing para indicar como queremos que o navegador calcule as dimensões dos elementos. O valor padrão do box-sizing é content-box. Veja o que acontece quando alteramos para border-box:

.box{
    width: 100%;
    height: 100px;
    padding-left: 50px;
    box-sizing: border-box;
}

O box-sizing com o valor border-box faz com que o navegador não calcule a dimensão de um elemento somando bordas e margens com altura e largura.

Com content-box, ao definir width: 100px, o interior (conteúdo) do elemento terá 100px, mas por termos padding-left: 50px, o tamanho total do elemento será 150px.

Com border-box, se definirmos por exemplo, width: 100px, não importa se colocarmos padding-left: 50px, o tamanho final do elemento será os 100px que definimos em width. Mas como definimos 50px de padding-left, agora o interior do elemento terá apenas 50px de espaço para que o elemento possua 100px de largura no total.

Para evitar problemas, muitas pessoas gostam de forçar o comportamento de todos os elementos e pseudo-elementos como border-box usando o seguinte código:

*, *::before, *::after {
  box-sizing: border-box;
}

Dependendo do que você está criando, se está trabalhando com texto, criando layouts, etc, cada comportamento pode ser o mais indicado.

CSS – Altura automática proporcional à largura sem JavaScript

Olá Web Developer! Hoje em dia precisamos desenvolver páginas para os mais variados tamanhos de telas. Isso está cada vez mais simples, principalmente com o Flexbox e CSS Grid. Porém, não temos ainda uma propriedade no CSS que nos permite definir a proporção das dimensões de um elemento. Aqui nós aprenderemos como é fácil fazer isso.

Padding com porcentagem

Algo que pode passar despercebido por alguns desenvolvedores é usar porcentagem como valor das propriedades de margem interna (padding).

Quando definimos um valor em porcentagem, estamos querendo que aquele valor seja relativo a um outro valor. Então quando definimos que queremos um width de 50%, estamos dizendo que queremos que ele tenha a metade do valor do width do elemento pai. Se este tiver 200px de largura, o filho com 50% ficará com 100px de largura.

Quando usamos porcentagem no padding, ele não irá pegar a porcentagem relativa ao padding do elemento pai, e sim, proporcional à largura do pai. Veja no exemplo interativo abaixo:

<div class="box-container" >
    <div class="box-content" ></div>
</div>

Note que eu não defini nenhuma altura para .box-container, apenas largura. E no seu elemento filho, .box-content, mandei ele ter altura igual a 0 e coloquei uma porcentagem em padding-bottom (também poderia ser padding-top). Assim, sua dimensão vertical ficará por conta do padding-bottom.

Como dito anteriormente, a propriedade padding utiliza a largura do elemento pai como base para calcular seu valor quando utilizamos porcentagem. Então se colocarmos o pai com width: 200px e o filho tiver padding-bottom: 50%, sua altura será 100px. Como o elemento filho tem sua altura modificada, o elemento pai também terá. Podemos aproveitar isso para criar um container que mantenha as proporções entre largura e altura. Assim, um elemento que tem sua largura modificada pela largura da tela manterá uma altura proporcional.

Teste com outros valores. Um bom exemplo é deixar o padding-bottom com valor 100%. Isso fará com que a altura do elemento filho seja igual à largura do elemento pai, resultando em um quadrado, não importa o quanto a largura do elemento pai seja modificada.

Só um detalhe: eu defini width do .box-container em px apenas para dar um exemplo, mas você pode usar qualquer unidade para a largura do elemento pai, como % ao criar um elemento responsivo para a sua página.

Criando um container reutilizável

Agora que já entendemos o conceito, vamos arrumar esse elemento para que ele seja reutilizável em qualquer projeto. Vamos por partes para entender como ele vai funcionar até chegar em um resultado bem simples e limpo.

Aproveitando pseudo-elementos

Para não ter o trabalho de escrever no HTML um elemento como container que cuidará da largura e um elemento filho apenas com padding-bottom para cuidar da altura, podemos aproveitar os Pseudo-Elementos. Assim criaremos uma única tag e o CSS automaticamente irá inserir o responsável pela altura.

Vamos então remover o box-content e passar suas propriedades para um pseudo-elemento de box-container.

<div class="box-content" ></div>

E nosso CSS está no exemplo abaixo:

Ok, não temos mais uma div vazia, passamos essa função para um pseudo-elemento que já está crescendo, mas o elemento pai não está mais. O pseudo-elemento também não possui mais largura, pois sua dimensão é baseada no seu conteúdo, e definimos content como vazio (“”). Mas isso não importa, já que ele é apenas um controlador de altura. O que faremos agora é arrumar para que o elemento pai possa ter sua altura modificada.

Arrumando os pseudo-elementos

A primeira coisa a se notar é que o pseudo-elemento está ocupando espaço. Isso pode atrapalhar o conteúdo que quisermos colocar no nosso container. Um jeito simples para ele não atrapalhar nosso conteúdo é colocar um float.

A propriedade float sempre precisa ser limpada para evitar problemas no layout. Podemos fazer isso usando outro pseudo elemento, que colocaremos no ::before. Como por padrão os pseudo-elementos crescem de acordo com seu conteúdo e aqui também colocamos o content vazio, vamos mudar seu display para block para ele ter um tamanho.

Nosso código ficará assim:

Deixando o elemento reutilizável

Veja que agora temos uma única tag que podemos controlar a altura apenas mudando a sua largura. Mas para que o elemento seja realmente reutilizável, precisamos permitir que o desenvolvedor possa definir qual a proporção daquele elemento. Podemos aproveitar as variáveis CSS. Se você ainda não sabe como usá-las, eu mostro no nosso canal do YouTube no vídeo Variáveis com CSS puro.

Vamos criar uma variável CSS que vai indicar qual a proporção que deve ser mantida. Vamos chamar de aspect-ratio e colocar diretamente na tag. Vamos supor que queremos a mesma proporção de telas widescreen, que é 16:9. Vamos criar a variável com o valor 16/9. Assim poderemos utilizar este valor com a função calc() para calcular a porcentagem, afinal é mais simples de entender 16/9 do que 56.26%, não é mesmo?

<div class="box-content" style="--aspect-ratio: 16/9" ></div>

E o nosso novo padding-bottom está no exemplo abaixo:

Simplificando ainda mais o HTML

O nosso elemento com dimensões proporcionais está pronto. Temos um CSS simples e para utilizar basta criar um elemento com a classe box-content e colocar uma variável aspect-ratio para definir a proporção. Se quiser, você pode parar por aqui mesmo.

Mas se precisamos definir a variável de controle de proporção, não seria mais simples definir estes estilos simplesmente para elementos que possuem essa variável, nos poupando do trabalho de ter que colocar a classe box-content? Podemos fazer isso apenas alterando os seletores.

Vamos trocar o seletor .box-content por [style*="--aspect-ratio"]. Esse seletor basicamente está indicando para pegar os elementos que possuem --aspect-ratio em alguma parte dentro do atributo style.

Veja como nosso HTML ficará bem mais simples:

<div style="--aspect-ratio: 4/3" ></div>
<div style="--aspect-ratio: 16/9" ></div>

E nosso CSS:

Agora você tem um container reutilizável que mantém a proporção entre largura e altura. Para deixá-lo responsivo, basta deixar seu width como 100%. Assim ele mudará de tamanho de acordo com o seu elemento pai.

Utilizando arquivos estáticos no Flask

No último artigo dessa trilha, vimos como retornar páginas HTML em requisições Flask e, assim, melhorar a interação da nossa aplicação com seu usuário. Porém, normalmente, há o uso de arquivos estáticos (JS, CSS e IMG) para melhorar a aparência das nossas páginas e, consequentemente, a experiência do usuário. Sendo assim, veremos neste artigo como incorporar estes arquivos ao nosso projeto Flask.

Criando diretório dos arquivos estáticos

É uma boa prática adotada pela comunidade que todos os arquivos estáticos de uma aplicação Flask sejam armazenados em um diretório “static” na raiz do projeto e, dentro deste diretório, uma nova pasta contendo os tipos de arquivos estáticos (CSS, JS e IMG), como podemos ver abaixo:


Para este projeto, iremos usar o Bootstrap como CSS. Para isso, realizamos o download do arquivo .min.css do framework (https://getbootstrap.com/docs/4.3/getting-started/download/) e armazenamos no diretório “static/css”, como vimos na imagem acima.

Ao realizar este procedimento, o Flask já estará apto a utilizar este arquivo CSS no projeto, bastando apenas importá-lo em nosso template.

Flask - Fundamentos
Curso de Flask - Fundamentos
CONHEÇA O CURSO

Utilizando arquivos estáticos no template

Agora que já configuramos nosso projeto para armazenar arquivos estáticos, precisamos importá-lo em nosso template. Para isso, é muito simples. O primeiro passo é criar uma tag link no head do arquivo HTML e referenciar nosso arquivo bootstrap.min.css:

Agora, no href do link, indicamos onde se encontra o arquivo estático que queremos utilizar. No nosso caso, ele se encontra em static/css/bootstrap.min.css. Sendo assim, temos que passar, como primeiro parâmetro do método url_for, o diretório raiz dos arquivos estáticos. Após isso, informamos o restante do caminho até o arquivo no atributo filename, como vemos acima.

Agora, já estamos aptos a usar o arquivo do bootstrap em nossos templates e, com isso, personalizar nossas páginas HTML. Utilizando como base o tema Jumbotron do bootstrap, conseguimos criar uma página com todo o poder do framework:

Concluindo

A utilização de arquivos estáticos em projetos Flask é, realmente, muito simples. Apenas precisamos criar um diretório para comportar estes arquivos e importá-los em nossos templates utilizando o método url_for do Jinja2.

Porém, sabemos que o conteúdo de uma página HTML nem sempre é estático. Muitas vezes este conteúdo é enviado pela requisição e exibido no HTML… Bom, como fazer isso? É exatamente o que veremos no próximo artigo desta série 🙂

CSS: Aprenda a Criar o Efeito de Flip Cards

Olá Web Developer! Hoje vamos aprender a criar o efeito de Flip Cards com CSS puro.

Esse efeito é muito interessante, e nos permite fazer com que um elemento gire. É um ótimo exercício para estudar animações e transformação 3D com CSS. Veja como ficará o resultado:

Iniciando o Espaço 3D

Como a animação CSS que vamos criar será 3D, precisamos criar um container para essa animação, indicando a sua profundidade. Vamos chamar esse container de flip-container. Ele servirá como o “espaço 3D” onde nossos elementos vão ficar.

<div class="flip-container" >

</div>

No CSS nós indicamos a profundidade do nosso container. Isso é feito com a propriedade perspective, que indica o quanto um objeto está longe do usuário. A profundidade é aplicada aos elementos filhos, e não ao próprio elemento com a propriedade de perspectiva.

Também aproveitamos para definir a altura e largura desse elemento.

.flip-container {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

Imagine esse container como o cubo da imagem abaixo:

Container 3D de imagem

Definindo o container das imagens

Como queremos um efeito de um cartão que gira, vamos criar um elemento que será container das duas imagens. Imagine ele como o elemento laranja da imagem abaixo:

Container de imagens 3D

Portanto, é esse elemento que vamos girar depois. Vamos chamá-lo de flipper

<div class="flip-container" >
    <div class="flipper" >

    </div>
</div>

Vamos definir sua largura e altura como 100%. Assim ele ficará com o mesmo tamanho do seu container. Para que ele mantenha a profundidade que definimos em seu elemento pai (flip-container) quando formos girá-lo, passamos o valor preserve-3d à propriedade transform-style.

.flipper{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

Definindo a Parte da Frente e de Trás

Para podermos separar melhor o que será frente e atrás, vamos criar um container para cada um: front e back.

<div class="flip-container">
  <div class="flipper">
    <div class="front">

    </div>
    <div class="back">

    </div>
  </div>
</div>

Assim será fácil reutilizar este efeito, pois basta colocarmos o que quisermos em cada uma das divs. Para este exemplo utilizarei uma imagem em cada div, mas você pode colocar o que quiser.

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</div>

Girando os elementos

Já vou mostrar como girar os elementos para facilitar o entendimento do que faremos depois.

Como dito anteriormente, o que vamos girar é o elemento flipper. Como queremos que ele mostre a outra face, girando na horizontal, vamos usar a propriedade transform e girá-lo 180 graus no eixo Y.

Imagem 3D - eixo de rotação

Então basta adicionarmos transform: rotateY(180deg) ao elemento flipper. Podemos fazer isso de várias maneiras, como colocar essa propriedade em uma classe CSS e adicionar a classe no flipper em um clique.

Neste exemplo faremos com que essa propriedade seja aplicada ao flipper assim que o usuário passar a seta do mouse em cima do elemento flip-container.

.flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}

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

Para que a rotação não ocorra de forma instantânea, e sim como uma transição, vamos adicionar o tempo de transição ao flipper com a propriedade transition. Vamos definir a velocidade da transição para a propriedade transform como 0,8 segundos.

.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

Arrumando a Posição dos Elementos

Ficamos com uma div em cima e outra embaixo. Para que as duas fiquem na mesma posição, vamos definir front e back com position: absolute. Para respeitarem a posição de seu elemento pai (flipper), vamos definir sua posição como relative.

Também vamos definir front e back com altura e largura como 100%, para que eles fiquem com o tamanho total de seu container.

.flipper{
    position: relative;
    ...
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}

Arrumando a Parte Visível

Já temos os elementos da frente e de trás posicionados. Porém, o elemento que é declarado por último sempre fica por cima. Isso faz com que agora nós apenas possamos enxergar a imagem que foi colocada em back.

Primeiro vamos girar back a 180 graus. Como ele inicialmente estará de costas para nós, vamos rotacioná-lo.

.back{
    transform: rotateY(180deg);
}

Agora teremos o front de frente para nós e o back de costas. Quando passarmos o mouse por cima, o front ficará de costas e o back de frente.

Para finalizar este efeito, podemos simplesmente indicar ao CSS que não queremos que seja exibida a parte de trás dos elementos. Assim veremos apenas o elemento que estiver de frente para nós. Fazemos isso passando o valor hidden para a propriedade backface-visibility.

.front, .back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

Efeito no Clique sem JavaScript

Podemos fazer esse efeito de Flip Card ocorrer após um clique usando apenas CSS. Basta usarmos um Checkbox escondido para definir quando o elemento deverá girar.

Primeiro adicione um checkbox antes de flip-container.

<input type="text" type="checkbox" id="switch" />

E vamos mudar a regra que indica quando o elemento deverá girar. Usando :checked podemos indicar uma regra que ocorre quando um checkbox está marcado.

Troque a regra em que colocamos o .flip-container:hover pela regra a seguir:

#switch:checked ~ .flip-container .flipper {
  transform: rotateY(180deg);
}

Veja que com isso o nosso elemento irá girar quando clicarmos no checkbox.

Podemos fazer o checkbox ser marcado ao clicar no nosso elemento. Basta usar o elemento <label> e indicar o id do nosso checkbox. Assim os cliques feitos no <label> são redirecionados ao checkbox.

Então vamos trocar a div flip-container por um label:

<input type="checkbox" id="switch" />

<label class="flip-container" for="switch" >
  <div class="flipper">
    <div class="front">
      <img src="https://picsum.photos/id/411/300/200" />
    </div>
    <div class="back">
      <img src="https://picsum.photos/id/249/300/200" />
    </div>
  </div>
</label>

Veja que agora você pode marcar o checkbox simplesmente clicando na imagem.

Para finalizar, basta esconder o checkbox com display: none.

#switch{
    display: none;
}

Você ainda pode mudar a direção da rotação, tendo os seguintes resultados:

O que é Ionic?

O Ionic é um Framework Open Source gratuito sobre a licença MIT para desenvolvimento de aplicações mobile híbridas.

Aplicações híbridas são aplicativos móveis construídos de maneira alternativa a aplicações nativa. São construídos, geralmente, utilizando HTML+CSS+JavaScript, desta maneira se tornaram extremamente populares, pois permite o desenvolvimento multiplataforma, utilizando o mesmo HTML para diferentes sistemas operacionais.

Aqui no Blog possuímos um artigo “App Nativo x App Híbrido: existe o melhor?” onde você pode conferir mais detalhes.

Ionic - Criação de aplicações mobile
Curso de Ionic - Criação de aplicações mobile
CONHEÇA O CURSO

Caso você não saiba o que é um Framework

O framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base onde as aplicações são construídas, um otimizador de recursos. Tem como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

Aqui no blog também possuímos um artigo sobre “Para que serve um Framework”.

Sendo assim, o que é o Ionic?

Desenvolvido por Max Lynch, Ben Sperry e Adam Bradley da Drifty Co., sua primeira versão teve seu lançamento em 2013 e atualmente encontra-se na versão 4.

Como dito acima, é um Framework para criação de aplicações móveis e desktop de alto desempenho e qualidade, que utiliza as tecnologias web HTML, CSS e JavaScript.

Como diz em seu site, o Ionic ajuda as equipes a criarem e distribuírem belos aplicativos híbridos em várias plataformas, possuindo foco na experiência do usuário ou interação do usuário com o aplicativo (controles, interação, gestos, animações).

Projetado para funcionar e ser exibido em diferentes plataformas, possui um design limpo, simples e funcional, com componentes padrões, tipografia, paradigmas interativos e diversos templates.

Além disso, possui um cliente de linha de comando (CLI) para gerenciar todo projeto criado com o Ionic. O CLI é uma ferramenta que cria aplicativos Ionic de forma rápida e fornece vários comandos úteis para facilitar o desenvolvimento utilizando o Framework. Possui um servidor de desenvolvimento integrado, ferramentas de compilação e depuração, entre outros benefícios.

Para instalar o Ionic CLI basta clicar aqui.

Por que aprender Ionic?

Além da principal vantagem no desenvolvimento de aplicações híbridas, muitas outras vantagens podem ser listadas quando pensamos no Ionic, dentre elas:

  • Estabilidade na criação de aplicações híbridas: Apesar de utilizar HTML, CSS e JS para o desenvolvimento das aplicações, o Ionic entrega um produto altamente estável e com desempenho similar ao de aplicativos nativos;

  • Multiplataforma: Com o Ionic, podemos desenvolver um único código que seja executado em diferentes sistemas operacionais, diminuindo o tempo de desenvolvimento de novas aplicações.

  • Menor tempo de desenvolvimento: Por criar aplicações multiplataforma, o tempo no desenvolvimento dessa aplicação se torna algo vantajoso em relação às aplicações nativas, uma vez que todo código criado será reutilizado para qualquer sistema operacional móvel, diminuindo assim o tempo de desenvolvimento;

  • Menor custo: Uma vez que poupamos o tempo em seu desenvolvimento, estamos poupando os custos desta aplicação, fazendo com que, criar aplicações multiplataforma torne-se algo mais rentável e menos custoso;

  • Prototipação: Criar telas no Ionic é extremamente fácil, pois possui uma ferramenta para esta finalidade, o Ionic Creator, que é uma ferramenta de “arrasta e solta” para facilitar as ideias de criação de suas aplicações que pode ser acessada neste link;

  • Documentação: Além de possuir uma grande comunidade, a documentação do Ionic é bastante completa, entre outras.

O futuro do Ionic

Como dito acima, o Ionic Framework encontra-se na versão 4, lançado no ano de 2019. Esta versão mais recente foi reprojetada para funcionar como uma biblioteca independente de componentes da web, com integrações para os mais recentes frameworks JavaScript, como o Angular, Vue e React. Ou seja, com a nova versão do Ionic, podemos criar aplicativos híbridos utilizando qualquer framework javascript, como Vue, Angular e React.

O Ionic é um excelente framework que, com certeza, poderá ser utilizado para criar aplicativos dos mais diversos segmentos. Sendo assim, este framework é um forte candidato a ser o seu próximo queridinho no desenvolvimento de aplicativos móveis.

Principais editores de código para desenvolvimento

Infinitas são as possibilidades na hora de escolher um editor de texto para utilizar no desenvolvimento dos seus projetos. Sendo assim, neste artigo veremos alguns editores de texto e suas principais características.

Brackets

Desenvolvido pela Adobe Systems, o Brackets é um editor de texto que facilita a criação de páginas web, mantendo seu foco principal no desenvolvimento web. Software livre e de código aberto, atualmente é mantido no GitHub sobre a licença MIT pela adobe e qualquer outro desenvolvedor que queira contribuir com suas melhorias. É um editor de texto escrito em JavaScript, CSS e HTML.

Atualmente encontra-se na versão 1.14 e possui disponibilidade de download nos sistemas operacionais Linux, Windows e Mac.

Dentre suas vantagens e características podemos citar:

  • Personalizável por meio de extensões;
  • Editores expandidos: permite visualizar trechos de código utilizados em outros arquivos;
  • Live Preview: Garante a visualização instantânea de alterações ao mesmo tempo que são executadas;
  • Suporte nativo a pré-processadores.

O download da ferramenta pode ser feito acessando no próprio site da Brackets.

Em sua página é possível contribuir, acessar seu suporte, blog, entre outras opções para te ajudar ainda mais na escolha deste editor.

Desenvolvedor Java Pleno
Formação: Desenvolvedor Java Pleno
A formação Desenvolvedor Java nível Pleno da TreinaWeb tem como objetivo a abordagem da API de acesso a bancos de dados relacionais e a API de manipulação de arquivos, respetivamente o JDBC e a I/O API. A definição e manipulação de arquivos XML e o JavaFX - a biblioteca para criação de aplicações desktop oficial do Java, também são abordados nesta formação. Por fim, ainda são abordadas as boas práticas de modelagem de bancos de dados relacionais e os recursos avançados para desenvolvedores dos bancos de dados MySQL e Oracle.
CONHEÇA A FORMAÇÃO

Sublime Text

Desenvolvido em Python, o Sublime Text é um ferramenta que visa a simplicidade e facilidade de uso. Lançado em 2008, é um editor de texto multiplataforma e proprietário que, dentre diversas características, podemos citar:

  • Comunidade ativa;
  • Extensões baseadas em Python;
  • Coloração de sintaxe personalizável;
  • Pré Visualização do código-fonte;
  • Autocomplete.

O download da ferramenta pode ser feita neste link, assim como acompanhar suas novidades, fórum e encontrar seu suporte.

VSCode (Visual Studio Code)

Criado pela Microsoft, o Visual Studio Code é um editor de texto open source, multiplataforma e gratuito com foco na construção de aplicações web.

Além de contar com uma comunidade extremamente ativa e suporte principalmente para a ASP.Net e Node.js., podemos listar como vantagens:

  • Autocomplete de código;
  • Navegação facilitada entre arquivos;
  • IntelliSense: Conclusões inteligentes com base em tipos de variáveis, definições de função e módulos importados;
  • Depuração de código diretamente do editor;
  • Suporte nativo ao Git;
  • Tarefa em execução;
  • Extensível e personalizável.

Para baixar a ferramenta, basta acessar este link, onde você encontrará sua documentação, blog, extensões e muito mais.

NotePad++

Ideal para iniciantes, o NotePad++ é um editor de código atrativo pela sua simplicidade.

Disponível somente para usuários Windows, é um editor open source sobre a licença GPL (General Public License) que além de suportar diversas linguagens de programação, traz como vantagens:

  • Autocomplete;
  • Sistema de definição de linguagem;
  • Divisão de tela;
  • Suporte para macros, plugins e muitos outros.

O download da ferramenta assim como visualizar suas características, comunidade, recursos e muito mais, pode ser feito a partir deste link.

Atom

Desenvolvido pelo GitHub sobre a licença MIT, o Atom é um editor de código open source, disponível para os sistemas operacionais Windows, Linux e Mac.

Semelhante ao Sublime, porém com alguns diferenciais, o Atom possui integração nativa com o GitHub e consegue trabalhar com comandos Git sem necessidade de nenhuma instalação adicional. Dentre várias características, podemos citar:

  • Editor de código multiplataforma;
  • Comunidade ativa;
  • Gerenciador de pacotes integrado;
  • Autocomplete;
  • Interface simples e amigável;
  • Personalizável.

Para baixá-lo, basta acessar neste link onde você também encontará seus temas, documentação, blog e muito mais.

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.

Desenvolvedor Front-end Pleno
Formação: Desenvolvedor Front-end Pleno
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos conhecer assuntos mais avançados do HTML5, CSS3 e JavaScript, conhecer o NPM, trabalhar com o RxjS (base do framework Angular), testes com Jasmine e uma pequena introdução ao TypeScript.
CONHEÇA A FORMAÇÃO

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

Olá Web Developers!

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

Itens

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

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

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

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

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

grid-area

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

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

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

grid-column e grid-row

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

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

Tudo em uma propriedade: grid-area

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

justify-self

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

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

align-self

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

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

place-self

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

© 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