Desenvolvedor Web Blog

Filtro para imagem. O estilo da pagina tem o poder de encantar o usuário e as imagens de baixa qualidade ou com edição ruim pode prejudicar. Em alguns casos se torna necessário editar uma imagem para colocar algum efeito que vai melhorar ou dar mais evidencia, e para isso é costume editar a imagem em algum programa de edição de foto, mas se essa edição for algo simples podemos de modo fácil e rápido colocar filtros usando o CSS . Primeiro coloque uma imagem e uma class para o CSS aplicar o estilo de filtro. <img src="imagem.jpg" class="estilo-imagem" alt="" width="300px"> .estilo-imagem{ /*filtro*/ } Exemplos. Tipos de filtros. Filtro blur(px) , aplica um desfoque sendo 0px como normal ou padrão e qualquer valor superior o tanto de desfoque, sendo recomendado usar até 10px. filter:blur(5px); Filtro brightness(%) , aplica brilho na imagem sendo 100% como padrão sem efeito, qualq

Modal Vamos criar uma modal que pode conter propaganda sendo texto ou imagem variando de acordo com sua necessidade. Para isso será construída uma estrutura simples em HTML , com um pouco de CSS para criar o estilo da modal assim como a animação para mostrar e guardar e por fim um pequeno Javascript para executar a animação. Primeira parte No HTML vamos usa uma DIV principal que vai conter a modal, essa DIV principal será alinhado no centro e no top da pagina sendo fixo na tela. Na segunda DIV será a propaganda, dentro dela vai conter um paragrafo que  será onde você vai colocar sua propaganda e vai conter um botão para desativar.   <div class="propaganda-alinhar-1">                        <div class="propaganda-1 In-top">         <p>aqui fica propaganda</p>                 <a href="#" id="fechar1" class="bt-propaganda" >x</a>     </div>  

Criar um botão Para criar um botão será utilizado a Tag HTML “ <a href=""></a> ”, que vai conter uma Class para criar o estilo CSS. O estilo básico de um botão consiste em Borda, Cor de fundo, Cor da fonte e Espaçamento interno, más um botão pode ir muito, além impressionando pelo efeito e estilo. Neste exemplo será criado um botão azul com fundo transparente, que vai ter um evento no HOVER e um extra no ACTIVE . .bt-azul{ border: 2px solid #03a9f4; padding: 5px 15px; border-radius: 5px 15px; font-size: 20px; color: #03a9f4; background-color: transparent; text-decoration: none; transition: 0.6s; cursor: pointer; margin: 10px; } .bt-azul:hover{ background-color: rgba(3, 169, 244, 0.60); color: #fff; box-shadow: 0px 0px 10px 2px rgba(23,209,255,0.8); } .bt-azul:active{ box-shadow: 0px 0px 5px 0px rgba(23,209,255,0.5); } Na class “ .bt-azul ” foi definido o estilo básico que será visual

Overlay Fade Criar um efeito overlay pode ser muito útil quando tem a necessidade de um efeito Hover, assim permite sobrepor uma div com outro conteúdo criando um efeito interessante.   Vamos iniciar criando o HTML , com uma div principal onde fica a imagem e outra div dentro dela que vai conter um texto. <div class="limite"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaphjgLO9MW3ubrVvy1GJVa5p-odTKZbdulJJM65N24zhSvUaBR-HzgO7hUqVCtrEPwKYFfs-eD8jTGGZBZdDijGo5_QBTYE-1lfoZR-Hn6u83uxMIrm1G8JakAbe_YDfxwj5mPhOMTUPV/s320/CSS32.jpg" alt="css" class="img"> <div class="overlay"> <h2>Overlay Fade</h2> </div> </div> Preparando o CSS Vamos iniciar o CSS  da div principal, primeiro será necessário definir o tamanho da div principal que vamos atribuir uma class chamada "limite". .limite{ position: relative; width: 300px; he

Estilo no Range. Criar um estilo no input tipo range é simples, vamos criar uma class chamada de ".estilo" com esta class vamos edita o background e também a bolinha que se movimenta. Antes de inciar o estilo será necessário criar o HTML . <input type="range" min="0" max="100" value="50" class="estilo" id="valor">  <br>  <p id="resultado">.</p> No final vamos usar o ID resultado para informar o valor. Criando o estilo CSS Primeiro o estilo do background. Aqui você vai manter o width como 100%, mas pode alterar o height e o border. .estilo {     -webkit-appearance: none;     background: #d3d3d3;     outline: none;     width: 100%;     height: 20px;     border-radius: 9px;    } Segunda parte criar a estilo da bolinha. .estilo::-webkit-slider-thumb {     -webkit-appearance: none;     appearance: none;     width: 25px;     he

Em algum momento você já teve a necessidade de criar uma animação ou algum efeito em uma imagem ao passar o mouse. Para facilitar o trabalho o Hover Animate criou um pequeno arquivo CSS que atende essa necessidade. É recomendado que junto ao Hover Animate seja utilizado algum framework para tornar o teu site responsivo. OBS: o estilo e cores tanto de letra quanto de botão é de responsabilidade sua. Confira. https://diegomoralesnavarro.github.io/-hover-animate.github.io/dist/index.html

Estrutura do @keyframes. Com o @keyframes podemos definir o início e fim da animação, possibilitando várias combinações. Podemos montar de duas formas sendo com from e to , ou por porcentagem 10% e 100% . @keyframes anim {     from {font-size: 10px;}     to {font-size: 50px;} } From é o inicio da animação, e to é o fim da animação. @keyframes anim {     10% {font-size: 10px;}     40% {font-size: 20px;}     80% {font-size: 10px;}     100% {font-size: 40px;} } Usando porcentagem podemos criar etapas mais específicas, fazendo ficar maior depois menor e no final maior novamente, entre outras formas. Chamar a animação. Após o nome @keyframes vem o nome da sua animação, esse nome vamos usar para chamar a animação. .anim {   animation-duration: 1s;   animation-name: anim; <!-- nome -->   animation-fill-mode: both; } Observe que usamos o mesmo nome tanto na chamada da class e na função css . Usando a anima

Criando um sistema de grid. Ter um site responsivo é muito importante, um site que é responsivo consegue se reconfigurar automaticamente de acordo com o tamanho e tipo de dispositivo que o visitante estiver utilizado. O sistema de grid permite que o site seja responsivo, muitas páginas da web são baseadas em Grid, isso significa que a página é dividida em colunas e assim fica mais fácil para colocar o elemento na página. Muitas vezes o sistema de grid possui 12 colunas, sendo que o tamanho total da tela sempre é 100% não importando o dispositivo usado. Para funcionar o sistema de grid é necessário uma <meta> tag conhecida como viewport , esteja colocada acima da tag <title> . <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-widthparte: Define a largura da página, para acompanhar mudança da largura do dispositivo (que irá variar dependendo do dispositivo). A initial-scale=1.0: Define o nível d

Usando o seletor nth-child ( ) O seletor nth-child( ) é usado para marcar determinado local ou linha, possibilitando aplicar vários estilos no local escolhido. Este seletor costuma ser usando em tabela , lista , parágrafo , spam e outros . Dentro do ( ) vão estar as instruções podendo ser em nome ou número possibilitando fazer diversas combinações para atender sua necessidade.  Exemplo de seletores nth-child(odd): Representa as linhas impares “modo simples e não permite maiores alterações”. nth-child(even): Representa as linhas Pares “modo simples e não permite maiores alterações”. nth-child(3): Representa o número da linha que deseja aplicar o estilo e sem repetição. nth-child(2n): Representa as linha que deseja aplicar o estilo, neste caso existe repetição, nth-child(2n+1): Representa a linhas impares, o 2n é a sequência de um sim e um não e o +1 representa a linha que vai iniciar. nth-child(0n+4): Representa que não foi escolhida um sequencia 0n,