Pular para o conteúdo principal

Gerador de Box Shadow CSS Online

Gerador de Box Shadow CSS


Crie de forma simples o código CSS de efeito de sombra, para ser aplicado em imagem, caixa, botão e outros utilizando o Gerador CSS de Sombra de caixa.


Crie abaixo o estilo e no final copie o seu código CSS gerado.

Box shadow




Copie o código gerado abaixo

box-shadow: 10px 10px 5px 0px rgba(0,0,0,90%);


Movimente o input range para modificar a sombra da caixa


10


10


5


0


90




Comentários

Postar um comentário

Postagens mais visitadas deste blog

Formatar o número do telefone no campo input com JavaScript

Imagem
  A formatação do campo telefone é muito importante para quem salva o valor recebido no banco de dados ou até mesmo por uma questão visual. Um campo input tipo tel sem formatação como por exemplo em um formulário pode ficar estranho visualmente e atrapalhar a empresa na organização por chegar bagunçado ou com falta do número de DDD. Vou mostrar como criar um campo input que consegue receber o numero de telefone fixo e telefone celular formatando com DDD e caráter especial para separação. Formatando o campo input para telefone fixo e telefone celular Para criar essa formatação vamos utilizar o “.replace” junto com a “expressão regular”, para receber o valor substituindo e organizando baseado a expressão. Preparando o HTML com parâmetro JS Coloque o seguinte código abaixo em seu html <input type="tel" maxlength="14 required="" data-js="phone">   Observe que é um campo tipo TEL que recebe um limite de 14 caracteres com preenchime...
Leia mais

Colocar estilo no input range.

Imagem
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; ...
Leia mais

Criar um botão neon com borda animada

Imagem
 Criar um botão neon com borda animada Todos os sites possuem botões na mais diversas forma e estilo, todos os botões do site têm seu objetivo de levar usuário para algum lugar. Os botões são mais que uma simples forma de informar a rota eles tem um papel fundamental no momento de chamar a atenção, podendo ser por sua cor, forma e texto chamativo. Um site de sucesso precisa de ter algum diferencia e nesse tutorial vou mostrar como criar um botão animado do estilo neon.   Criar a estrutura HTML do botão neon. Para cria é muito simples, vamos usar a TAG A para ser o link e a TAG SPAN para fazer animações.   <a class="neon-bt" href="#">       <span></span>       <span></span>       <span></span>       <span></span>       Enviar     </a>   Repare que foi criado um CLASS c...
Leia mais