Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais HTML - 15
Tutorial para Converter uma Imagem Colorida para Tons de Cinza

Neste tutorial veremos como pegar uma imagem colorida e convertê-la em tons de cinza.
Neste artigo, veremos como criar uma versão em tons de cinza de uma imagem.
Tendo uma imagem colorida, o objetivo é convertê-la em tons de cinza usando propriedades CSS. Para converter uma imagem em tons de cinza, usamos principalmente a propriedade de filtro CSS. O recurso de filtro é usado principalmente para alterar a aparência visual de uma imagem.
Sintaxe:
filter: grayscale():
1º Método:
Para transformar uma imagem em tons de cinza, aplique o filtro tons de cinza (100%).
Vejamos alguns Exemplos:
Exemplo 1: Neste exemplo vamos mostrar como converter uma imagem colorida em tons de cinza:
<!DOCTYPE html> <html> <head> <title>Como Converter uma Imagem Colorida para Tons de Cinza</title> <style> img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } h1 { color:red; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <center> <h1>Simulados e Tutoriais</h1> <h2>Imagem com tons de cinza</h2> <img src="https://simuladosetutoriais.com/tutoriais/html/imagens/globo.png" width="150px" height="150px" alt="Filtro aplicado" /> </center> </body> </html>
Veja na imagem abaixo o resultado desse código depois de executado:

2º Método:
Esse método consiste em utilizar apenas um percentual de tons de cinza no filtro.
Exemplo 2: Neste exemplo vamos mostrar como converter uma imagem com apenas 70% de tons de cinza. Você poderá ver a differença entre as duas imagens passando o mouse sobre a imagem. Confira:
<!DOCTYPE html> <html> <head> <title>Como Converter uma Imagem Colorida para Tons de Cinza</title> <style> img { -webkit-filter: grayscale(70%); filter: grayscale(70%); } img:hover { -webkit-filter: grayscale(0); filter: none; } h1 { color:red; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <center> <h1>Simulados e Tutoriais</h1> <h2>Imagem com tons de cinza</h2> <img src="https://simuladosetutoriais.com/tutoriais/html/imagens/globo.png" width="150px" height="150px" alt="Filtro aplicado" /> </center> </body> </html>
Veja na imagem abaixo o resultado desse código depois de executado:

<< Tutorial para Incluir uma Imagem em uma Página Web
Tutorial para Criar um Calendário >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino