Desenvolvedor Web Blog

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

Trocando a palavra. Criar efeito é muito importante, torna a pagina mais interativa e agradável visualmente. Vamos aprender como fazer a troca de palavra e ao mesmo tempo tornar essa troca mais suave usando efeito. Prepare o arquivo HTML  com um paragrafo e um span. <p>Chocolate <span id="frases"></span>.</p> Antes de inciar visite o site do jQuery para baixar os arquivos ou utilize o CDN abaixo. <script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script> Criando a troca de palavra. Primeiro vamos definir as variáveis, uma para guardar as frases, uma para o tempo e uma para definir o valor do array inicial. let textos = ["branco", "preto", "amargo"] let atual = 0 let tempo = 3000 Segundo pegar o ID do span que vai receber a frase, e cri

Criar uma calculadora simples. Vamos desenvolver um calculadora simples usando os operadores básicos, contendo 3 campo input 1 campo select e um paragrafo para o resultado. Primeiro criar o HTML . <form> <input type="number" name="" id="numero1"> <select id="operacao">   <option value="+"> + </option>   <option value="-"> - </option>   <option value="*"> * </option>   <option value="/"> / </option> </select> <input type="number" name="" id="numero2"> <input type="button"  value="calcular" id="calcular"> <br> <p>Resultado: <span id="resultado">.</span></p> </form> Criando o objeto construtor com JavaScript. Vamos chamar de  calculadora e dentro serão criadas variáveis para

Mudando o estilo com JavaScript. Hoje vamos mudar o estilo de um titulo, apertando botões, e esses botões vão passar o nome de uma variável que estará guardando o estilo. Primeiro construir o HTML basico, contendo <H1> e <button>. <button id="estilo1">Estilo 1</button> <button id="estilo2">Estilo 2</button> <br> <h1 id="resultado"> Titulo </h1> Vamos para o nosso JS. Segunda parte colocar o ID em variáveis. let estilo1 = document.getElementById('estilo1'); let estilo2 = document.getElementById('estilo2'); let  resultado  = document.getElementById(' resultado '); Terceira parte criar a variáveis em forma de ARRAY para guardar os valores. var bt1 = { color: 'red', fontSize: '1rem',} var bt2 = { color: 'blue', fontSize: '3rem',} Quarta parte, vamos usar o ID do botão e colocar um evento de Clic