17/09/2014

CSS Filters














Hallo! Como vão? Há quanto tempo, novamente -q Acho que já se passaram três dias desde a última vez que postei. E como essa blogosfera está parada, viu? Onde estão as postagens e a animação? -q É solitário ver a blogosfera tão inativa, dá uma sensação de pós-apocalipse -q Sério, esse lugar tá tão parado que eu olho pra minha vida fora da internet e ela parece ter muito mais graça ç-ç E olha que a vida da  tia aqui parece estar no replay eterno -q Vamos pessoal, cadê o tuntz tuntz e a animação? TT-TT
Beleza, indo ao assunto: postagem antiga do Akai no Hana! Lembram-se que eu iria passar para o Ushinai no Ame todos os tutoriais dele? Então, aqui está -qq Esse é um dos meus favoritos, CSS filters, como já diz no título. (não, sério? Achei que a postagem fosse sobre pinhão cozido -q ai que delícia, pinhão -q pinhão é laifi -q) Boa leitura!


Para que o efeito funcione corretamente em todos os navegadores, devemos usar códigos de acordo com o navegador.

Google Chrome: -webkit-
Mozila firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-

Para dar o exemplo do efeito, irei utilizar o -webkit-.


Invert (negativo)


















Esse efeito basicamente inverte as cores da imagens, é o efeito "negativo" mesmo. Se não me engano, ele vai numa escala de 0 à 100.


img{-webkit-filter: invert 100%;}

 Grayscale
















É aquele famoso efeito preto e branco, eu particularmente gosto desse. Ele vai em uma escala de 0% a 100%, assim como o invert.


img{-webkit-filter: grayscale 100%;}

 Sépia















Acho que esse é bem conhecido de todos nós, ele fica ótimo com qualquer layout (pelo menos eu acho). A escala também é em %


img{-webkit-filter: sepia 100%;}

Blur (desfoque)



















Como já deu para ver, o blur desfoca as imagens. Ao invés dos filtros anteriores, ele funciona em pixels.

img{-webkit-filter: blur 4px;}

Sintam o ctrl+c pairando sobre este post -q Eu até pensei em reescrever e fazer todo o resto de novo, mas eu achei que esse post estava muito bem explicado e que não tinha mais o que colocar ou melhorar.

 

4 comentários:

  1. realmente a blogosfera ta muito parada :c
    Amei os efeitos, principlamente o blur
    Com carinho, Hina || Aishiteru em Contos ||

    ResponderExcluir
  2. Yooo beleza!?
    Pois é acho que anda mesmo meio parada a blogosfera, mas deve ser por causa do início das aulas em Portugal e final das aulas aqui no Brasil (duas épocas que acabam ocupando todo e qualquer estudante Ç.Ç)
    Enfim, ''replay eterno'' está a minha vida, só estudos e estudos, sempre a mesma rotina, com os mesmo horários (logo, logo entro em colapso Ç.Ç).
    Bem sobre o tutorial, adoro esses efeitos em imagens *u* sempre que possível os coloco nos meus lays, porém já faz um tempinho que não uso esses, ultimamente tenho usado bastante o tutorial de opacidade nas imagens, mas houve uma época que utilizava muito o efeito preto e branco (afinal imagens em preto e branco são muito divas *-*)
    Kiss

    ResponderExcluir
    Respostas
    1. Pois é, acho que todo mundo está ocupado mesmo -q A escola não deixa brechas para os blogueiros, até mesmo eu que sempre dava um jeito de passar por aqui não estou tendo tempo -q
      O minha vida está do mesmo jeito ç-ç
      Esses efeitos são muito legais. Eu sempre costumava por esses efeitos na maioria de meus layouts, acho que ficam muito bons.

      Excluir

Comente,comentários incentivam quem traz o conteúdo mais sem sentido para esse blog! Gostamos de saber a sua opinião ou apenas ler o que vocês têm a dizer!
Ninguém nunca segue isso,mas por favor,sem comentários ofensivos ou grosseiros. Críticas são bem vindas,se forem construtivas.