PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

21/11/2017

Efeitos CSS3 - Animações

Resultado de imagem para css3

Efeito Animação - CSS3

No artigo Efeitos CSS3 - Transições entre propriedades  apresentamos a propriedade transition.

Neste artigo vamos falar de uma propriedade CSS3 bem legal também. Trata-se do efeito de animação, uma nova propriedade de estilo CSS que permite criar animações com blocos definidos pelas propriedades width, height e background-color.

CSS3 é a mais nova versão para as folhas de estilo Cascading Style Sheets (ou simplesmente CSS), onde podemos agora definir novos estilos para páginas web como: efeitos de transição, cantos arredondados, sombras, animações, desenhos, degrade, entre outros. Estes novos efeitos criados pelo CSS facilitaram a vida dos programadores, pois agora podemos fazer coisas de forma muito simples que precisariam de longos códigos escritos em JavaScript ou em outras linguagens.

Para compreender melhor a propriedade animation, veja o exemplo abaixo:










Atenção: Este exemplo não roda no Internet Explorer em nenhuma versão.

Usando a propriedade “animation” na prática

No nosso exemplo acima, usamos o seguinte código:

<style>
.anima {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:gold; left:450px; top:0px;}
    50%  {background-color:green; left:450px; top:200px;}
    75%  {background-color:blue; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
< /style>

<div class="anima"></div>

Veja passo a passo como funciona o código do nosso exemplo:

1) Primeiro vamos definir as características do elemento <div class=”anima”>, onde:

width: 100px (define a largura em pixel do nosso elemento div)

height: 100px (define a altura em pixel da nossa div)

background-color: red (define a cor do fundo da nossa div)

position: relative (define o elemento como flutuante na tela)

Ainda na classe anima, vamos definir a nossa animação:

animation-name: exemple (chamamos @keyframes denominado “exemple”)

animation-duration: 4s (tempo de cada ciclo da animação em segundos)

animation-interation-count: infinite (número de ciclos, no nosso exemplo definimos infinte, ou seja, número de ciclos indeterminado). Por exemplo, se colocasse o número 3, definiria que a animação iria durar 3 ciclos de 4 segundos.

2) Agora vamos definir os quadros da animação @keyframes exemple, onde:

0% define a posição inicial do ciclo e 100% a posição final. As demais posições 25%, 50% e 75% são posições intermediárias. Observe que dividimos o ciclo em 4 posições iguais. Entretanto, você pode criar quantas posições e da forma que desejar.

Observe que alteramos a cor do fundo (backgrround-color) nas posições 25%, 50% e 75%. As posições inicial e final são iguais as definidas inicialmente para a div class anima.

Utilizando as propriedade left e top, alteramos a posição da nossa div, em 450px na horizontal e 200px na vertical. Isto só é possível porque definimos classe da div anima como flutuante, ou seja, position: relative.

Animação alternada

No exemplo abaixo vamos utilizar mais duas propriedades de animação: animation-delay e animation-drection:










Para um melhor entendimento, veja abaixo o código completo do exemplo:

<style>
.anima2 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-direction: alternate;
}
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:gold; left:450px; top:0px;}
    50%  {background-color:green; left:450px; top:200px;}
    75%  {background-color:blue; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
< /style>

<div class="anima2"></div>

Onde usamos as novas propriedades:

animation-delay: 1s (define o tempo em segundos para começar a animação)

animation-direction: alternate (define a direção do ciclo como alternada). Você pode usar ainda animation-direction: reverse que faz a animação na direção inversa do que foi definido pela @keyframes.

Faça o teste colando os códigos acima no nosso editor HTML: Squids Editor

image

Para saber mais sobre as propriedade de animação CSS3, acesse o link: W3School

Para utilizar CSS nas páginas do site, leia nossos artigos:

Simulador CSS e HTML – Ótimo para iniciantes…

Como usar CSS no Wordpress

Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real

Como inserir códigos CSS no Blogger

Para conhecer mais sobre as propriedade de animação CSS3, acesse o link: W3School

byALF

19/11/2017

Novo site Cursos “Visual Dicas”

Resultado de imagem para visual dicas

Site Cursos Visual Dicas

É com grande satisfação que estamos lançando o novo site de cursos Visual Dicas. Em a parceria com o SIE - Sistema Integrado de Educação, do grupo IPED, estamos disponibilizando mais de 500 cursos em mais de 30 áreas distintas.

image

Veja os depoimentos dos alunos que fizeram os cursos IPED.

image

Não desperdice esta oportunidade. Cursos com até 15% de desconto.

Como acessar?

Para acessar nosso site clique no link: Cursos Visual Dicas

Angelo Luis Ferreira

Veja algumas áreas que podem ser de seu interesse (clique nos links).

Administração (109 cursos)

image

Programação e Desenvolvimento (34 cursos)

image

Gestão e liderança (65 cursos)

image

Informática (44 cursos)

image

Vantagens em estudar na plataforma Visual Dicas

a) Cursos 100% em vídeo;

b) Infraestrutura de ponta;

c) Ótimos professores;

d) Cursos disponíveis 24 horas por dia;

e) Plataforma online robusta e intuitiva.

d) Totalmente responsiva, onde você poderá estudar no computador, tablet ou celular.

Angelo Luis Ferreira

Para você conhecer melhor nossa plataforma, relacionamos alguns cursos gratuitos para você experimentar o que há de melhor em cursos online : Cursos grátis

Cursos por Área (lista completa)

3D e Games 15 cursos

Administração 109 cursos

Ambiental 9 cursos

Animações e Design 34 cursos

Arquitetura e Engenharia 9 cursos

Artesanato 20 cursos

Biomedicina 5 cursos

Comunicação, marketing e vendas 60 cursos

Concursos Públicos 24 cursos

Contabilidade 44 cursos

Cotidiano 120 cursos

Culinária, Gastronomia e Confeitaria 77 cursos

Cursos Profissionalizantes 3 cursos

Direito 44 cursos

Educação e Pedagogia 32 cursos

Educação Física e Esporte 20 cursos

Enfermagem 12 cursos

Ensino Religioso 2 cursos

Estética e Beleza 38 cursos

Evento, Turismo e Hotelaria 24 cursos

Farmácia 21 cursos

Finanças 15 cursos

Fisioterapia 15 cursos

Fotografia e Vídeo 15 cursos

Gestão e Liderança 65 cursos

Idiomas 11 cursos

Informática 44 cursos

Iniciação Profissional 152 cursos

Medicina 23 cursos

Medicina Alternativa 15 cursos

Música e Instrumentos 9 cursos

Nutrição 14 cursos

Odontologia 3 cursos

Programação e Desenvolvimento 34 cursos

Psicologia 15 cursos

Recursos Humanos 46 cursos

Reforço Escolar 17 cursos

Veterinária 2 cursos

byALF

12/11/2017

Série Arduino Básico #27 - Criando cores com Led RGB usando o teclado do computador

image

Série Arduino Básico

Continuando nossa Série Arduino básico, hoje mostraremos um projeto bem legal para você criar cores em um LED RGB através do teclado do seu computador. Neste projeto você controlará o Led RGB, enviando comandos do PC para o microcontrolador, usando o Serial Monitor do IDE do Arduino

Obs.: Fazendo o controle do brilho de cada um dos leds encapsulado em um Led RGB podemos misturar estes brilhos e produzir diversas cores diferentes. Combinando os valores de cada cor podemos criar até 16,7 milhões de cores diferentes (256 X 256 X 256).

Objetivo: Para fins didáticos, estudo do PWM (Pulse Width Modulation), valores RGB (Red, Green and Blue), comunicação serial e aplicações com LEDs.

Tudo para o seu Arduino!

No Squids Arduino você vai poder construir este projeto e aprender como ele funciona. Muito legal!!!

Obs.: Todos projetos foram testados pelo site www.squids.com.br/arduino que traz um tutorial completo para cada montagem com a lista de componentes, código do programa (sketch), simulação online, montagem do circuito e explicação detalhada do projeto.

Para ver todos projetos básicos publicados no Squids, acesse: projetos básicos

Led RGB controlado potenciômetro

Acesse o link: Projeto 27 - Criando cores com Led RGB usando o teclado do computador

Através de comandos digitados em seu computador, você poderá controlar o brilho das cores vermelho (R), verde (G) e blue (B) de um led RGB.

Para inserir os dados que irão gerar as cores no Led RGB será necessário utilizar o monitor serial do IDE do Arduino.

image

Veja abaixo o vídeo do projeto em ação:

Veja o tutorial completo em: Projeto 27 - Criando cores com Led RGB usando o teclado do computador

09/11/2017

Efeitos CSS3 - Transições entre propriedades

Resultado de imagem para css3

Transition - propriedade CSS3

Neste artigo vamos falar de uma propriedade do CSS3 bem legal. Trata-se do efeito transition, uma nova propriedade de estilo CSS que permite que você altere suavemente os valores de um elemento para outro, durante um determinado tempo.

CSS3 é a mais nova versão para as folhas de estilo Cascading Style Sheets (ou simplesmente CSS), onde podemos agora definir novos estilos para páginas web como: efeitos de transição, cantos arredondados, sombras, animações, desenhos, degrade, entre outros. Estes novos efeitos criados pelo CSS facilitaram a vida dos programadores, pois agora podemos fazer coisas de forma muito simples que precisariam de longos códigos escritos em JavaScript ou em outras linguagens.

Para compreender melhor a propriedade transition, veja o exemplo abaixo (passe o mouse sobre a imagem):

Observe que quando você passa o mouse sobre a imagem ocorre uma transição na largura (width) e na cor do fundo (background-color) de forma bem suave. Isto pode ser feito de uma maneira muito simples com o CSS3, utilizando a propriedade transition.

Usando a propriedade “transition”

Basicamente o código padrão desta propriedade é:

transition: propriedade tempo tipo;

Em propriedade definimos qual elemento queremos fazer a transição, seja width, height, background-color, etc (qualquer propriedade CSS). Para definir todas as propriedades podemos usar o atributo all.

Em tempo definimos a duração total para a transição, por exemplo: 1s, 2s, 10s. Quanto maior o tempo de duração, mais lento fica o efeito de transição.

Em tipo definimos como será distribuída a duração da transição: Veja abaixo os tipos de tipo para transição: liear, ease, ease-in, ease-out, ease-in-out. (Passe o mouse sobre as imagens para observar cada tipo de transição).

Note: Estes exemplos não trabalham no Internet Explorer.

linear

ease

ease-in

ease-out

ease-in-out

Usando a propriedade “transition” na prática

No nosso exemplo inicial, usamos o seguinte código:

transition: all 2s linear;

Observe que utilizamos:

  • Propriedade: all (serve para todas as propriedades utilizadas)
  • Tempo de duração: 2s (2 segundos)
  • Tipo: linear (transição é feita com velocidade linear).

Para um melhor entendimento, veja abaixo o código completo do exemplo:

<style>

.efeito {
    margin: auto;
     margin-top: 10px;
    width: 300px;
    height: 300px;
    background-color: green;
    transition: all 2s linear;
}

.efeito:hover {
    width: 550px;
    background-color: orange;
}    
</style>

<div class="efeito"></div>

Faça o teste colando o código acima no nosso editor HTML: Squids Editor

Para utilizar CSS nas páginas do site, leia nossos artigos:

Simulador CSS e HTML – Ótimo para iniciantes…

Como usar CSS no Wordpress

Simulador gratuito para HTML, CSS e JavaScript – visualização em tempo real

Como inserir códigos CSS no Blogger

Para saber mais sobre a propriedade transition, acesse o link: W3School

byALF

30/10/2017

Chocolatey, a ferramenta que todo desenvolvedor deveria conhecer

image

O que é Chocolatey?

O Chocolatey é uma ferramenta open-source para instalar e gerenciar pacotes de softwares e aplicativos para o Windows. Com o Chocolatey você pode instalar, configurar, atualizar e desinstalar programas de forma muito mais fácil e rápida.

Por exemplo, para você instalar o Google Chrome, Safari e o Firefox no seu computador, você precisará acessar o site de cada um, baixar o executável e instalar um a um. Com o Chocolatey você executa apenas esse comando no Power Shell ou no Prompt de Comando: cinst GoogleChrome safari Firefox

PowerShell

image

Prompt Comando

image

Pacotes de instalação

A lista completa dos pacotes você encontra aqui: https://chocolatey.org/packages

image

Como instalar e usar o Chocolatey

Para instalar, leia o artigo: Como instalar o Chocolatey no Windows

image

Para usar o Chocolatey para instalar programas, leia: Como usar o Chocolatey para instalar programas no Windows

image

byALF

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More