- Página Inicial
- Códigos CSS Prontos
- Efeito Sepia Css
- Voltar
Efeito Sepia Css
A função CSS sepia
converte a imagem inputada em sépia, dando uma aparência mais amarelada/marrom e quente.
O efeito obtido com aplicação desta função de filtragem é o de converter as cores da imagem para tons sépia. Os valores CSS possíveis para o parâmetro desta função são a porcentagem ou um número expressando uma porcentagem. Valores negativos são inválidos. O valor igual a 100% ou 1 resulta em imagem totalmente em tons sépia e o valor igual a 0% ou 0 é o valor padrão, isto é, a imagem original. Valores maiores que 100% são permitidos mas causam o mesmo efeito que o valor 100% ou 1.
Veja na pratica neste tutorial ensinaremos como criar um efeito Sepia
com css
.
Nesta seção, projetaremos uma estrutura simples na tag <article>.
temos dentro da tag <div> as tags <img>,<h2>,<p>, e a tag <a>. Essas tags usaremos para criar a nosso Efeito Sepia
.
Vamos Adicionar o HTML
<article class="box-article"> <div class="box efeito-sepia"> <img src="uploads/imagem.jpg" alt="Front-end"> <h2>Front-end</h2> <p><a href="#" target="_blank" title="Leia mais">Leia mais</a></p> </div> </article>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para projetar a nosso Efeito
.Sepia
.box-article { max-width: 420px; width: 100%; height: 100%; padding: 10px; margin: auto; } .box { position: relative; max-height: 300px; border-radius: 4px; overflow: hidden; box-shadow: 1px 0px 1.2px 0px #e3e3e3; background-color: #000000; } .box h2, .box p { position: absolute; color: #fff; z-index: 2; width: 100%; transition: opacity 0.2s, transform 0.3s; } .box h2 { font-weight: 500; font-size: 22px; margin-bottom: 0; letter-spacing: 1px; } .box p { bottom: 0; font-size: 14px; letter-spacing: 1px; } .box h2, .box p { position: absolute; color: #fff; z-index: 2; width: 100%; transition: opacity 0.2s, transform 0.3s; } .box h2 { font-family: 'open_sansbold'; font-size: 32px; margin-bottom: 0; letter-spacing: 1px; text-shadow: 3px 1px 5px #000; } .box p { bottom: 0; font-size: 18px; font-weight: bold; letter-spacing: 3px; } .box p a{ font-family: 'open_sansbold'; text-decoration: none; color: #fb0000; } .box img { position: relative; width: 100%; height: 100%; z-index: 1; transition: all 0.3s ease-in-out; } .efeito-sepia h2 { top: 50%; transform: translatey(-50%); text-align: center; margin: 0; } .efeito-sepia p { text-align: center; top: calc(50% + 25px); transition: all 0.6s ease; opacity: 0; } .efeito-sepia:hover img { filter: sepia(90%); } .efeito-sepia:hover p { transition: all 0.6s ease; opacity: 1; }
Combinando as Duas seções acima Html + Css temos o seguinte Resultado!
Efeito Sepia Css
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
232 Visualizações
Deixe um comentário