| Maior acervo de vídeo aulas da web

Não consegue visualizar a vídeo aula?

Cores rgba no CSS3

Fala galera nessa video aula veremos como utilizar a propriedade rgba do css3 para aplicarmos transparencia em div. Abraços e até a próxima.

Você gostou dessa Vídeo Aula, então compartilhe com seus amigos

Artigos Relacionados

Comentários

  • http://www.designsilva.com.br Sivaldo Gomes

    Muito boa a vídeo aula, sem dúvida o Css3 eé sensacional!

  • http://www.blogdownsmaster.blogspot.com Lucas Silva

    vlw @Sivaldo Gomes

  • gustavo

    Boa a VA, porém muitas pessoas utilizam o IE, e esses tipos de efeitos não são aceitos, uma maneira alternativa é usar um programa para criar barras com transparencia.

  • http://www.blogdownsmaster.blogspot.com Lucas Silva

    @Gustavo concerteza, este é um problema que eu espero que um dia seja resolvido!

    • http://www.videoaulasbrasil.com.br David CHC

      @gustavo, pode trabalhar com transparência no IE utilizando a propriedade filter, e nos outros navegadores a propriedade opacity.

  • http://tutorial-city.net Eduardo Matos

    @Lucas,@gustavo
    Se o IE não suporta, problema dele, faça para os que suportam! Se nós formos esperar pelos navegadores agente NUNCA vai usar CSS3 e HTML5.

    Vou usar isso no meu próximo tutorial, foi bom você fazer essa aula! :p

    @David CHC
    Cuidado porque “opacity”‘ é diferente de “rgba”! “opacity” modifica a opacidade de todo o elemento, enquanto o “rgba” pode mudar (ou não) a opacidade de certos atributos, como o background ou a borda, independente do seu conteúdo.

    • http://www.videoaulasbrasil.com.br David CHC

      @Eduardo , mas para o exemplo dado na video aula, que seria uma tarja, se encaixaria opacity e filter. Mas vlw pela obs.

      Sobre o suporte do IE, tem tomar cuidado. Não se faz site para navegador, e sim para usuários. E pra isso necessita de pesquisa sobre site, publicado alvo, área acessadas, e navegadores mais utilizados no seu site. O grande problema entre nós desenvolvedores, é que as vezes pensamos na gente, na nossa facilidade, e esquecendo para quem estamos fazendo esse site, e sua finalidade e metas. Uma coisa é usamos todos os recursos, sabendo que tipo de usuário acesso o nosso site, outra coisa é usar os recursos sem saber quem será direcionado o site. Então é sempre bom tomar cuidado com “radicalismo”.

      Mas não quer dizer q não pode usar e testar. Mas veja sempre para quem é direcionado. Eu já cometi esse erro num site q tinha feito para um cliente, e depois para explicar pq as pessoas ficavam menos tempo do q deveriam, é complicado :D

  • Mateus

    Éh, realmente o IE ainda é um praga que continua assombrando as vidas dos desenvolvedores web, fazer o que neh? Espero que um dia essa ferramente seja abolida de vez de nossas vidas rs.
    Mas enfim, boa video aula e ótima dica para fazer efeitos, bem legal. Agora uma duvida, qual o programa que se usa para fazer as video aulas? achei interessante pela opcao de zoom, ai fica mais facil de ler os textos. Quero comecar a fazer umas video aulas. Agradeco desde ja a dica.

  • Mateus

    Concordo com voce David, sou desenvolvedor e tambem me preocupo com os usuarios, por isso que ainda dou suporte ao IE. Nao tem jeito, temos que nos preocupar com isso. Mas como usuário e opniao pessoal, odeio o IE. Tanto em suas funcionalidades como suporte. E desejo sim, como desenvolvedor, um dia nao precisar mais me preocupar com as peculiaridades dessa ferramenta.
    Mas como nosso amigo David disse, infelizmente, precisamos entender e dar suporta a todos os navegadores. Abraco.

    Ahh, nao responderam minha pergunta do comentario anterior sobre o programa para gravacao de video aulas :D

  • http://www.blogdownsmaster.blogspot.com Lucas Silva

    Bom me esqueci do opacity mas sabia da existencia! só não sabia que era possivel utilizar filter para transparencia no IE, mas concordo com o Eduardo matos eu acho que se se preocuparmos muito com o IE nunca vamos nos atualizar!

  • http://www.blogdownsmaster.blogspot.com Lucas Silva

    @Mateus o programa que eu utilizo é o Camtasia studio se quiser aprender a editar videos sugiro que utilize também o sony vegas é muito bom, mas quanto a aula utilizei o Camtasia Studio 6.0 abrs

  • http://tutorial-city.net/ Eduardo Matos

    Só uma curiosidade, até onde eu sei o Internet Explore 8 não dá qualquer suporte a transparência, seja por CSS ou por filtros (javascript).

    • http://www.videoaulasbrasil.com.br David CHC

      @Eduardo , dei uma olhada, vc teria q usar algo assim pra o IE8 (-ms-filter)

      -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

  • http://tutorial-city.net Eduardo Matos

    @David CHC
    Bom saber, essa eu não conhecia!
    Voltando ao que falei lá em baixo (da diferença entre “rgba” e “opacity”), no caso desse tutorial não é a mesma coisa…. se usar “opacity” o texto tb vai ficar transparente.

    • http://www.videoaulasbrasil.com.br David CHC

      @Eduardo , isso é verdade, mas isso é facil resolver, pelo menos eu faço assim, coloco uma tag para o texto, como span, para evitar isso.

  • http://tutorial-city.net Eduardo Matos

    @David CHC
    Parece que nem assim funciona. Tenta modificar aí, se der certo clica em update e me manda o link.
    http://jsfiddle.net/7pqGz/

    • http://www.videoaulasbrasil.com.br David CHC

      @Eduardo , ele dá um “falso positivo”. Veja só : http://jsfiddle.net/davidchc/7pqGz/1/

      Colocando a cor do texto como branca, parece q funciona, mas se vc mudar para outra cor, ai vc percebe a transparencia sendo aplicados nos elementos filhos. Como sempre utilizei, opacity para legenda, e a cor branca, me dava essa falsa sensação q não aplicava o efeito no elemento filho

  • http://tutorial-city.net Eduardo Matos

    @David CHC
    Pois é, não funciona mesmo…. o RGBA/HSLA veio pra nos salvar!
    Tô fazendo um site onde ignoro os navegadores que não suportam essa propriedade (uso background sólido).

    • http://www.videoaulasbrasil.com.br David CHC

      @Eduardo dá para fazer isso, quando não afeta a funcionalidade do site. Mas como falei antes, tem tomar cuidado, pq as vezes detalhes podem influenciar a navegação de um usuário, mesmo q a gente pense q não influencia :D . As vezes colocamos um determinado efeito para algo q vc deseje chamar cliques, ou finalizar algo, e só funciona esse efeito em alguns navegadores, e quando vc for ver as estatisticas, vc só vai lembrar nesse detalhe, q parece q não vai interferir, só depois vc bateu bastante a cabeça q vai perceber o pq isso está acontecendo :D . Tbm sou a favor usar os recursos, e não se limitar por navegador x, se formos esperar tudo, o IE não implementou coisas do CSS 2.1 , imagina o CSS3 :D

  • http://webdinamic.net cidicley cintra

    boa tarde, gostei muito desta nova materia, parabens, apenas uma duvida, como fazer a div com cantos arredondados para o IE e também a opacidade nao está funcionando no IE8

  • http://www.arquitetodaweb.com Lucas Silva

    @cidicley cintra (minha opinião) => ODEIO O INTERNET EXPLORER COM TODAS AS MINHAS FORÇAS e quanto a opacidade o david e o Eduardo matos ai em baixo nos comentários dizem como aplicar para IE utilizando o opacity(); ja o arredondamento de div só com javascript mesmo!

  • http://tutorial-city.net Eduardo Matos

    @cidicley cintra
    De uma maneira geral eu não ligaria pra cantos arredondados no internet explorer, mas se você precisar muito posso te recomendar o CSS 3 Pie.

  • William César Santos Ramalho

    Gostei do tutorial vou adicionar aos meus favoritos!


Hospedado por Hostnet - Hospedagem de sites

VAB - Todos os direitos reservados - 2008 / 2012

Developed by: MX Web Studio

Mais em Tableless (19 of 58 articles)