Olá pessoal!
No design moderno, ao criar sites e aplicativos, muitos desenvolvedores aplicam o efeito de profundidade e volume, geralmente referindo-se a propriedades css como
box-shadow e
drop-shadow . Alguns acreditam que
em 2018 essa é uma tendência. De fato, existem muitos sites estrangeiros e russos que em 2018 começaram a aplicar sombras com mais frequência.
Nesse sentido, uma pequena
coleção de sombras simples e agradáveis de CSS , frequentemente encontradas em sites, apareceu recentemente (mais ou menos alguns pixels ao lado). A coleção é chamada
Box-shadows.css . Ela já recebeu algumas críticas positivas na rede e foi recentemente atualizada para a versão 1.0.4, na qual apareceram várias sombras mais bonitas, divididas em grupos.
Após a última atualização, a coleção começou a conter mais de 60 opções relevantes para sombras, ótimas para uso em tabelas, para o conteúdo de páginas iniciais, contêineres, barras de navegação e outros blocos do site.
O principal objetivo da criação desta coleção é facilitar o trabalho de desenvolvedores e web designers iniciantes na criação de um design agradável e moderno. Graças à coleção, você pode simplificar o trabalho com blocos e reduzir o tempo para selecionar sombras css no gerador (que, a propósito, também está disponível). É claro que é improvável que desenvolvedores experientes precisem disso, mas talvez eles possam aprender algo interessante por si mesmos. A coleção é útil para aqueles que ainda não conseguiram se aprofundar no layout, mas desejam criar belas sombras nos botões, blocos e contêineres do site.
Conectar estilos
Para conectar uma folha de estilo, acesse
o site do projeto e faça o download do arquivo necessário. Em seguida, anexe o arquivo à sua página html, após a tag <head>, por um método conveniente para você.
<head> <link rel="stylesheet" href="/box-shadows.css"> <link rel="stylesheet" href="/box-shadows.min.css"> </head>
Você pode usar
o gerador de arquivos
min.css , que permite criar seu próprio arquivo que consiste apenas nas classes selecionadas. Bem, ou apenas selecione o bloco que você precisa e copie a sombra que você gosta no seu site. Isso ajudará a reduzir a carga se o seu projeto usar menos de duas ou três sombras. Basta seguir as instruções no site e você terá sucesso.
Usando classes
Para conectar a sombra desejada ao seu bloco, basta adicionar a classe
.bShadow com o número desejado:
<div class="bShadow-54"></div>
Efeitos suspensos
Para criar um efeito de foco
instantâneo para o seu bloco, adicione a classe
desejada com o número, por exemplo,
.bShadow-1 e escreva a letra latina
h após o número. Por exemplo:
<div class="bShadow-38 bShadow-1h"></div>
Dê uma olhada
no exemplo da classe
.bShadow . Ao passar o mouse, ele atribui valores de sombra à classe vizinha
.bShadow-1 . Se você deseja que a sombra não apareça ao passar o mouse ou clicar nela, adicione a classe
.bSnoneTransformação e Animação Suaves
A classe
.bShadow, por padrão, usa animação suave na
transition: transform 0.2s ease-in-out .2s
transition: transform 0.2s ease-in-out , e também inclui uma propriedade que avisa o navegador sobre uma futura sombra e posição que a transformação
will-change: transform, box-shadow; .
Use isso para criar belas animações de seus blocos. Por exemplo, você pode adicionar sua classe ou propriedades com uma transformação:
.transform-translateY-5:hover { -webkit-transform: translateY(-5px) translateZ(0); transform: translateY(-5px) translateZ(0); }
Em seguida, adicione ao contêiner que você precisa:
<div class="bShadow transform-translateY-5 bShadow-1h"> </div> e você verá o
resultadoAdicionando o parâmetro inset
Para adicionar um parâmetro de sombra interna, basta colar o script na página html e especificar as classes para as quais você deseja aplicá-lo.
Por exemplo
.bShadow-1 . Para especificar várias classes, separe-as com vírgulas, como no exemplo abaixo. Não se esqueça de pôr um fim à aula!
[].forEach.call(document.querySelectorAll('.bShadow-1, .bShadow-2h, .bShadow-3'), function(node) { var bsh = getComputedStyle(node).boxShadow; node.style.boxShadow = "inset " + bsh; });
DemoGerador de caixa-sombra CSS
A coleção também implica um aumento no número de classes com sombras criadas pelo próprio usuário. Ou seja, você pode usar o
gerador de sombras clássico para complementar a coleção com seus próprios estilos. Ao clicar no botão Salvar e adicionar próximo, você pode criar um número infinito de classes. As primeiras classes geradas e subsequentes recebem um número de sequência que não está na coleção. Os estilos resultantes podem ser facilmente copiados e colados no arquivo raiz css do seu projeto ou no arquivo box-shadows.min.css criado no site de coleta.
Agora, estamos planejando expandir a coleção e configurar o pacote npm, mas existem algumas pequenas dificuldades com isso. Portanto, enquanto espero receber o link
cdnjs e o desenvolvimento do projeto.
GitHubPagePage